docs: drop in design handoff bundle (Findings v0.4.4)

Vendors the entire design_handoff_riprap_findings/ archive under
docs/design_handoff/ — README.md + CLAUDE_CODE_PROMPT.md + JSX/HTML
prototypes + tokens.css. Kept alongside the code so the JSX references
are inspectable next to the Svelte port that consumes them.

The JSX is React-based prototype, not production. Per the handoff:

> Recreate them as Svelte components. Lift visual values, copy, and
> interaction logic from the references; do not transpile JSX to
> Svelte.

This branch ships the v0.4.4 Findings region (5 Stones, 12 card
variants, run-health strip, smart provenance, hover linking, card
grammar reference) following that order of work.

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

docs/design_handoff/CLAUDE_CODE_PROMPT.md

@@ -0,0 +1,39 @@
+# Prompt for Claude Code
+
+Copy-paste this whole block into Claude Code as your opening message. It frames the task and points at the files in this bundle.
+
+---
+
+You're implementing a high-fidelity design into the existing Riprap codebase, which is **SvelteKit**. The design is a citation-grounded Flood Exposure Briefing UI for NYC, with the new "Findings region" as the centerpiece.
+
+The design lives in `design_handoff_riprap_findings/`. **Read `README.md` first**, then the `design_files/` directory. The HTML/JSX prototypes there are React-based references — your job is to **port them to Svelte 5 components** using runes (`$state`, `$derived`, `$props`) and the project's existing patterns. Do not copy JSX or React idioms; recreate the same visual + interaction grammar in idiomatic Svelte.
+
+**Order of work:**
+
+1. **Tokens first.** Port `design_files/tokens.css` verbatim into the app's global stylesheet (or wherever design tokens live in the existing codebase). The four epistemic tier colors (`--tier-empirical/modeled/proxy/synthetic`), the paper-register neutrals, the IBM Plex font stack, and the spacing scale are non-negotiable — every component below references them.
+
+2. **Card grammar.** Build the 12 card-body variants documented in §"Card grammar" of the README as small leaf components: `<HeadlineCard>`, `<TabularCard>`, `<ScalarsCard>`, `<SparkCard>`, `<HistogramCard>`, `<TimeseriesCard>`, `<ForecastCard>`, `<RasterCard>`, `<RasterPredCard>`, `<RegisterCard>`, `<ComparisonCard>`, `<MetaCard>`. Each takes a `card` prop matching the schema in §"Card data schema". A wrapper `<FindingCard>` renders the chrome (header strip, tier glyph, source, agency, footer with tier badge) and slots the body. Synthetic cards get a dashed top-rule.
+
+3. **Stone region.** A `<StoneRegion>` component groups cards by Stone (cornerstone / keystone / touchstone / lodestone / capstone). Header has the Stone name (serif italic), role tagline, run-tally chip, and a provenance toggle. Provenance trace renders below the header per the smart-default rules in §"Provenance trace".
+
+4. **Findings region.** Composes 5 `<StoneRegion>`s in fixed order, with a `<RunHealthStrip>` above them and (optionally) `<CardGrammarReference>` below. Wire props through: `density`, `provenanceMode`, `queryKey`, `showComparison`, `showGrammar`.
+
+5. **Cross-component linking.** Hovering a card sets `linkedKey` (Svelte store or `$state` lifted to the page). The briefing's map frame highlights the matching layer. See §"Hover linking" in the README.
+
+6. **Briefing + map + trace.** Once Findings is solid, port `briefing.jsx`, `map.jsx`, and `trace.jsx` similarly. The briefing is a long-form text region with inline citations whose hover state lights up the corresponding map layer.
+
+**Conventions to follow (read these before writing code):**
+
+- **Svelte 5 runes only.** No legacy `let`-as-state, no stores unless cross-route. Lift state to `+page.svelte` and pass via `$props()`.
+- **No emoji.** No icon font. Tier glyphs are inline SVG; see `glyphs.jsx` for the four shapes (filled square / open square / dotted ring / hatched square).
+- **No Tailwind.** This codebase uses scoped `<style>` blocks per component. Reuse the token CSS variables from step 1 — don't redeclare colors or spacing.
+- **No animation libraries.** All transitions are CSS, ≤200ms, and respect `prefers-reduced-motion` (already covered by the global rule in `tokens.css`).
+- **Accessibility is a hard requirement.** Tier is encoded by *color + glyph + label* (never color alone). Focus rings are 3px accent. Every interactive card needs `aria-label`. Provenance toggles are buttons with `aria-expanded`.
+
+**What to ignore in the bundle:**
+
+- The `Riprap Landing*.html` files are exploratory marketing-page variants, not part of this handoff. Port them only if explicitly asked.
+- `design-canvas.jsx`, `tweaks-panel.jsx`, `landing-variants.*` are prototype-time tooling, not product code.
+- The React component files (`*.jsx`) are reference implementations. Use them to read structure, copy strings/numbers, and verify visual fidelity — don't transpile them.
+
+**When in doubt, open the HTML file in a browser** (`Riprap Stone-Grouped UI v0.4.4.html`) and compare your Svelte output side-by-side. Pixel parity on the Findings region is the bar.

docs/design_handoff/README.md

@@ -0,0 +1,337 @@
+# Handoff: Riprap Findings Region (v0.4.4)
+
+## Overview
+
+**Riprap** is a citation-grounded Flood Exposure Briefing tool for New York City. A user enters an address, neighborhood, or proposed development; Riprap returns a written briefing where every numeric claim links to its primary public-record source (FEMA, USGS, NYC DOITT, FloodNet, NYC OpenData, etc.).
+
+This handoff covers the **Findings region** — the structured-data sibling of the briefing prose. It groups model outputs into five named "Stones" (cognitive roles), each rendered as a card stack with explicit epistemic tiering, smart provenance traces, and cross-linking to the map.
+
+The target codebase is **SvelteKit** (Svelte 5 with runes). The files in `design_files/` are React-based prototypes — design references, not production code. Recreate them as Svelte components.
+
+## About the Design Files
+
+The files in `design_files/` are **design references created in HTML + React** — high-fidelity prototypes showing the intended look and behavior. They are **not production code to copy directly**.
+
+Your task is to **recreate these designs in the existing Svelte codebase**, using its established patterns (Svelte 5 runes, scoped styles, the project's existing route structure and data layer). Lift visual values, copy, and interaction logic from the references; do not transpile JSX to Svelte.
+
+**File pairing** (each prototype area has one or two source files):
+
+- `Riprap Stone-Grouped UI v0.4.4.html` — main prototype, the v0.4.4 Findings region in context
+- `findings.jsx` — Findings region: stones, cards, run-health, grammar reference (the centerpiece of this handoff)
+- `briefing.jsx` — long-form briefing prose with inline citations
+- `map.jsx` — mini-map with FEMA AE / HWM / FloodNet / 311 / address layers and link highlighting
+- `trace.jsx`, `stones-trace.jsx`, `stone-evidence.jsx` — provenance trace variants
+- `shell.jsx` — app header, footer, cold-start state
+- `glyphs.jsx` — four tier glyphs as inline SVG
+- `tokens.css` — design tokens (colors, type, spacing). Port verbatim.
+- `styles.css` — component CSS. Reference only; rewrite as scoped Svelte styles.
+- `tweaks-panel.jsx`, `design-canvas.jsx`, `landing-variants.*` — prototype-time tooling. Ignore.
+
+## Fidelity
+
+**High-fidelity (hifi).** Pixel-perfect mockups with final colors, typography, spacing, glyphs, and interactions. Recreate the UI pixel-perfectly using the codebase's existing libraries and patterns. The tier color values, the IBM Plex font stack, the 4/8/12/16/24/32/48/64/96 spacing scale, and the four-tier glyph system are all final.
+
+The Findings region in particular has been through several iterations (v0.4.0 → v0.4.4) and is settled. Don't redesign card layouts; port them as-is.
+
+## Screens / Views
+
+The product is a single-page app with two states: **cold-start** (no query) and **briefing** (query active).
+
+### 1. Cold-start
+
+Empty state with the wordmark, a deck explaining what Riprap is, a query input, three sample-query buttons, and a "How Riprap is built" trust band. See `shell.jsx` → `<ColdStart>`.
+
+- **Layout**: centered single column, max-width ~720px, paper background (`--paper`)
+- **Wordmark**: `riprap` lowercase, IBM Plex Mono 14px / 600, with a 0.85em accent bar `▌` prefix
+- **Deck**: serif paragraph, 18px, line-height 1.55, ink-secondary
+- **Query input**: full width, 1px ink border, mono placeholder, 16px
+- **Submit**: ink fill, paper text, mono caps, 13px
+- **Sample queries**: three buttons in a column, each shows mode (caps mono) / query (sans 16px) / sub (mono 12px tertiary)
+- **Trust band**: section-label heading, italic-serif "Cornerstone remembers. Keystone tallies. Touchstone watches. Lodestone projects. Capstone writes it all down with citations." then a bullet list
+
+### 2. Briefing (active query)
+
+Three-region layout, vertical stack:
+
+1. **App header** (sticky top): wordmark · context · query pill · methodology / export PDF / live status
+2. **Briefing prose region**: long-form text with inline `[N]` citations, three side-by-side panes (excerpt · evidence cards · mini map)
+3. **Findings region**: the v0.4.4 Stone-grouped card stack (this handoff's focus)
+4. **Footer**: tier legend + build line
+
+The Findings region is the substantial new surface. Everything below documents it.
+
+## Findings Region (v0.4.4) — detailed spec
+
+### Composition
+
+```
+<FindingsRegion>
+  <RunHealthStrip />               ← 1 row, top, summarizes all 25 model calls
+  <StoneRegion stone="cornerstone" />
+  <StoneRegion stone="keystone" />
+  <StoneRegion stone="touchstone" />
+  <StoneRegion stone="lodestone" />
+  <StoneRegion stone="capstone" />
+  <CardGrammarReference />         ← optional, on by default; one stub per variant
+</FindingsRegion>
+```
+
+### Stones
+
+Five fixed roles, in order:
+
+| key | name | role | tag |
+|---|---|---|---|
+| `cornerstone` | Cornerstone | the hazard reader | what NYC's ground remembers |
+| `keystone` | Keystone | the asset register | what's exposed |
+| `touchstone` | Touchstone | the present-tense witness | what's happening now |
+| `lodestone` | Lodestone | the future-pointer | what's coming |
+| `capstone` | Capstone | the writer | what we say, with citations |
+
+Each `<StoneRegion>` has:
+
+- **Header**: Stone name (IBM Plex Serif 26px italic for the name, sans for the role) · role tagline · `<StoneTally>` chip showing `N/M cards fired` · provenance toggle button
+- **Provenance trace**: smart-default expansion (see below). Renders specialist tree with status pips.
+- **Card grid**: 12-column grid, each card spans 4 cols by default (3 per row); register/timeseries/raster cards may span 6.
+
+### Card data schema
+
+```ts
+type Card = {
+  stone: "cornerstone" | "keystone" | "touchstone" | "lodestone" | "capstone";
+  tier: "empirical" | "modeled" | "proxy" | "synthetic";
+  variant: CardVariant;       // see below
+  source: string;             // short label, e.g. "FEMA"
+  agency: string;             // long form, e.g. "FEMA preliminary FIRM, panel 36047C..."
+  vintage: string;            // e.g. "2024-Q3" or "2007–present"
+  title: string;              // card title
+  // variant-specific fields:
+  headline?: string; subhead?: string;
+  columns?: string[]; rows?: (string | number)[][];
+  scalars?: { label: string; value: string; unit?: string }[];
+  spark?: number[]; histogram?: number[];
+  timeseries?: { hours: number[]; values: number[]; threshold?: number };
+  forecast?: { years: number[]; p10: number[]; p50: number[]; p90: number[] };
+  raster?: "stormwater" | "fema-ae" | "hwm" | "floodnet-density" | ...;
+  register?: { tag: string; label: string; sourceId: string; detail: string }[];
+  comparison?: { left: ScalarSet; right: ScalarSet; delta: string };
+  meta?: Record<string, string>;
+  // citation fan-out:
+  cites?: { id: string; label: string; href?: string }[];
+  // map link:
+  mapLayer?: "fema-ae" | "hwm" | "floodnet" | "nycha" | "address" | ...;
+};
+```
+
+See `findings.jsx` lines 12–230 for the canonical `CARDS` table populated for the Red Hook query.
+
+### Card grammar (12 variants)
+
+Every card uses the same chrome — title row (sans 14/600), source · agency · vintage row (mono 11/tertiary), a body block, and a footer with the **tier badge** (3-letter caps mono) and a "cite" button. The body block is one of:
+
+| variant | shape | use |
+|---|---|---|
+| `headline` | one big number/label, scenario-tagged subhead | single-fact cards: "Zone AE" |
+| `tabular` | small N×3 table, mono | observation lists: HWM marks |
+| `scalars` | 2–3 labeled scalars in a row | "1.2 m · 0.18 mi · 2012" |
+| `spark` | 60×24 inline sparkline, no axes | trend at a glance |
+| `histogram` | 8–12 bar histogram, mono labels | distributions |
+| `timeseries` | 240×84 line chart with threshold rule | hourly water level, 311 calls |
+| `forecast` | 240×88 fan chart (p10/p50/p90) | 2050/2080 SLR, surge |
+| `raster` | 240×120 stylized raster thumbnail | FEMA AE polygon, stormwater extent, HWM contour |
+| `raster-pred` | same shape with dashed top-rule (synthetic tier) | TerraMind 2050 prediction |
+| `register` | 3-col dense list (tag · label · sourceId), detail in `title=` tooltip | NYCHA buildings, schools |
+| `comparison` | side-by-side scalar columns with delta | FEMA-AE vs Prithvi-2050 |
+| `meta` | definition list of run metadata | model id, prompt hash, latency |
+
+**Synthetic tier** cards (TerraMind predictions, prior-only Lodestone outputs) get a **dashed top-rule** (1px dashed `--tier-synthetic-line`) to telegraph "no observed data here." Comparison cards always render synthetic.
+
+The `<CardGrammarReference>` region renders one stub per variant in `findings.jsx` lines 529–581 — a visual catalog the design team uses to spot-check fidelity. Keep it, gate it on `showGrammar` prop (default true in dev, false in prod).
+
+### Tier system
+
+Four epistemic tiers, encoded redundantly:
+
+| tier | color | glyph | badge | meaning |
+|---|---|---|---|---|
+| `empirical` | `#0B5394` (8.59:1) | filled square | EMP | observed, ground-truth |
+| `modeled` | `#2A6FA8` (5.41:1) | open square | MOD | computed from observations |
+| `proxy` | `#6B6B6B` (5.74:1) | dotted ring | PRX | indirect signal, e.g. 311 calls |
+| `synthetic` | `#2A6FA8` + dashed | hatched square | SYN | model prior, no observation |
+
+Glyphs are inline SVG, 12×12, black-stroke. See `glyphs.jsx` for the four shapes.
+
+**Accessibility**: tier is *always* encoded by color + glyph + label, never color alone. Modeled and synthetic share a hue; the dashed top-rule and glyph carry the difference.
+
+### Provenance trace
+
+Every Stone has a tree of specialists ("CORN-001: pull FEMA NFHL → CORN-002: parse panel index → ..."). Each specialist has a status: `ok` / `warn` / `error` / `silent`.
+
+**Smart-default rule** (`provenanceMode = "smart"`):
+
+- All-`ok` Stone → **collapsed** by default, single-line summary "12/12 specialists fired clean"
+- Any `warn` or `error` → **expanded**, full tree visible
+- All `silent` → collapsed, single-line "no firings (section omitted from briefing)"
+
+`provenanceMode = "expanded"` forces all expanded; `"collapsed"` forces all collapsed (warn/error still get a count chip).
+
+The trace UI: indented tree, mono ids, status pip (●/▲/■/○) in tier-color or warn/error colors. Specialist names italic-serif. Hovering a specialist row dims the rest. See `trace.jsx` for the leaf and `stones-trace.jsx` for the per-Stone composition.
+
+### Run-health strip
+
+Single row above the Stones, full-width. Shows:
+
+- Total specialists fired / total specialists registered (e.g. `83/100`)
+- Per-tier breakdown as four chips: `EMP 41 · MOD 28 · PRX 12 · SYN 2`
+- Total runtime (e.g. `3.4s`)
+- Cache-hit ratio (e.g. `92%`)
+
+Mono throughout. Background `--paper-deep`, 1px ink-soft top + bottom rule.
+
+### Hover linking
+
+Every card with a `mapLayer` is hoverable. On hover (or focus), the card's `key` becomes the page-level `linkedKey`. The briefing's map frame reads `linkedKey` and:
+
+- Adds `is-link-{layer}` class to its root, which lights up that layer (see `map.jsx` for the CSS rules)
+- Renders a small label badge bottom-right: "linked: {layer}"
+
+The same applies in reverse: hovering a layer in the map sets `linkedKey` to the corresponding card key, which gets a 2px accent outline.
+
+In Svelte: lift `linkedKey` to `+page.svelte` as `let linkedKey = $state(null)`, pass it down both branches, and have the cards / layers update it on `pointerenter` / `focus` / `pointerleave` / `blur`.
+
+### Density
+
+`density: "compact" | "comfortable"` (default `comfortable`).
+
+- **Comfortable**: 16px card padding, 14px line-height multiplier 1.4
+- **Compact**: 10px card padding, 12px line-height multiplier 1.25, register-card row height 18px (vs 24px)
+
+Pass through to all card bodies; only register/tabular/meta visibly change.
+
+## Interactions & Behavior
+
+- **Card hover**: 200ms `background-color` transition to `--paper-deep`, 2px accent outline if linked
+- **Cite button**: opens a small popover with the full citation list (`cites[]`), each row a link to the source PDF/page
+- **Provenance toggle**: button with `aria-expanded`, animates the tree open/closed via `details`/`summary` or scoped `max-height` transition (≤200ms)
+- **Map layer hover**: sets `linkedKey`, 100ms layer fill opacity transition
+- **Reduced motion**: all transitions become 0.01ms via the global rule in `tokens.css`. Don't add motion on top.
+- **Keyboard**: every card is `tabindex=0` with `aria-label="{tier} card · {title} · {source}"`. Cite button is real `<button>`. Provenance toggle is real `<button>`.
+- **Loading**: cards show a 1px ink-soft skeleton (no spinner); replace with content when the specialist returns
+- **Error / silent**: cards with status `error` render a 1-line "specialist failed: {reason}" in tier-error color and stay; cards with status `silent` are omitted entirely (silence over confabulation — design tenet)
+
+## State Management
+
+Svelte 5 runes; lift to `+page.svelte`:
+
+```svelte
+<script>
+  let query = $state(null);
+  let density = $state("comfortable");
+  let provenanceMode = $state("smart");
+  let showComparison = $state(false);
+  let showGrammar = $state(false);   // dev-only toggle
+  let linkedKey = $state(null);
+
+  // Data: load once per query, hydrate from server
+  let cardsByStone = $derived(loadCards(query));
+  let runHealth = $derived(summarize(cardsByStone));
+</script>
+```
+
+Children take props via `$props()`. No Svelte stores unless cross-route.
+
+Data fetching: assume the existing codebase has a `+page.server.ts` load function that runs the 25 specialists and returns the `Card[]` payload. This handoff doesn't change the data layer; it changes the rendering.
+
+## Design Tokens
+
+Port `tokens.css` verbatim. Key values:
+
+**Tier colors** (all WCAG AA on white):
+- `--tier-empirical: #0B5394` (8.59:1)
+- `--tier-modeled: #2A6FA8` (5.41:1)
+- `--tier-proxy: #6B6B6B` (5.74:1)
+- `--tier-synthetic: #2A6FA8` (pattern-differentiated)
+
+**Neutrals**:
+- `--paper: #FAFAF7` (warm near-white, USGS-report register)
+- `--paper-deep: #F2F2EE`
+- `--ink: #1A1A1A` · `--ink-secondary: #4A4A4A` · `--ink-tertiary: #6B6B6B`
+- `--rule: #1A1A1A` · `--rule-soft: #C9C9C5`
+
+**Accent**:
+- `--accent: #B8620A` (for text, AA)
+- `--accent-graphical: #D17C00` (for shapes/lines, ≥3:1)
+
+**Type**:
+- `--font-sans: "IBM Plex Sans"` (UI, body)
+- `--font-serif: "IBM Plex Serif"` (Stone names, hero italic emphasis, oversized stone numerals)
+- `--font-mono: "IBM Plex Mono"` (labels, source ids, badges, table cells)
+
+All three are SIL OFL / Apache; self-host or load from Google Fonts. **No system fallbacks for branding** — always specify the Plex stack, fall through only on load failure.
+
+**Spacing** (`--s-1` through `--s-9`): 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 px. Use these tokens; don't hand-roll values.
+
+**Type scale** (suggested, not enforced):
+- 11px mono labels (`section-label`)
+- 12–13px mono row text
+- 14px sans card titles (600)
+- 16px sans body
+- 18px sans deck text
+- 26px serif italic Stone names
+- 36–52px serif headlines (italic for emphasis)
+
+**Radius**: 0 throughout (this is a civic-tech-clean, USGS-report register; no rounded corners except `1px` on focus rings).
+
+**Shadows**: none. Differentiation by 1px rules and `--paper-deep` fills only.
+
+## Assets
+
+- **Fonts**: IBM Plex Sans / Serif / Mono. Self-host woff2 or Google Fonts.
+- **Wordmark**: text + accent bar `▌` prefix, no logo file
+- **Tier glyphs**: inline SVG, see `glyphs.jsx`
+- **Map raster thumbnails**: hand-drawn SVG approximations using each layer's conventional palette. See `findings.jsx` → `RasterThumb`. Replace with real raster previews if/when MapLibre tile snapshots are wired up.
+- **Real map**: the production map should use **MapLibre GL** with a custom `style.json` that respects the tier palette. Style fragments are sketched in `shell.jsx` comments.
+- **No icon library.** No Lucide, no Heroicons. SVG glyphs for tiers, mono characters (⌕, ↗, ▌) for chrome.
+- **No emoji.**
+
+## Files in this bundle
+
+```
+design_handoff_riprap_findings/
+├── CLAUDE_CODE_PROMPT.md        ← paste this into Claude Code first
+├── README.md                     ← you are here
+└── design_files/
+    ├── Riprap Stone-Grouped UI v0.4.4.html   ← main prototype, open in browser
+    ├── Riprap Landing.html
+    ├── Riprap Landing Variants.html
+    ├── tokens.css                ← port verbatim
+    ├── styles.css                ← reference only
+    ├── findings.jsx              ← Findings region (this handoff's centerpiece)
+    ├── briefing.jsx              ← long-form prose
+    ├── evidence.jsx              ← evidence card stack used in briefing
+    ├── map.jsx                   ← mini-map with link highlighting
+    ├── trace.jsx
+    ├── stones-trace.jsx
+    ├── stone-evidence.jsx
+    ├── shell.jsx                 ← header, footer, cold-start
+    ├── glyphs.jsx                ← four tier glyphs
+    ├── tweaks-panel.jsx          ← prototype tooling, ignore
+    ├── design-canvas.jsx         ← prototype tooling, ignore
+    ├── landing-variants.css      ← marketing-page exploration, ignore unless asked
+    └── landing-variants.jsx      ← marketing-page exploration, ignore unless asked
+```
+
+## Scope
+
+**In scope** for this handoff: the Findings region (5 Stones, 12 card variants, run-health strip, smart provenance, hover linking, card grammar reference). Briefing prose and map are in scope to the extent they connect to Findings via `linkedKey`.
+
+**Out of scope**: the cold-start state, the marketing landing page, the methodology PDF, the export-PDF flow. Port these later.
+
+## Open questions for the design team
+
+These are deliberately *not* resolved in the prototype; raise them with the designer before locking implementation:
+
+1. Should `register` cards paginate when N > 20, or stay scrollable in a fixed-height card?
+2. The `comparison` card is currently always synthetic (FEMA-AE vs Prithvi-2050). Will there be empirical-vs-empirical comparisons (e.g. FEMA-AE vs HWM observed)?
+3. Run-health cache-hit ratio — is this surfaced to end users, or is it dev-mode only?
+4. Provenance trace expansion: should expanded state survive across query changes, or reset?

docs/design_handoff/design_files/Riprap Landing Variants.html

@@ -0,0 +1,34 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Riprap ,  Landing variants</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Serif:wght@400;500;600&display=swap" rel="stylesheet" />
+<link rel="stylesheet" href="tokens.css" />
+<link rel="stylesheet" href="landing-variants.css" />
+</head>
+<body>
+<template id="__bundler_thumbnail">
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100" height="100" fill="#FAFAF7"/>
+  <g transform="translate(20 30)" fill="#0B5394">
+    <rect x="0" y="0" width="60" height="6"/>
+    <rect x="0" y="12" width="60" height="3"/>
+    <rect x="0" y="20" width="42" height="3"/>
+    <rect x="0" y="30" width="60" height="10"/>
+  </g>
+</svg>
+</template>
+<div id="root"></div>
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+
+<script type="text/babel" src="design-canvas.jsx"></script>
+<script type="text/babel" src="landing-variants.jsx"></script>
+</body>
+</html>

docs/design_handoff/design_files/Riprap Landing.html

@@ -0,0 +1,339 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Riprap · Flood Exposure Briefing for NYC</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Serif:wght@400;500;600&display=swap" rel="stylesheet" />
+<link rel="stylesheet" href="tokens.css" />
+<link rel="stylesheet" href="landing-variants.css" />
+<style>
+.land-page { max-width: 1200px; margin: 0 auto; }
+.land-section-stones-detail { background: var(--paper-deep); padding: 56px 32px; border-top: 1px solid var(--rule-soft); }
+.land-stones-detail { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: white; border: 1px solid var(--rule-soft); border-bottom: 2px solid var(--ink); }
+.land-stones-detail-cell { position: relative; padding: 28px 18px 22px; border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
+.land-stones-detail-cell:last-child { border-right: none; }
+.land-stones-detail-num { position: absolute; top: 6px; right: 10px; font-family: var(--font-serif); font-style: italic; font-weight: 400; font-size: 38px; line-height: 1; color: var(--rule-soft); letter-spacing: -0.02em; pointer-events: none; }
+.land-stones-detail-name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0; color: var(--ink); }
+.land-stones-detail-role { font-family: var(--font-sans); font-size: 13px; color: var(--ink-secondary); }
+.land-stones-detail-tag { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-tertiary); margin: 0 0 6px; line-height: 1.45; }
+.land-stones-detail-sources { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--rule-soft); font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); line-height: 1.55; }
+.land-stones-deck { font-family: var(--font-serif); font-size: 17px; line-height: 1.6; color: var(--ink-secondary); max-width: 70ch; margin: 0 0 22px; }
+
+/* Compact "What you'll get back" · three panes (excerpt + evidence + map) */
+.land-preview-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
+.land-preview-pane { background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+.land-preview-pane .land-preview-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); margin: 0; }
+.land-preview-pane-excerpt .land-preview-body { font-family: var(--font-serif); font-size: 15px; line-height: 1.55; color: var(--ink); margin: 0; }
+.land-preview-pane-excerpt .land-preview-cites { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--rule-soft); }
+.land-preview-pane-excerpt .land-preview-cite-row { grid-template-columns: 30px 1fr 70px; gap: 8px; font-size: 11px; }
+
+.land-preview-pane-cards { gap: 8px; }
+.land-evcard { background: var(--paper); border: 1px solid var(--rule-soft); padding: 8px 10px; display: flex; flex-direction: column; gap: 3px; }
+.land-evcard-empirical { border-left: 2px solid var(--tier-empirical); }
+.land-evcard-modeled { border-left: 2px solid var(--tier-modeled); }
+.land-evcard-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; }
+.land-evcard-tier { color: var(--ink-secondary); text-transform: uppercase; }
+.land-evcard-empirical .land-evcard-tier { color: var(--tier-empirical); }
+.land-evcard-modeled .land-evcard-tier { color: var(--tier-modeled); }
+.land-evcard-id { color: var(--ink-tertiary); }
+.land-evcard-claim { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.35; color: var(--ink); }
+.land-evcard-source { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-tertiary); }
+
+.land-preview-pane-map { padding: 16px 18px; }
+.land-mapmini { position: relative; aspect-ratio: 6 / 5; border: 1px solid var(--rule-soft); overflow: hidden; }
+.land-mapmini-legend { position: absolute; left: 6px; bottom: 6px; right: 6px; display: flex; gap: 10px; padding: 4px 6px; background: rgba(255,255,255,0.92); font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.04em; color: var(--ink-secondary); }
+.land-mapmini-legend span { display: inline-flex; align-items: center; gap: 4px; }
+.lm-sw { display: inline-block; width: 8px; height: 8px; }
+.lm-sw-emp { background: var(--tier-empirical); }
+.lm-sw-mod { background: rgba(42,111,168,0.4); border: 1px dashed var(--tier-modeled); }
+.lm-sw-prx { background: transparent; border: 1px solid #6B6B6B; border-radius: 50%; }
+.land-preview-mapmeta { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-tertiary); }
+
+@media (max-width: 1000px) {
+  .land-preview-grid { grid-template-columns: 1fr 1fr; }
+  .land-preview-pane-excerpt { grid-column: 1 / -1; }
+}
+@media (max-width: 640px) {
+  .land-preview-grid { grid-template-columns: 1fr; }
+  .land-preview-pane-excerpt { grid-column: auto; }
+}
+@media (max-width: 880px) {
+  .land-stones-detail { grid-template-columns: 1fr; }
+  .land-stones-detail-cell { border-right: none; border-bottom: 1px solid var(--rule-soft); }
+  .land-stones-detail-cell:last-child { border-bottom: none; }
+}
+</style>
+</head>
+<body>
+<template id="__bundler_thumbnail">
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100" height="100" fill="#FAFAF7"/>
+  <g transform="translate(20 30)" fill="#0B5394">
+    <rect x="0" y="0" width="60" height="6"/>
+    <rect x="0" y="12" width="60" height="3"/>
+    <rect x="0" y="20" width="42" height="3"/>
+    <rect x="0" y="30" width="60" height="10"/>
+  </g>
+</svg>
+</template>
+<div id="root"></div>
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+
+<script type="text/babel">
+const { useState, useEffect } = React;
+
+const SAMPLE_QUERIES = [
+  "80 Pioneer Street, Red Hook",
+  "Coney Island Hospital",
+  "PS 188, Lower East Side",
+  "Hammels Houses, Rockaway",
+  "Bowling Green station",
+  "555 W 57th Street",
+];
+
+const STONE_FRIEZE = [
+  { name: "Cornerstone", role: "the hazard reader",  tag: "what NYC's ground remembers", sources: "USGS HWMs · FEMA NFHL · DEP stormwater · Prithvi historical" },
+  { name: "Keystone",    role: "the asset register", tag: "what's exposed",              sources: "MTA · NYCHA · DOE · DOH · PLUTO" },
+  { name: "Touchstone",  role: "the live observer",  tag: "what's happening now",        sources: "FloodNet sensors · 311 complaints · tidal gauges" },
+  { name: "Lodestone",   role: "the projector",      tag: "what's coming",               sources: "NPCC4 · TTM foundation model · TerraMind synthetic SAR · NFIP" },
+  { name: "Capstone",    role: "the synthesizer",    tag: "writes it all down",          sources: "Granite composer · Mellea grounding-check · WeasyPrint" },
+];
+
+const QueryBox = () => (
+  <form className="land-query land-query-lg" onSubmit={(e) => e.preventDefault()}>
+    <span className="land-query-prompt" aria-hidden="true">›</span>
+    <input
+      type="text"
+      placeholder="Address, neighborhood, or BBL. e.g. 80 Pioneer Street, Red Hook"
+      className="land-query-input"
+      aria-label="Query an address, neighborhood, or BBL"
+    />
+    <button type="submit" className="land-query-submit">Brief this place →</button>
+  </form>
+);
+
+const CyclingExamples = () => {
+  const [i, setI] = useState(0);
+  useEffect(() => {
+    const t = setInterval(() => setI((x) => (x + 1) % SAMPLE_QUERIES.length), 2200);
+    return () => clearInterval(t);
+  }, []);
+  return (
+    <div className="land-cycling" aria-live="polite">
+      <span className="land-cycling-label">Try:</span>
+      <span className="land-cycling-rail">
+        {SAMPLE_QUERIES.map((q, idx) => (
+          <span key={q} className={`land-cycling-item ${idx === i ? "is-active" : ""}`} aria-hidden={idx !== i}>
+            {q}
+          </span>
+        ))}
+      </span>
+    </div>
+  );
+};
+
+const GroundedOutputPreview = () => (
+  <div className="land-preview-grid">
+    {/* Pane 1 · Excerpt */}
+    <div className="land-preview-pane land-preview-pane-excerpt">
+      <div className="land-preview-eyebrow">Briefing excerpt</div>
+      <p className="land-preview-body">
+        The lot sits inside the FEMA <span className="land-preview-cite">1% AE flood zone <sup>[c3]</sup></span>,
+        with Sandy high-water marks recorded
+        <span className="land-preview-cite"> 4.7 ft above grade <sup>[c1]</sup></span>.
+        FloodNet FN-BK-018 has logged
+        <span className="land-preview-cite"> 14 nuisance floods since 2023 <sup>[c2]</sup></span>.
+      </p>
+      <div className="land-preview-cites">
+        <div className="land-preview-cite-row">
+          <span className="land-preview-cite-pin">[c1]</span>
+          <span className="land-preview-cite-src">USGS HWM · Sandy 2012</span>
+          <span className="land-preview-cite-tier">empirical</span>
+        </div>
+        <div className="land-preview-cite-row">
+          <span className="land-preview-cite-pin">[c2]</span>
+          <span className="land-preview-cite-src">FloodNet FN-BK-018</span>
+          <span className="land-preview-cite-tier">empirical</span>
+        </div>
+        <div className="land-preview-cite-row">
+          <span className="land-preview-cite-pin">[c3]</span>
+          <span className="land-preview-cite-src">FEMA NFHL · 36047C0207</span>
+          <span className="land-preview-cite-tier">modeled</span>
+        </div>
+      </div>
+    </div>
+
+    {/* Pane 2 · Evidence cards (2x2 grid) */}
+    <div className="land-preview-pane land-preview-pane-cards">
+      <div className="land-preview-eyebrow">Evidence cards</div>
+      <div className="land-evcard-grid">
+      <article className="land-evcard land-evcard-empirical">
+        <header className="land-evcard-head">
+          <span className="land-evcard-tier">empirical</span>
+          <span className="land-evcard-id">e1</span>
+        </header>
+        <div className="land-evcard-claim">4.7 ft Sandy storm-surge HWM at address</div>
+        <div className="land-evcard-source">USGS High-Water Mark database · 2012</div>
+      </article>
+      <article className="land-evcard land-evcard-empirical">
+        <header className="land-evcard-head">
+          <span className="land-evcard-tier">empirical</span>
+          <span className="land-evcard-id">e2</span>
+        </header>
+        <div className="land-evcard-claim">14 nuisance-flood events, 2023–2026</div>
+        <div className="land-evcard-source">FloodNet FN-BK-018 · 2 blocks north</div>
+      </article>
+      <article className="land-evcard land-evcard-modeled">
+        <header className="land-evcard-head">
+          <span className="land-evcard-tier">modeled</span>
+          <span className="land-evcard-id">e3</span>
+        </header>
+        <div className="land-evcard-claim">FEMA 1% annual-chance (AE) flood zone</div>
+        <div className="land-evcard-source">FEMA NFHL · panel 36047C0207</div>
+      </article>
+      <article className="land-evcard land-evcard-modeled">
+        <header className="land-evcard-head">
+          <span className="land-evcard-tier">modeled</span>
+          <span className="land-evcard-id">e5</span>
+        </header>
+        <div className="land-evcard-claim">+30 in MSL by 2070 (NPCC4 high)</div>
+        <div className="land-evcard-source">NPCC4 SLR projection · 2024</div>
+      </article>
+      </div>
+      <div className="land-preview-spacer"/>
+    </div>
+
+    {/* Pane 3 · Mini map */}
+    <div className="land-preview-pane land-preview-pane-map">
+      <div className="land-preview-eyebrow">Map</div>
+      <div className="land-mapmini" role="img" aria-label="Sample exposure map of Red Hook">
+        <svg viewBox="0 0 240 200" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" style={{ display: "block", width: "100%", height: "100%" }}>
+          {/* base */}
+          <rect width="240" height="200" fill="#F2F2EE"/>
+          {/* water */}
+          <path d="M0,150 Q60,140 120,148 T240,140 L240,200 L0,200 Z" fill="#D6DDE0"/>
+          <path d="M0,90 Q40,82 90,88 L120,86 L120,150 L0,150 Z" fill="#D6DDE0"/>
+          {/* AE zone (modeled) · translucent fill */}
+          <path d="M30,80 L130,76 L160,140 L40,148 Z" fill="rgba(42,111,168,0.22)" stroke="#2A6FA8" strokeWidth="0.8" strokeDasharray="3 2"/>
+          {/* HWM contour (empirical) */}
+          <path d="M50,90 Q90,84 130,90 T200,108" fill="none" stroke="#0B5394" strokeWidth="1.2"/>
+          {/* streets */}
+          <g stroke="#B8B5AE" strokeWidth="0.5" fill="none">
+            <path d="M0,60 L240,52"/>
+            <path d="M0,110 L240,102"/>
+            <path d="M60,0 L72,200"/>
+            <path d="M120,0 L132,200"/>
+            <path d="M180,0 L192,200"/>
+          </g>
+          {/* FloodNet sensor (empirical · square) */}
+          <g transform="translate(108 92)">
+            <rect x="-3" y="-3" width="6" height="6" fill="#0B5394" stroke="white" strokeWidth="0.8"/>
+          </g>
+          {/* 311 cluster (proxy · open circles) */}
+          <g fill="none" stroke="#6B6B6B" strokeWidth="0.8">
+            <circle cx="80" cy="120" r="3"/>
+            <circle cx="86" cy="124" r="3"/>
+            <circle cx="92" cy="118" r="3"/>
+          </g>
+          {/* queried address pin */}
+          <g transform="translate(118 112)">
+            <circle r="8" fill="none" stroke="#1A1A1A" strokeWidth="1.2"/>
+            <circle r="2.4" fill="#1A1A1A"/>
+          </g>
+        </svg>
+        <div className="land-mapmini-legend">
+          <span><span className="lm-sw lm-sw-emp"/>empirical</span>
+          <span><span className="lm-sw lm-sw-mod"/>modeled</span>
+          <span><span className="lm-sw lm-sw-prx"/>proxy</span>
+        </div>
+      </div>
+      <div className="land-preview-mapmeta">Red Hook · z16 · Carto Positron</div>
+    </div>
+  </div>
+);
+
+const StonesSection = () => (
+  <section className="land-section-stones-detail" id="methodology">
+    <div className="land-page">
+      <div className="land-section-head">
+        <span className="section-label">How Riprap reads a place</span>
+        <span className="land-section-meta">Five Stones · one taxonomy · every briefing</span>
+      </div>
+      <p className="land-stones-deck">
+        Each briefing routes through a fixed taxonomy of public-record specialists. Each Stone is a
+        class of evidence. Together they form the briefing, and every claim in the output traces
+        back to the Stone that produced it.
+      </p>
+      <div className="land-stones-detail">
+        {STONE_FRIEZE.map((s, i) => (
+          <article key={s.name} className="land-stones-detail-cell">
+            <div className="land-stones-detail-num">{String(i + 1).padStart(2, "0")}</div>
+            <h3 className="land-stones-detail-name">{s.name}</h3>
+            <div className="land-stones-detail-role">{s.role}</div>
+            <p className="land-stones-detail-tag">{s.tag}</p>
+            <div className="land-stones-detail-sources">{s.sources}</div>
+          </article>
+        ))}
+      </div>
+    </div>
+  </section>
+);
+
+const Landing = () => (
+  <div className="land land-v1">
+    <header className="land-header">
+      <span className="riprap-wordmark">riprap</span>
+      <span className="land-header-sep">/</span>
+      <span className="land-header-context">Flood Exposure Briefing · NYC</span>
+      <nav className="land-header-nav">
+        <a href="#methodology">Methodology</a>
+        <a href="#sources">Sources</a>
+        <a href="#about">About</a>
+      </nav>
+    </header>
+
+    <div className="land-page">
+      <main className="land-hero land-hero-v1">
+        <h1 className="land-hero-h1">
+          <span className="land-hero-headline">A flood exposure briefing<br/>for <em>any place</em> in New York City.</span>
+          <span className="land-hero-deck">
+            Type an address. Get a written briefing where every numeric claim
+            links to its primary public-record source.
+          </span>
+        </h1>
+        <QueryBox/>
+        <CyclingExamples/>
+      </main>
+      <section className="land-section land-section-v1">
+        <div className="land-section-head">
+          <span className="section-label">What you'll get back</span>
+          <span className="land-section-meta">A grounded paragraph with citations, not a chatbot answer.</span>
+        </div>
+        <GroundedOutputPreview/>
+      </section>
+    </div>
+
+    <StonesSection/>
+
+    <footer className="land-footer">
+      <span className="land-footer-tiers">
+        <span className="land-footer-tier"><span className="lm-sw lm-sw-emp"/>empirical</span>
+        <span className="land-footer-tier"><span className="lm-sw lm-sw-mod"/>modeled</span>
+        <span className="land-footer-tier"><span className="lm-sw lm-sw-prx"/>proxy</span>
+        <span className="land-footer-tier"><span className="lm-sw lm-sw-syn"/>synthetic</span>
+      </span>
+      <span className="land-footer-build">Riprap v0.4.4 · NYC OpenData · FEMA NFHL · USGS · NPCC4</span>
+    </footer>
+  </div>
+);
+
+ReactDOM.createRoot(document.getElementById("root")).render(<Landing/>);
+</script>
+</body>
+</html>

docs/design_handoff/design_files/Riprap Stone-Grouped UI v0.4.4.html

@@ -0,0 +1,369 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Riprap ,  Stone-grouped UI mockup v0.4.4</title>
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500&family=IBM+Plex+Serif:wght@400;500;600&display=swap" rel="stylesheet" />
+<link rel="stylesheet" href="tokens.css" />
+<link rel="stylesheet" href="styles.css" />
+<style>
+.stone-mock-page { background: var(--paper); padding: 24px 32px 64px; }
+.stone-mock-page > .stone-mock-section + .stone-mock-section { margin-top: 32px; }
+.stone-mock-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 18px; }
+.stone-mock-head h1 { font-family: var(--font-serif); font-size: 26px; font-weight: 600; margin: 0; }
+.stone-mock-head .meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.06em; }
+
+/* Stone-grouped evidence layout */
+.stone-ev-layout-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; margin-bottom: 14px; border-bottom: 1px solid var(--rule-soft); }
+.stone-ev-layout-meta { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-tertiary); }
+
+.stone-ev-group { background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); margin-bottom: 14px; }
+.stone-ev-head { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 12px 18px; background: var(--stone-band-bg); border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
+.stone-ev-name-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.stone-ev-name { font-family: var(--font-sans); font-size: 16px; font-weight: 600; margin: 0; color: var(--ink); }
+.stone-ev-role { font-size: 13px; color: var(--ink-secondary); }
+.stone-ev-tag { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-tertiary); }
+.stone-ev-meta { display: flex; gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); }
+.stone-ev-count { font-weight: 600; color: var(--ink); }
+.stone-ev-tally { display: inline-flex; align-items: center; gap: 4px; }
+.stone-ev-rail { padding: 12px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; align-items: start; }
+.stone-ev-rail > * { min-width: 0; }
+.stone-ev-empty { padding: 16px 18px; color: var(--ink-tertiary); font-style: italic; font-size: 13px; max-width: 60ch; }
+.stone-ev-empty p { margin: 6px 0 0; line-height: 1.55; }
+
+/* Mockup-specific: kill sticky map within the long single-page v0.4.4 layout */
+.stone-mock-page .app-region-map { position: static; max-height: none; }
+
+/* Trace row primitives (used inside unified bands) */
+.trace-row { display: grid; grid-template-columns: 16px 1fr 70px 90px 70px; gap: 12px; align-items: baseline; padding: 5px 18px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
+.trace-row-group > summary { display: grid; grid-template-columns: 16px 1fr 70px 90px 70px; gap: 12px; align-items: baseline; cursor: pointer; list-style: none; }
+.trace-row-group > summary::-webkit-details-marker { display: none; }
+.trace-name { color: var(--ink); }
+.trace-status { color: var(--ink-tertiary); font-size: 11px; }
+.trace-status-err { color: var(--status-error); }
+.trace-tier { font-size: 11px; }
+.trace-ms { text-align: right; color: var(--ink); }
+.trace-row-error { background: var(--status-error-soft); }
+.trace-row-warn .trace-bullet { color: #B26500; font-weight: 700; }
+.trace-row-silent { color: var(--ink-tertiary); }
+.trace-warn-note, .trace-note, .trace-error-summary { grid-column: 2 / -1; font-size: 11px; color: var(--ink-tertiary); font-style: italic; padding-top: 2px; }
+.trace-error-summary { color: var(--status-error); font-style: normal; }
+
+/* Run-health strip */
+.run-health { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 18px; margin-bottom: 14px; background: var(--paper-deep); border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
+.run-health-item strong { color: var(--ink); font-weight: 600; }
+.run-health-sep { color: var(--ink-tertiary); }
+.run-health-silent { color: var(--ink-tertiary); }
+.run-health-warn { color: #B26500; }
+.run-health-error { color: var(--status-error); font-weight: 600; }
+
+/* Unified Stone band */
+.stone-uni { background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); margin-bottom: 14px; }
+.stone-uni-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 12px 18px; background: var(--stone-band-bg); border-bottom: 1px solid var(--rule-soft); }
+.stone-uni-head-left { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.stone-uni-name { font-family: var(--font-sans); font-size: 16px; font-weight: 600; margin: 0; color: var(--ink); }
+.stone-uni-role { font-size: 13px; color: var(--ink-secondary); }
+.stone-uni-tag { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-tertiary); }
+.stone-uni-agg { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: baseline; }
+.stone-uni-agg-cards { color: var(--ink); font-weight: 600; }
+.stone-uni-agg-num { color: var(--ink); font-weight: 600; }
+.stone-uni-agg-warn { color: #B26500; font-weight: 600; }
+.stone-uni-agg-err { color: var(--status-error); font-weight: 600; }
+.stone-uni-agg-ms { color: var(--ink); font-weight: 600; }
+.stone-uni-agg-sep { color: var(--ink-tertiary); margin: 0 2px; }
+.stone-uni-rail { padding: 12px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; align-items: start; }
+.stone-uni-rail > * { min-width: 0; }
+.stone-uni-empty { padding: 14px 18px; color: var(--ink-tertiary); font-size: 13px; max-width: 70ch; }
+.stone-uni-empty p { margin: 6px 0 0; line-height: 1.55; font-style: italic; }
+.stone-uni-trace { border-top: 1px dashed var(--rule-soft); }
+.stone-uni-trace-toggle { width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 8px 18px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.04em; }
+.stone-uni-trace-toggle:hover { background: var(--paper-deep); color: var(--ink-secondary); }
+.stone-uni-trace-caret { display: inline-block; width: 10px; }
+.stone-uni-trace-body { padding: 4px 0 8px; background: var(--paper); border-top: 1px solid var(--rule-soft); }
+
+/* ════════════════════════════════════════════════════════════════════
+   v0.4.4 · Findings region
+   ════════════════════════════════════════════════════════════════════ */
+.findings { background: var(--paper); }
+.findings-head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 12px; border-bottom: 2px solid var(--ink); margin-bottom: 18px; }
+.findings-h2 { font-family: var(--font-serif); font-size: 26px; font-weight: 600; margin: 0; }
+.findings-tagline { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.04em; }
+
+.f-runhealth { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; padding: 10px 18px; margin-bottom: 14px; background: var(--paper-deep); border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
+.f-rh-item strong { color: var(--ink); font-weight: 600; }
+.f-rh-sep { color: var(--ink-tertiary); }
+.f-rh-silent { color: var(--ink-tertiary); }
+.f-rh-warn { color: #B26500; }
+.f-rh-err { color: var(--status-error); font-weight: 600; }
+
+.f-region { background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); margin-bottom: 14px; }
+.f-region-head { display: flex; justify-content: space-between; gap: 12px; padding: 12px 18px; background: var(--stone-band-bg); border-bottom: 1px solid var(--rule-soft); align-items: baseline; flex-wrap: wrap; }
+.f-region-head-left { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
+.f-region-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.06em; }
+.f-region-name { font-family: var(--font-sans); font-size: 16px; font-weight: 600; margin: 0; color: var(--ink); }
+.f-region-role { font-size: 13px; color: var(--ink-secondary); }
+.f-region-tag { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-tertiary); }
+
+.f-tally { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: baseline; }
+.f-tally-strong { color: var(--ink); font-weight: 600; }
+.f-tally-cards { color: var(--ink); font-weight: 600; }
+.f-tally-sep { color: var(--ink-tertiary); }
+.f-tally-warn { color: #B26500; }
+.f-tally-err { color: var(--status-error); }
+.f-tally-silent { color: var(--ink-tertiary); }
+
+.f-rail { padding: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; align-items: start; }
+.f-rail > * { min-width: 0; }
+.f-rail-capstone { grid-template-columns: minmax(360px, 480px); }
+
+.f-silent { padding: 14px 18px; display: flex; flex-direction: column; gap: 6px; max-width: 70ch; }
+.f-silent-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-tertiary); align-self: flex-start; padding: 2px 6px; border: 1px solid var(--rule-soft); }
+.f-silent-prose { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-tertiary); margin: 0; line-height: 1.55; }
+
+.f-prov { border-top: 1px dashed var(--rule-soft); }
+.f-prov-toggle { width: 100%; display: flex; align-items: baseline; gap: 8px; padding: 8px 18px; background: transparent; border: none; cursor: pointer; text-align: left; font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.04em; }
+.f-prov-toggle:hover { background: var(--paper-deep); color: var(--ink-secondary); }
+.f-prov-caret { display: inline-block; width: 10px; }
+.f-prov-meta { color: var(--ink-tertiary); }
+.f-prov-body { padding: 4px 0 8px; background: var(--paper); border-top: 1px solid var(--rule-soft); }
+
+/* ─── Card frame ─── */
+.fc { border: 1px solid var(--rule-soft); background: var(--paper); padding: 12px 14px 10px; display: flex; flex-direction: column; gap: 8px; position: relative; border-top: 2px solid var(--ink); transition: border-color 120ms, box-shadow 120ms; cursor: pointer; }
+.fc-tier-empirical { border-top-color: var(--tier-empirical); }
+.fc-tier-modeled   { border-top-color: var(--tier-modeled); }
+.fc-tier-proxy     { border-top-color: var(--tier-proxy); }
+.fc-tier-synthetic { border-top-color: var(--tier-synthetic); border-top-style: dashed; }
+.fc:hover, .fc.is-linked { box-shadow: 0 1px 0 var(--ink), 0 0 0 1px var(--ink); }
+.fc.is-compact { padding: 8px 12px 8px; gap: 6px; }
+
+.fc-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
+.fc-head-source { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--ink); }
+.fc-head-source-label { letter-spacing: 0.01em; }
+.fc-head-vintage { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-tertiary); letter-spacing: 0.02em; }
+
+.fc-title { font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--ink); text-wrap: pretty; }
+.fc.is-compact .fc-title { font-size: 13px; }
+
+.fc-body { display: flex; flex-direction: column; gap: 6px; padding: 2px 0; }
+.fc-body-prose { font-size: 12px; line-height: 1.5; color: var(--ink-secondary); margin: 4px 0 0; }
+.fc-body-sub { font-size: 11px; line-height: 1.5; color: var(--ink-tertiary); font-style: italic; }
+.fc.is-compact .fc-body-prose, .fc.is-compact .fc-body-sub { font-size: 11px; }
+
+.fc-headline { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
+.fc.is-compact .fc-headline { font-size: 19px; }
+.fc-subhead { font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); letter-spacing: 0.02em; }
+
+.fc-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
+.fc-table th, .fc-table td { text-align: left; padding: 3px 6px; border-bottom: 1px solid var(--rule-soft); }
+.fc-table th { color: var(--ink-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; }
+
+.fc-body-scalars .fc-scalars-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0; }
+.fc-scalar-cell { display: flex; flex-direction: column; gap: 2px; padding: 6px 4px; background: var(--paper-deep); border: 1px solid var(--rule-soft); }
+.fc-scalar-value { font-family: var(--font-serif); font-size: 18px; font-weight: 600; line-height: 1.05; }
+.fc-scalar-label { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-tertiary); letter-spacing: 0.04em; }
+
+.fc-raster-frame { position: relative; border: 1px solid var(--rule-soft); }
+.fc-illustrative { position: absolute; top: 4px; right: 4px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); background: rgba(26,26,26,0.7); padding: 1px 5px; }
+.fc-raster-headline { font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); }
+.fc-raster-headline span { font-family: var(--font-serif); font-size: 14px; font-weight: 600; }
+
+.fc-body-timeseries { gap: 4px; }
+.fc-ts-header { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
+.fc-spatial-note { display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); padding: 1px 5px; margin-right: 6px; vertical-align: middle; }
+
+/* Register composite, dense row layout (v0.4.4 follow-up: cut card height) */
+.fc-body-register .fc-reg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; border: 1px solid var(--rule-soft); }
+.fc-reg-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 6px 10px; align-items: baseline; padding: 3px 8px; border-bottom: 1px solid var(--rule-soft); font-size: 12px; line-height: 1.35; }
+.fc-reg-row:last-child { border-bottom: none; }
+.fc-reg-row.is-silent { grid-template-columns: 44px minmax(0, 1fr); color: var(--ink-tertiary); font-style: italic; background: var(--paper-deep); padding: 2px 8px; }
+.fc-reg-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--ink-tertiary); align-self: center; }
+.fc-reg-label { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.fc-reg-detail { display: none; }
+.fc-reg-tier { display: inline-flex; align-self: center; }
+.fc-reg-source { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink-tertiary); align-self: center; white-space: nowrap; }
+.fc-reg-silent { font-family: var(--font-serif); font-size: 11.5px; color: var(--ink-tertiary); }
+.fc.is-compact .fc-reg-row { padding: 2px 8px; font-size: 11.5px; }
+.fc.is-compact .fc-reg-label { font-size: 11.5px; }
+
+/* Comparison */
+.fc-body-comparison .fc-cmp-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: stretch; padding: 4px 0; }
+.fc-cmp-cell { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: var(--paper-deep); border: 1px solid var(--rule-soft); }
+.fc-cmp-cell-tier { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); letter-spacing: 0.04em; }
+.fc-cmp-cell-label { color: var(--ink-secondary); }
+.fc-cmp-cell-value { font-family: var(--font-serif); font-size: 22px; font-weight: 600; line-height: 1.05; }
+.fc-cmp-cell-aux { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); }
+.fc-cmp-divider { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-tertiary); align-self: center; padding: 0 4px; }
+.fc-cmp-delta { font-family: var(--font-mono); font-size: 11px; color: var(--accent); padding: 4px 0; border-top: 1px dashed var(--rule-soft); border-bottom: 1px dashed var(--rule-soft); margin: 4px 0; }
+
+/* Meta */
+.fc-body-meta .fc-meta-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; margin: 0; }
+.fc-meta-row { display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; background: var(--paper-deep); border-left: 2px solid var(--rule-soft); }
+.fc-meta-row dt { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); margin: 0; }
+.fc-meta-row dd { font-family: var(--font-sans); font-size: 13px; font-weight: 500; color: var(--ink); margin: 0; }
+
+/* Card foot */
+.fc-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 6px; margin-top: auto; border-top: 1px solid var(--rule-soft); }
+.fc-foot-cite { background: transparent; border: 0; padding: 2px 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; color: var(--ink-secondary); }
+.fc-foot-cite:hover { color: var(--accent); }
+.fc-foot-docid { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; }
+.fc-foot-docid-mute { color: var(--ink-tertiary); }
+.fc-foot-arrow { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+
+.fc-tier-badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; padding: 2px 5px; border: 1px solid var(--rule-soft); color: var(--ink-secondary); background: var(--paper); }
+.fc-tier-badge-empirical { border-color: var(--tier-empirical); color: var(--tier-empirical); }
+.fc-tier-badge-modeled { border-color: var(--tier-modeled); color: var(--tier-modeled); }
+.fc-tier-badge-proxy { border-color: var(--tier-proxy); color: var(--tier-proxy); }
+.fc-tier-badge-synthetic { border-color: var(--tier-synthetic); color: var(--tier-synthetic); border-style: dashed; }
+
+/* Map highlight on hover-link */
+.map-frame.is-link-floodnet::after,
+.map-frame.is-link-fema-ae::after,
+.map-frame.is-link-hwm::after,
+.map-frame.is-link-stormwater::after,
+.map-frame.is-link-prithvi::after,
+.map-frame.is-link-buildings::after,
+.map-frame.is-link-complaints::after,
+.map-frame.is-link-registers::after {
+  content: attr(data-link-label); position: absolute; bottom: 8px; right: 8px;
+  background: var(--ink); color: var(--paper); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
+  padding: 4px 8px; pointer-events: none; z-index: 5;
+}
+.map-frame.is-linked { outline: 2px solid var(--accent-graphical); outline-offset: -2px; }
+
+</style>
+</head>
+<body>
+<template id="__bundler_thumbnail">
+<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+  <rect width="100" height="100" fill="#FAFAF7"/>
+  <g transform="translate(20 28)">
+    <rect x="0" y="0" width="60" height="9" fill="#0B5394"/>
+    <rect x="0" y="13" width="48" height="9" fill="#2A6FA8"/>
+    <rect x="0" y="26" width="38" height="9" fill="#6B6B6B"/>
+    <rect x="0" y="39" width="52" height="9" fill="#D17C00"/>
+  </g>
+</svg>
+</template>
+<div id="root"></div>
+
+<script src="https://unpkg.com/react@18.3.1/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/react-dom@18.3.1/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
+<script src="https://unpkg.com/@babel/standalone@7.29.0/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
+
+<script type="text/babel" src="tweaks-panel.jsx"></script>
+<script type="text/babel" src="glyphs.jsx"></script>
+<script type="text/babel" src="briefing.jsx"></script>
+<script type="text/babel" src="map.jsx"></script>
+<script type="text/babel" src="trace.jsx"></script>
+<script type="text/babel" src="evidence.jsx"></script>
+<script type="text/babel" src="shell.jsx"></script>
+<script type="text/babel" src="stones-trace.jsx"></script>
+<script type="text/babel" src="stone-evidence.jsx"></script>
+<script type="text/babel" src="findings.jsx"></script>
+<script type="text/babel">
+const { useState: useM } = React;
+
+const V44_DEFAULTS = /*EDITMODE-BEGIN*/{
+  "density": "comfortable",
+  "provenance": "smart",
+  "query": "redhook",
+  "showComparison": false,
+  "showGrammar": true
+}/*EDITMODE-END*/;
+
+function StoneMock() {
+  const [activeCite, setActiveCite] = useM(null);
+  const [linkedKey, setLinkedKey] = useM(null);
+  const [tweaks, setTweak] = window.useTweaks(V44_DEFAULTS);
+  const handleCite = (id) => setActiveCite(id);
+  const handleHover = (key) => setLinkedKey(key);
+  /* Reflect linkedKey into map-frame data attribute */
+  React.useEffect(() => {
+    const frame = document.querySelector(".stone-mock-page .map-frame");
+    if (!frame) return;
+    /* clear */
+    ["floodnet","fema-ae","hwm","stormwater","prithvi","buildings","complaints","registers"].forEach(k => frame.classList.remove("is-link-" + k));
+    frame.classList.toggle("is-linked", !!linkedKey);
+    if (linkedKey) {
+      frame.classList.add("is-link-" + linkedKey);
+      const labels = { floodnet: "FloodNet sensor", "fema-ae": "FEMA Zone AE", hwm: "USGS HWM points", stormwater: "DEP stormwater", prithvi: "Prithvi flood pred.", buildings: "TerraMind buildings", complaints: "311 complaints", registers: "Asset registers" };
+      frame.dataset.linkLabel = labels[linkedKey] || linkedKey;
+    }
+  }, [linkedKey]);
+
+  return (
+    <div className="riprap-root stone-mock-page">
+      <window.AppHeader query={"80 Pioneer Street, Red Hook, Brooklyn"} onResetCold={() => {}} onOpenMethodology={() => {}}/>
+
+      {/* §1 · Briefing + map */}
+      <section className="stone-mock-section" data-screen-label="01 · Briefing + map">
+        <div className="stone-mock-head">
+          <h1>Riprap Flood Exposure Briefing ,  80 Pioneer Street</h1>
+          <span className="meta">v0.4.4 · Stone-grouped UI mockup</span>
+        </div>
+        <div className="app-shell app-shell-desktop">
+          <main id="region-briefing" className="app-region app-region-brief">
+            <header className="region-head"><span className="section-label">Briefing</span></header>
+            <h1 className="brief-h1">
+              <span className="brief-h1-eyebrow">Riprap Flood Exposure Briefing</span>
+              <span className="brief-h1-addr">80 Pioneer Street</span>
+              <span className="brief-h1-meta">
+                <span className="brief-h1-meta-row"><span className="brief-h1-meta-key">borough</span><span className="brief-h1-meta-val">Brooklyn · CB6</span></span>
+                <span className="brief-h1-meta-row"><span className="brief-h1-meta-key">tract</span><span className="brief-h1-meta-val">36047008500</span></span>
+                <span className="brief-h1-meta-row"><span className="brief-h1-meta-key">generated</span><span className="brief-h1-meta-val">2026-05-05 14:22 ET</span></span>
+              </span>
+            </h1>
+            <window.StreamingBriefing onCite={handleCite} replayKey={0}/>
+          </main>
+          <aside className="app-region app-region-map" aria-label="Map">
+            <header className="region-head">
+              <span className="section-label">Map</span>
+              <span className="region-head-meta">Carto Positron · z16</span>
+            </header>
+            <div className="map-frame">
+              <window.RedHookMapMock activeLayers={{ empirical: true, modeled: true, synthetic: true, proxy: true }} queriedAddress="80 Pioneer Street"/>
+              <window.MapLegend activeLayers={{ empirical: true, modeled: true, synthetic: true, proxy: true }} onToggle={() => {}}/>
+            </div>
+          </aside>
+          <aside className="app-region app-region-cites" aria-label="Citations">
+            <window.CitationDrawer activeId={activeCite}/>
+          </aside>
+        </div>
+      </section>
+
+      {/* §2 �� Findings region · v0.4.4 */}
+      <section className="stone-mock-section" data-screen-label="02 Findings">
+        <window.FindingsRegion
+          density={tweaks.density}
+          provenanceMode={tweaks.provenance}
+          queryKey={tweaks.query}
+          showComparison={tweaks.showComparison}
+          showGrammar={tweaks.showGrammar}
+          onCite={handleCite}
+          onHover={handleHover}
+          linkedKey={linkedKey}
+        />
+      </section>
+
+      {/* Tweaks panel */}
+      <window.TweaksPanel title="Tweaks">
+        <window.TweakSection label="Display"/>
+        <window.TweakRadio label="Density" value={tweaks.density} onChange={(v) => setTweak("density", v)} options={["comfortable", "compact"]}/>
+        <window.TweakSelect label="Query" value={tweaks.query} onChange={(v) => setTweak("query", v)} options={["redhook", "bronx"]}/>
+        <window.TweakSection label="Provenance"/>
+        <window.TweakSelect label="Default" value={tweaks.provenance} onChange={(v) => setTweak("provenance", v)} options={["smart", "expanded", "collapsed"]}/>
+        <window.TweakSection label="Card grammar"/>
+        <window.TweakToggle label="Show grammar reference" value={tweaks.showGrammar} onChange={(v) => setTweak("showGrammar", v)}/>
+        <window.TweakToggle label="Show comparison card" value={tweaks.showComparison} onChange={(v) => setTweak("showComparison", v)}/>
+      </window.TweaksPanel>
+    </div>
+  );
+}
+
+ReactDOM.createRoot(document.getElementById("root")).render(<StoneMock/>);
+</script>
+</body>
+</html>

docs/design_handoff/design_files/briefing.jsx

@@ -0,0 +1,312 @@
+/* Briefing prose with epistemic-tier glyph margin.
+   Each <Claim tier=... cite=...> renders the glyph in the left margin
+   and a hoverable superscript citation that scrolls the citation drawer.
+*/
+
+const { useState, useRef, useEffect, useMemo } = React;
+
+/* ── Citation registry for the sample briefing ───────────────────── */
+const CITATIONS = {
+  c1: {
+    n: 1,
+    tier: "empirical",
+    source: "USGS",
+    title: "Hurricane Sandy storm tide elevations, NY-NJ Harbor",
+    docId: "USGS-OFR-2013-1234",
+    url: "https://pubs.usgs.gov/of/2013/1234/",
+    vintage: "2013-05",
+    retrieved: "2026-04-28",
+  },
+  c2: {
+    n: 2,
+    tier: "empirical",
+    source: "NYC OEM",
+    title: "Hurricane Sandy Inundation Zone (2012)",
+    docId: "NYCOEM-SIZ-2013",
+    url: "https://data.cityofnewyork.us/dataset/sandy-inundation-zone",
+    vintage: "2013-01",
+    retrieved: "2026-04-28",
+  },
+  c3: {
+    n: 3,
+    tier: "empirical",
+    source: "FloodNet NYC",
+    title: "Sensor BK-RH-002 ,  Coffey Park, monthly exceedance",
+    docId: "FN-BK-RH-002",
+    url: "https://floodnet.nyc/sensor/BK-RH-002",
+    vintage: "2026-04",
+    retrieved: "2026-05-02",
+  },
+  c4: {
+    n: 4,
+    tier: "modeled",
+    source: "FEMA",
+    title: "Preliminary Flood Insurance Rate Map, panel 36047C0207G",
+    docId: "FEMA-FIRM-36047C0207G",
+    url: "https://msc.fema.gov/portal/search",
+    vintage: "2024-09",
+    retrieved: "2026-04-28",
+  },
+  c5: {
+    n: 5,
+    tier: "modeled",
+    source: "NYC DEP",
+    title: "Stormwater Flood Map ,  Moderate Stormwater Scenario",
+    docId: "NYCDEP-SWFM-2024",
+    url: "https://nyc.gov/stormwater-map",
+    vintage: "2024-06",
+    retrieved: "2026-04-28",
+  },
+  c6: {
+    n: 6,
+    tier: "modeled",
+    source: "NPCC4",
+    title: "Sea-level rise projections, 2050 90th percentile",
+    docId: "NPCC4-Ch3-Tbl3.2",
+    url: "https://nyas.org/npcc4",
+    vintage: "2024-03",
+    retrieved: "2026-04-28",
+  },
+  c7: {
+    n: 7,
+    tier: "proxy",
+    source: "NYC 311",
+    title: "Flooding service requests, BK CB6 2019–2025",
+    docId: "NYC311-FLD-CB6",
+    url: "https://data.cityofnewyork.us/311",
+    vintage: "2025-12",
+    retrieved: "2026-05-01",
+  },
+  c8: {
+    n: 8,
+    tier: "proxy",
+    source: "FEMA NFIP",
+    title: "National Flood Insurance Program claims, tract 36047008500",
+    docId: "NFIP-T36047008500",
+    url: "https://www.fema.gov/openfema",
+    vintage: "2024-12",
+    retrieved: "2026-04-28",
+  },
+  c9: {
+    n: 9,
+    tier: "synthetic",
+    source: "TerraMind v1.2",
+    title: "Synthetic SAR backscatter for 2025-09-14 (Sentinel-1 cloud-occluded)",
+    docId: "RIPRAP-SYN-20250914",
+    url: "#methodology-synthetic",
+    vintage: "2025-09",
+    retrieved: "2026-05-02",
+  },
+  c10: {
+    n: 10,
+    tier: "modeled",
+    source: "NYC DCP",
+    title: "Waterfront Revitalization Program ,  Coastal Risk Area",
+    docId: "NYCDCP-WRP-2022",
+    url: "https://nyc.gov/dcp/wrp",
+    vintage: "2022-11",
+    retrieved: "2026-04-28",
+  },
+};
+
+const Cite = ({ id, onActivate }) => {
+  const c = CITATIONS[id];
+  if (!c) return null;
+  return (
+    <a
+      href={`#cite-${id}`}
+      className="inline-cite"
+      data-cite={id}
+      onClick={(e) => {
+        e.preventDefault();
+        onActivate?.(id);
+      }}
+      aria-label={`Citation ${c.n}: ${c.source}, ${c.title}`}
+    >
+      <sup>[{c.n}]</sup>
+    </a>
+  );
+};
+
+const Claim = ({ tier, children }) => (
+  <span className={`claim claim-${tier}`} data-tier={tier}>
+    <span className="claim-glyph" aria-hidden="false">
+      <TierGlyph tier={tier} size={11} color={`var(--tier-${tier})`} />
+    </span>
+    <span className="claim-body">{children}</span>
+  </span>
+);
+
+const SectionHead = ({ n, label, tier, children }) => (
+  <h3 className="briefing-section-head">
+    <span className="briefing-section-num">{n}</span>
+    <span className="briefing-section-label">{label}</span>
+    {tier && (
+      <span className="briefing-section-tier">
+        <TierBadge tier={tier} compact />
+      </span>
+    )}
+    {children && <span className="briefing-section-title">{children}</span>}
+  </h3>
+);
+
+/* ── Sample briefing: 80 Pioneer St, Red Hook, Brooklyn ─────────── */
+const BRIEFING_BLOCKS = [
+  { kind: "status", html: `
+    <p class="briefing-deck">
+      <strong>80 Pioneer Street, Red Hook, Brooklyn 11231.</strong>
+      Block 597, Lot 30. Industrial Business Zone (IBZ-RH).
+      Queried 2026-05-05 14:22 ET. <span class="briefing-meta">Briefing v0.4.4 · 5 Stones engaged · Keystone silent (no register joins matched)</span>
+    </p>
+  ` },
+
+  { kind: "head", n: "01", label: "Status", title: "Coastal-edge, post-Sandy, multi-hazard" },
+  { kind: "prose", parts: [
+    { tier: "empirical", text: "The address sits 380 ft inland of the Erie Basin bulkhead, at a ground elevation of 6.2 ft NAVD88", cite: "c1" },
+    { text: " ,  within the " },
+    { tier: "empirical", text: "2012 Sandy Inundation Zone, which recorded a peak storm tide of 11.4 ft NAVD88 at the Battery", cite: "c2" },
+    { text: " 2.4 mi to the northwest. " },
+    { tier: "modeled", text: "FEMA's preliminary FIRM places the parcel in Zone AE (BFE 11 ft NAVD88)", cite: "c4" },
+    { text: ", a 4.8 ft freeboard above current grade. The site is upgradient of two FloodNet sensors and three blocks from a chronic 311 cluster." },
+  ]},
+
+  { kind: "head", n: "02", label: "Empirical evidence", tier: "empirical" },
+  { kind: "prose", parts: [
+    { tier: "empirical", text: "FloodNet sensor BK-RH-002 (Coffey Park, 1,200 ft south) recorded 7 above-curb events between 2024-06 and 2026-04", cite: "c3" },
+    { text: ", with a peak depth of 14.3 cm during the 2025-09-29 nor'easter. " },
+    { tier: "empirical", text: "USGS post-Sandy high-water marks within 500 ft cluster between 6.8 and 8.1 ft NAVD88", cite: "c1" },
+    { text: ", consistent with 0.6–1.9 ft of standing water at the queried address during the storm." },
+  ]},
+
+  { kind: "head", n: "03", label: "Modeled scenarios", tier: "modeled" },
+  { kind: "prose", parts: [
+    { tier: "modeled", text: "DEP's Moderate Stormwater Scenario (2.13 in/hr design storm) shows ponding ≥4 in across the western half of the lot", cite: "c5" },
+    { text: ", routed by the 1.2% slope toward Imlay St. " },
+    { tier: "modeled", text: "Under NPCC4's 2050 90th-percentile sea-level rise (30 in)", cite: "c6" },
+    { text: ", the parcel falls within the projected daily-tidal floodplain by mid-century. " },
+    { tier: "synthetic", text: "Synthetic SAR backscatter for 2025-09-14 (Sentinel-1 cloud-occluded) was generated by TerraMind v1.2 and is presented as a prior, not an observation", cite: "c9" },
+    { text: "; treat with appropriate caution." },
+  ]},
+
+  { kind: "head", n: "04", label: "Policy context" },
+  { kind: "prose", parts: [
+    { tier: "proxy", text: "311 flood complaints within the surrounding census tract total 89 calls over 2019–2025, with seasonal clustering in Aug–Oct", cite: "c7" },
+    { text: ". " },
+    { tier: "proxy", text: "NFIP claims aggregated to tract 36047008500 total $4.1M across 47 paid losses since 2000", cite: "c8" },
+    { text: ". " },
+    { tier: "modeled", text: "The site lies within the NYC Waterfront Revitalization Program Coastal Risk Area; CEQR §817 review applies to any discretionary action", cite: "c10" },
+    { text: "." },
+  ]},
+];
+
+/* ── Streaming renderer ───────────────────────────────────────────
+   Uses CSS reveal (token-by-token via animation-delay) instead of
+   recomputing innerText, to avoid layout shift.
+*/
+const StreamingBriefing = ({ onCite, replayKey }) => {
+  const [visibleCount, setVisibleCount] = useState(0);
+  const totalBlocks = BRIEFING_BLOCKS.length;
+
+  useEffect(() => {
+    setVisibleCount(0);
+    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (reduce) {
+      setVisibleCount(totalBlocks);
+      return;
+    }
+    let i = 0;
+    const tick = () => {
+      i++;
+      setVisibleCount(i);
+      if (i < totalBlocks) {
+        setTimeout(tick, i < 2 ? 280 : 420);
+      }
+    };
+    const t = setTimeout(tick, 240);
+    return () => clearTimeout(t);
+  }, [replayKey]);
+
+  return (
+    <div
+      className="briefing-prose"
+      role="log"
+      aria-live="polite"
+      aria-atomic="false"
+      aria-label="Streaming flood-exposure briefing"
+    >
+      {BRIEFING_BLOCKS.slice(0, visibleCount).map((b, i) => {
+        if (b.kind === "status") {
+          return <div key={i} className="briefing-status" dangerouslySetInnerHTML={{ __html: b.html }} />;
+        }
+        if (b.kind === "head") {
+          return <SectionHead key={i} n={b.n} label={b.label} tier={b.tier}>{b.title}</SectionHead>;
+        }
+        if (b.kind === "prose") {
+          return (
+            <p key={i} className="briefing-para">
+              {b.parts.map((p, j) => {
+                if (p.tier) {
+                  return (
+                    <React.Fragment key={j}>
+                      <Claim tier={p.tier}>{p.text}</Claim>
+                      {p.cite && <Cite id={p.cite} onActivate={onCite} />}
+                    </React.Fragment>
+                  );
+                }
+                return <span key={j}>{p.text}</span>;
+              })}
+            </p>
+          );
+        }
+        return null;
+      })}
+      {visibleCount < totalBlocks && (
+        <span className="streaming-caret" aria-hidden="true">▍</span>
+      )}
+    </div>
+  );
+};
+
+const CitationDrawer = ({ activeId, onClose }) => {
+  const items = Object.entries(CITATIONS);
+  return (
+    <aside className="citation-drawer" aria-label="Citations">
+      <div className="citation-drawer-head">
+        <span className="section-label">Citations · {items.length}</span>
+        <span className="citation-drawer-meta">live · primary sources</span>
+      </div>
+      <ol className="citation-list">
+        {items.map(([id, c]) => (
+          <li
+            key={id}
+            id={`cite-${id}`}
+            className={`citation-item ${activeId === id ? "is-active" : ""}`}
+          >
+            <span className="citation-num">[{c.n}]</span>
+            <div className="citation-body">
+              <div className="citation-line-1">
+                <TierGlyph tier={c.tier} size={10} color={`var(--tier-${c.tier})`} />
+                <span className="citation-source">{c.source}</span>
+                <span className="citation-vintage">v. {c.vintage}</span>
+              </div>
+              <div className="citation-title">{c.title}</div>
+              <div className="citation-meta">
+                <span className="citation-docid">{c.docId}</span>
+                <span className="citation-retrieved">retr. {c.retrieved}</span>
+              </div>
+            </div>
+          </li>
+        ))}
+      </ol>
+      <div className="citation-drawer-foot">
+        <span className="section-label">Trust signals</span>
+        <p className="citation-foot-copy">
+          All foundation models Apache-2.0. All data from public-record federal,
+          state, and city sources. No commercial APIs contacted at runtime.
+        </p>
+      </div>
+    </aside>
+  );
+};
+
+Object.assign(window, { StreamingBriefing, CitationDrawer, CITATIONS, Cite, Claim });

docs/design_handoff/design_files/design-canvas.jsx

@@ -0,0 +1,936 @@
+
+// DesignCanvas.jsx — Figma-ish design canvas wrapper
+// Warm gray grid bg + Sections + Artboards + PostIt notes.
+// Artboards are reorderable (grip-drag), deletable, labels/titles are
+// inline-editable, and any artboard can be opened in a fullscreen focus
+// overlay (←/→/Esc). State persists to a .design-canvas.state.json sidecar
+// via the host bridge. No assets, no deps.
+//
+// Usage:
+//   <DesignCanvas>
+//     <DCSection id="onboarding" title="Onboarding" subtitle="First-run variants">
+//       <DCArtboard id="a" label="A · Dusk" width={260} height={480}>…</DCArtboard>
+//       <DCArtboard id="b" label="B · Minimal" width={260} height={480}>…</DCArtboard>
+//     </DCSection>
+//   </DesignCanvas>
+
+const DC = {
+  bg: '#f0eee9',
+  grid: 'rgba(0,0,0,0.06)',
+  label: 'rgba(60,50,40,0.7)',
+  title: 'rgba(40,30,20,0.85)',
+  subtitle: 'rgba(60,50,40,0.6)',
+  postitBg: '#fef4a8',
+  postitText: '#5a4a2a',
+  font: '-apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif',
+};
+
+// One-time CSS injection (classes are dc-prefixed so they don't collide with
+// the hosted design's own styles).
+if (typeof document !== 'undefined' && !document.getElementById('dc-styles')) {
+  const s = document.createElement('style');
+  s.id = 'dc-styles';
+  s.textContent = [
+    '.dc-editable{cursor:text;outline:none;white-space:nowrap;border-radius:3px;padding:0 2px;margin:0 -2px}',
+    '.dc-editable:focus{background:#fff;box-shadow:0 0 0 1.5px #c96442}',
+    '[data-dc-slot]{transition:transform .18s cubic-bezier(.2,.7,.3,1)}',
+    '[data-dc-slot].dc-dragging{transition:none;z-index:10;pointer-events:none}',
+    '[data-dc-slot].dc-dragging .dc-card{box-shadow:0 12px 40px rgba(0,0,0,.25),0 0 0 2px #c96442;transform:scale(1.02)}',
+    // isolation:isolate contains artboard content's z-indexes so a
+    // z-indexed child (sticky navbar etc.) can't paint over .dc-header or
+    // the .dc-menu popover that drops into the top of the card.
+    '.dc-card{isolation:isolate;transition:box-shadow .15s,transform .15s}',
+    '.dc-card *{scrollbar-width:none}',
+    '.dc-card *::-webkit-scrollbar{display:none}',
+    // Per-artboard header: grip + label on the left, delete/expand on the
+    // right. Single flex row; when the artboard's on-screen width is too
+    // narrow for both the label yields (ellipsis, then hidden entirely below
+    // ~4ch via the container query) and the buttons stay on the row.
+    '.dc-header{position:absolute;bottom:100%;left:-4px;margin-bottom:calc(4px * var(--dc-inv-zoom,1));z-index:2;',
+    '  display:flex;align-items:center;container-type:inline-size}',
+    '.dc-labelrow{display:flex;align-items:center;gap:4px;height:24px;flex:1 1 auto;min-width:0}',
+    '.dc-grip{flex:0 0 auto;cursor:grab;display:flex;align-items:center;padding:5px 4px;border-radius:4px;transition:background .12s,opacity .12s}',
+    '.dc-grip:hover{background:rgba(0,0,0,.08)}',
+    '.dc-grip:active{cursor:grabbing}',
+    '.dc-labeltext{flex:1 1 auto;min-width:0;cursor:pointer;border-radius:4px;padding:3px 6px;',
+    '  display:flex;align-items:center;transition:background .12s;overflow:hidden}',
+    // Below ~4ch of label room: hide the label entirely, and drop the grip to
+    // hover-only (same reveal rule as .dc-btns) so a narrow header is clean
+    // until the card is moused.
+    '@container (max-width: 110px){',
+    '  .dc-labeltext{display:none}',
+    '  .dc-grip{opacity:0}',
+    '  [data-dc-slot]:hover .dc-grip{opacity:1}',
+    '}',
+    '.dc-labeltext:hover{background:rgba(0,0,0,.05)}',
+    '.dc-labeltext .dc-editable{overflow:hidden;text-overflow:ellipsis;max-width:100%}',
+    '.dc-labeltext .dc-editable:focus{overflow:visible;text-overflow:clip}',
+    '.dc-btns{flex:0 0 auto;margin-left:auto;display:flex;gap:2px;opacity:0;transition:opacity .12s}',
+    '[data-dc-slot]:hover .dc-btns,.dc-btns:has(.dc-menu){opacity:1}',
+    '.dc-expand,.dc-kebab{width:22px;height:22px;border-radius:5px;border:none;cursor:pointer;padding:0;',
+    '  background:transparent;color:rgba(60,50,40,.7);display:flex;align-items:center;justify-content:center;',
+    '  font:inherit;transition:background .12s,color .12s}',
+    '.dc-expand:hover,.dc-kebab:hover{background:rgba(0,0,0,.06);color:#2a251f}',
+    // Slot hosting an open menu floats above later siblings (which otherwise
+    // paint on top — same z-index:auto, later DOM order) so the popup isn't
+    // clipped by the next card.
+    '[data-dc-slot]:has(.dc-menu){z-index:10}',
+    '.dc-menu{position:absolute;top:100%;right:0;margin-top:4px;background:#fff;border-radius:8px;',
+    '  box-shadow:0 8px 28px rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.05);padding:4px;min-width:160px;z-index:10}',
+    '.dc-menu button{display:block;width:100%;padding:7px 10px;border:0;background:transparent;',
+    '  border-radius:5px;font-family:inherit;font-size:13px;font-weight:500;line-height:1.2;',
+    '  color:#29261b;cursor:pointer;text-align:left;transition:background .12s;white-space:nowrap}',
+    '.dc-menu button:hover{background:rgba(0,0,0,.05)}',
+    '.dc-menu hr{border:0;border-top:1px solid rgba(0,0,0,.08);margin:4px 2px}',
+    '.dc-menu .dc-danger{color:#c96442}',
+    '.dc-menu .dc-danger:hover{background:rgba(201,100,66,.1)}',
+    // Chrome (titles / labels / buttons) counter-scales against the viewport
+    // zoom so it stays a constant on-screen size. --dc-inv-zoom is set by
+    // DCViewport on every transform update and inherits to all descendants —
+    // any overlay inside the world (e.g. a TweaksPanel on an artboard) can use
+    // it the same way.
+    //
+    // The header uses transform:scale (out-of-flow, so layout impact doesn't
+    // matter) with its world-space width set to card-width / inv-zoom so that
+    // after counter-scaling its on-screen width exactly matches the card's —
+    // that's what lets the container query + text-overflow behave against the
+    // card's visible edge at every zoom level.
+    //
+    // The section head uses CSS zoom instead of transform so its layout box
+    // grows with the counter-scale, pushing the card row down — otherwise the
+    // constant-screen-size title would overflow into the (shrinking) world-
+    // space gap and overlap the artboard headers at low zoom.
+    '.dc-header{width:calc((100% + 4px) / var(--dc-inv-zoom,1));',
+    '  transform:scale(var(--dc-inv-zoom,1));transform-origin:bottom left}',
+    '.dc-sectionhead{zoom:var(--dc-inv-zoom,1)}',
+  ].join('\n');
+  document.head.appendChild(s);
+}
+
+const DCCtx = React.createContext(null);
+
+// ─────────────────────────────────────────────────────────────
+// DesignCanvas — stateful wrapper around the pan/zoom viewport.
+// Owns runtime state (per-section order, renamed titles/labels, hidden
+// artboards, focused artboard). Order/titles/labels/hidden persist to a
+// .design-canvas.state.json
+// sidecar next to the HTML. Reads go via plain fetch() so the saved
+// arrangement is visible anywhere the HTML + sidecar are served together
+// (omelette preview, direct link, downloaded zip). Writes go through the
+// host's window.omelette bridge — editing requires the omelette runtime.
+// Focus is ephemeral.
+// ─────────────────────────────────────────────────────────────
+const DC_STATE_FILE = '.design-canvas.state.json';
+
+function DesignCanvas({ children, minScale, maxScale, style }) {
+  const [state, setState] = React.useState({ sections: {}, focus: null });
+  // Hold rendering until the sidecar read settles so the saved order/titles
+  // appear on first paint (no source-order flash). didRead gates writes until
+  // the read settles so the empty initial state can't clobber a slow read;
+  // skipNextWrite suppresses the one echo-write that would otherwise follow
+  // hydration.
+  const [ready, setReady] = React.useState(false);
+  const didRead = React.useRef(false);
+  const skipNextWrite = React.useRef(false);
+
+  React.useEffect(() => {
+    let off = false;
+    fetch('./' + DC_STATE_FILE)
+      .then((r) => (r.ok ? r.json() : null))
+      .then((saved) => {
+        if (off || !saved || !saved.sections) return;
+        skipNextWrite.current = true;
+        setState((s) => ({ ...s, sections: saved.sections }));
+      })
+      .catch(() => {})
+      .finally(() => { didRead.current = true; if (!off) setReady(true); });
+    const t = setTimeout(() => { if (!off) setReady(true); }, 150);
+    return () => { off = true; clearTimeout(t); };
+  }, []);
+
+  React.useEffect(() => {
+    if (!didRead.current) return;
+    if (skipNextWrite.current) { skipNextWrite.current = false; return; }
+    const t = setTimeout(() => {
+      window.omelette?.writeFile(DC_STATE_FILE, JSON.stringify({ sections: state.sections })).catch(() => {});
+    }, 250);
+    return () => clearTimeout(t);
+  }, [state.sections]);
+
+  // Build registries synchronously from children so FocusOverlay can read
+  // them in the same render. Only direct DCSection > DCArtboard children are
+  // walked — wrapping them in other elements opts out of focus/reorder.
+  const registry = {};     // slotId -> { sectionId, artboard }
+  const sectionMeta = {};  // sectionId -> { title, subtitle, slotIds[] }
+  const sectionOrder = [];
+  React.Children.forEach(children, (sec) => {
+    if (!sec || sec.type !== DCSection) return;
+    const sid = sec.props.id ?? sec.props.title;
+    if (!sid) return;
+    sectionOrder.push(sid);
+    const persisted = state.sections[sid] || {};
+    const abs = [];
+    React.Children.forEach(sec.props.children, (ab) => {
+      if (!ab || ab.type !== DCArtboard) return;
+      const aid = ab.props.id ?? ab.props.label;
+      if (aid) abs.push([aid, ab]);
+    });
+    // hidden is scoped to one source revision — when the agent regenerates
+    // (artboard-ID set changes), prior deletes don't apply to new content.
+    const srcKey = abs.map(([k]) => k).join('\x1f');
+    const hidden = persisted.srcKey === srcKey ? (persisted.hidden || []) : [];
+    const srcIds = [];
+    abs.forEach(([aid, ab]) => {
+      if (hidden.includes(aid)) return;
+      registry[`${sid}/${aid}`] = { sectionId: sid, artboard: ab };
+      srcIds.push(aid);
+    });
+    const kept = (persisted.order || []).filter((k) => srcIds.includes(k));
+    sectionMeta[sid] = {
+      title: persisted.title ?? sec.props.title,
+      subtitle: sec.props.subtitle,
+      slotIds: [...kept, ...srcIds.filter((k) => !kept.includes(k))],
+    };
+  });
+
+  const api = React.useMemo(() => ({
+    state,
+    section: (id) => state.sections[id] || {},
+    patchSection: (id, p) => setState((s) => ({
+      ...s,
+      sections: { ...s.sections, [id]: { ...s.sections[id], ...(typeof p === 'function' ? p(s.sections[id] || {}) : p) } },
+    })),
+    setFocus: (slotId) => setState((s) => ({ ...s, focus: slotId })),
+  }), [state]);
+
+  // Esc exits focus; any outside pointerdown commits an in-progress rename.
+  React.useEffect(() => {
+    const onKey = (e) => { if (e.key === 'Escape') api.setFocus(null); };
+    const onPd = (e) => {
+      const ae = document.activeElement;
+      if (ae && ae.isContentEditable && !ae.contains(e.target)) ae.blur();
+    };
+    document.addEventListener('keydown', onKey);
+    document.addEventListener('pointerdown', onPd, true);
+    return () => {
+      document.removeEventListener('keydown', onKey);
+      document.removeEventListener('pointerdown', onPd, true);
+    };
+  }, [api]);
+
+  return (
+    <DCCtx.Provider value={api}>
+      <DCViewport minScale={minScale} maxScale={maxScale} style={style}>{ready && children}</DCViewport>
+      {state.focus && registry[state.focus] && (
+        <DCFocusOverlay entry={registry[state.focus]} sectionMeta={sectionMeta} sectionOrder={sectionOrder} />
+      )}
+    </DCCtx.Provider>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// DCViewport — transform-based pan/zoom (internal)
+//
+// Input mapping (Figma-style):
+//   • trackpad pinch  → zoom   (ctrlKey wheel; Safari gesture* events)
+//   • trackpad scroll → pan    (two-finger)
+//   • mouse wheel     → zoom   (notched; distinguished from trackpad scroll)
+//   • middle-drag / primary-drag-on-bg → pan
+//
+// Transform state lives in a ref and is written straight to the DOM
+// (translate3d + will-change) so wheel ticks don't go through React —
+// keeps pans at 60fps on dense canvases.
+// ─────────────────────────────────────────────────────────────
+function DCViewport({ children, minScale = 0.1, maxScale = 8, style = {} }) {
+  const vpRef = React.useRef(null);
+  const worldRef = React.useRef(null);
+  const tf = React.useRef({ x: 0, y: 0, scale: 1 });
+  // Persist viewport across reloads so the user lands back where they were
+  // after an agent edit or browser refresh. The sandbox origin is already
+  // per-project; pathname keeps multiple canvas files in one project apart.
+  const tfKey = 'dc-viewport:' + location.pathname;
+  const saveT = React.useRef(0);
+
+  const lastPostedScale = React.useRef();
+  const apply = React.useCallback(() => {
+    const { x, y, scale } = tf.current;
+    const el = worldRef.current;
+    if (!el) return;
+    el.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${scale})`;
+    // Exposed for zoom-invariant chrome (labels, buttons, TweaksPanel).
+    el.style.setProperty('--dc-inv-zoom', String(1 / scale));
+    // Keep the host toolbar's % readout in sync with the canvas scale. Pan
+    // ticks leave scale unchanged — skip the cross-frame post for those.
+    if (lastPostedScale.current !== scale) {
+      lastPostedScale.current = scale;
+      window.parent.postMessage({ type: '__dc_zoom', scale }, '*');
+    }
+    clearTimeout(saveT.current);
+    saveT.current = setTimeout(() => {
+      try { localStorage.setItem(tfKey, JSON.stringify(tf.current)); } catch {}
+    }, 200);
+  }, [tfKey]);
+
+  React.useLayoutEffect(() => {
+    const flush = () => {
+      clearTimeout(saveT.current);
+      try { localStorage.setItem(tfKey, JSON.stringify(tf.current)); } catch {}
+    };
+    try {
+      const s = JSON.parse(localStorage.getItem(tfKey) || 'null');
+      if (s && Number.isFinite(s.x) && Number.isFinite(s.y) && Number.isFinite(s.scale)) {
+        tf.current = { x: s.x, y: s.y, scale: Math.min(maxScale, Math.max(minScale, s.scale)) };
+        apply();
+      }
+    } catch {}
+    // Flush on pagehide and unmount so a reload within the 200ms debounce
+    // window doesn't drop the last pan/zoom.
+    window.addEventListener('pagehide', flush);
+    return () => { window.removeEventListener('pagehide', flush); flush(); };
+  }, []);
+
+  React.useEffect(() => {
+    const vp = vpRef.current;
+    if (!vp) return;
+
+    const zoomAt = (cx, cy, factor) => {
+      const r = vp.getBoundingClientRect();
+      const px = cx - r.left, py = cy - r.top;
+      const t = tf.current;
+      const next = Math.min(maxScale, Math.max(minScale, t.scale * factor));
+      const k = next / t.scale;
+      // keep the world point under the cursor fixed
+      t.x = px - (px - t.x) * k;
+      t.y = py - (py - t.y) * k;
+      t.scale = next;
+      apply();
+    };
+
+    // Mouse-wheel vs trackpad-scroll heuristic. A physical wheel sends
+    // line-mode deltas (Firefox) or large integer pixel deltas with no X
+    // component (Chrome/Safari, typically multiples of 100/120). Trackpad
+    // two-finger scroll sends small/fractional pixel deltas, often with
+    // non-zero deltaX. ctrlKey is set by the browser for trackpad pinch.
+    const isMouseWheel = (e) =>
+      e.deltaMode !== 0 ||
+      (e.deltaX === 0 && Number.isInteger(e.deltaY) && Math.abs(e.deltaY) >= 40);
+
+    const onWheel = (e) => {
+      e.preventDefault();
+      if (isGesturing) return; // Safari: gesture* owns the pinch — discard concurrent wheels
+      if ((e.ctrlKey || e.metaKey) && !isMouseWheel(e)) {
+        // trackpad pinch, or ctrl/cmd + smooth-scroll mouse. Notched
+        // wheels fall through to the fixed-step branch below.
+        zoomAt(e.clientX, e.clientY, Math.exp(-e.deltaY * 0.01));
+      } else if (isMouseWheel(e)) {
+        // notched mouse wheel — fixed-ratio step per click
+        zoomAt(e.clientX, e.clientY, Math.exp(-Math.sign(e.deltaY) * 0.18));
+      } else {
+        // trackpad two-finger scroll — pan
+        tf.current.x -= e.deltaX;
+        tf.current.y -= e.deltaY;
+        apply();
+      }
+    };
+
+    // Safari sends native gesture* events for trackpad pinch with a smooth
+    // e.scale; preferring these over the ctrl+wheel fallback gives a much
+    // better feel there. No-ops on other browsers. Safari also fires
+    // ctrlKey wheel events during the same pinch — isGesturing makes
+    // onWheel drop those entirely so they neither zoom nor pan.
+    let gsBase = 1;
+    let isGesturing = false;
+    const onGestureStart = (e) => { e.preventDefault(); isGesturing = true; gsBase = tf.current.scale; };
+    const onGestureChange = (e) => {
+      e.preventDefault();
+      zoomAt(e.clientX, e.clientY, (gsBase * e.scale) / tf.current.scale);
+    };
+    const onGestureEnd = (e) => { e.preventDefault(); isGesturing = false; };
+
+    // Drag-pan: middle button anywhere, or primary button on canvas
+    // background (anything that isn't an artboard or an inline editor).
+    let drag = null;
+    const onPointerDown = (e) => {
+      const onBg = !e.target.closest('[data-dc-slot], .dc-editable');
+      if (!(e.button === 1 || (e.button === 0 && onBg))) return;
+      e.preventDefault();
+      vp.setPointerCapture(e.pointerId);
+      drag = { id: e.pointerId, lx: e.clientX, ly: e.clientY };
+      vp.style.cursor = 'grabbing';
+    };
+    const onPointerMove = (e) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      tf.current.x += e.clientX - drag.lx;
+      tf.current.y += e.clientY - drag.ly;
+      drag.lx = e.clientX; drag.ly = e.clientY;
+      apply();
+    };
+    const onPointerUp = (e) => {
+      if (!drag || e.pointerId !== drag.id) return;
+      vp.releasePointerCapture(e.pointerId);
+      drag = null;
+      vp.style.cursor = '';
+    };
+
+    // Host-driven zoom (toolbar % menu). Zooms around viewport centre so the
+    // visible midpoint stays fixed — matching the host's iframe-zoom feel.
+    const onHostMsg = (e) => {
+      const d = e.data;
+      if (d && d.type === '__dc_set_zoom' && typeof d.scale === 'number') {
+        const r = vp.getBoundingClientRect();
+        zoomAt(r.left + r.width / 2, r.top + r.height / 2, d.scale / tf.current.scale);
+      } else if (d && d.type === '__dc_probe') {
+        // Host's [readyGen] reset asks whether a canvas is present; it
+        // fires on the iframe's native 'load', which for canvases with
+        // images/fonts is after our mount-time announce, so re-announce.
+        // Clear the pan-tick guard so apply() re-posts the current scale
+        // even if it's unchanged — the host just reset dcScale to 1.
+        window.parent.postMessage({ type: '__dc_present' }, '*');
+        lastPostedScale.current = undefined;
+        apply();
+      }
+    };
+    window.addEventListener('message', onHostMsg);
+    // Announce canvas mode so the host toolbar proxies its % control here
+    // instead of scaling the iframe element (which would just shrink the
+    // viewport window of an infinite canvas). The apply() that follows emits
+    // the initial __dc_zoom so the toolbar % is correct before first pinch.
+    // lastPostedScale reset mirrors the __dc_probe handler: the layout
+    // effect's restore-path apply() may already have posted the restored
+    // scale (before __dc_present), so clear the guard to re-post it in order.
+    window.parent.postMessage({ type: '__dc_present' }, '*');
+    lastPostedScale.current = undefined;
+    apply();
+
+    vp.addEventListener('wheel', onWheel, { passive: false });
+    vp.addEventListener('gesturestart', onGestureStart, { passive: false });
+    vp.addEventListener('gesturechange', onGestureChange, { passive: false });
+    vp.addEventListener('gestureend', onGestureEnd, { passive: false });
+    vp.addEventListener('pointerdown', onPointerDown);
+    vp.addEventListener('pointermove', onPointerMove);
+    vp.addEventListener('pointerup', onPointerUp);
+    vp.addEventListener('pointercancel', onPointerUp);
+    return () => {
+      window.removeEventListener('message', onHostMsg);
+      vp.removeEventListener('wheel', onWheel);
+      vp.removeEventListener('gesturestart', onGestureStart);
+      vp.removeEventListener('gesturechange', onGestureChange);
+      vp.removeEventListener('gestureend', onGestureEnd);
+      vp.removeEventListener('pointerdown', onPointerDown);
+      vp.removeEventListener('pointermove', onPointerMove);
+      vp.removeEventListener('pointerup', onPointerUp);
+      vp.removeEventListener('pointercancel', onPointerUp);
+    };
+  }, [apply, minScale, maxScale]);
+
+  const gridSvg = `url("data:image/svg+xml,%3Csvg width='120' height='120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M120 0H0v120' fill='none' stroke='${encodeURIComponent(DC.grid)}' stroke-width='1'/%3E%3C/svg%3E")`;
+  return (
+    <div
+      ref={vpRef}
+      className="design-canvas"
+      style={{
+        height: '100vh', width: '100vw',
+        background: DC.bg,
+        overflow: 'hidden',
+        overscrollBehavior: 'none',
+        touchAction: 'none',
+        position: 'relative',
+        fontFamily: DC.font,
+        boxSizing: 'border-box',
+        ...style,
+      }}
+    >
+      <div
+        ref={worldRef}
+        style={{
+          position: 'absolute', top: 0, left: 0,
+          transformOrigin: '0 0',
+          willChange: 'transform',
+          width: 'max-content', minWidth: '100%',
+          minHeight: '100%',
+          padding: '60px 0 80px',
+        }}
+      >
+        <div style={{ position: 'absolute', inset: -6000, backgroundImage: gridSvg, backgroundSize: '120px 120px', pointerEvents: 'none', zIndex: -1 }} />
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// DCSection — editable title + h-row of artboards in persisted order
+// ─────────────────────────────────────────────────────────────
+function DCSection({ id, title, subtitle, children, gap = 48 }) {
+  const ctx = React.useContext(DCCtx);
+  const sid = id ?? title;
+  const all = React.Children.toArray(children);
+  const artboards = all.filter((c) => c && c.type === DCArtboard);
+  const rest = all.filter((c) => !(c && c.type === DCArtboard));
+  const sec = (ctx && sid && ctx.section(sid)) || {};
+  // Must match DesignCanvas's srcKey computation exactly (it filters falsy
+  // IDs), or onDelete persists a srcKey that DesignCanvas never recognizes.
+  const allIds = artboards.map((a) => a.props.id ?? a.props.label).filter(Boolean);
+  const srcKey = allIds.join('\x1f');
+  const hidden = sec.srcKey === srcKey ? (sec.hidden || []) : [];
+  const srcOrder = allIds.filter((k) => !hidden.includes(k));
+
+  const order = React.useMemo(() => {
+    const kept = (sec.order || []).filter((k) => srcOrder.includes(k));
+    return [...kept, ...srcOrder.filter((k) => !kept.includes(k))];
+  }, [sec.order, srcOrder.join('|')]);
+
+  const byId = Object.fromEntries(artboards.map((a) => [a.props.id ?? a.props.label, a]));
+
+  // marginBottom counter-scales so the on-screen gap between sections stays
+  // constant — otherwise at low zoom the (world-space) gap collapses while
+  // the screen-constant sectionhead below it doesn't, and the title reads as
+  // belonging to the section above. paddingBottom below is just enough for
+  // the 24px artboard-header (abs-positioned above each card) plus ~8px, so
+  // the title sits tight against its own row at every zoom.
+  return (
+    <div data-dc-section={sid}
+      style={{ marginBottom: 'calc(80px * var(--dc-inv-zoom, 1))', position: 'relative' }}>
+      <div style={{ padding: '0 60px' }}>
+        <div className="dc-sectionhead" style={{ paddingBottom: 36 }}>
+          <DCEditable tag="div" value={sec.title ?? title}
+            onChange={(v) => ctx && sid && ctx.patchSection(sid, { title: v })}
+            style={{ fontSize: 28, fontWeight: 600, color: DC.title, letterSpacing: -0.4, marginBottom: 6, display: 'inline-block' }} />
+          {subtitle && <div style={{ fontSize: 16, color: DC.subtitle }}>{subtitle}</div>}
+        </div>
+      </div>
+      <div style={{ display: 'flex', gap, padding: '0 60px', alignItems: 'flex-start', width: 'max-content' }}>
+        {order.map((k) => (
+          <DCArtboardFrame key={k} sectionId={sid} artboard={byId[k]} order={order}
+            label={(sec.labels || {})[k] ?? byId[k].props.label}
+            onRename={(v) => ctx && ctx.patchSection(sid, (x) => ({ labels: { ...x.labels, [k]: v } }))}
+            onReorder={(next) => ctx && ctx.patchSection(sid, { order: next })}
+            onDelete={() => ctx && ctx.patchSection(sid, (x) => ({
+              hidden: [...(x.srcKey === srcKey ? (x.hidden || []) : []), k],
+              srcKey,
+            }))}
+            onFocus={() => ctx && ctx.setFocus(`${sid}/${k}`)} />
+        ))}
+      </div>
+      {rest}
+    </div>
+  );
+}
+
+// DCArtboard — marker; rendered by DCArtboardFrame via DCSection.
+function DCArtboard() { return null; }
+
+// Per-artboard export (kind: 'png' | 'html'). Both paths share the same
+// self-contained clone: computed styles baked in, @font-face / <img> /
+// inline-style background-image urls inlined as data URIs. PNG wraps the
+// clone in foreignObject→canvas at 3× the artboard's natural width×height
+// (same pipeline the host uses for page captures); HTML wraps it in a
+// minimal standalone document. Both are independent of viewport zoom.
+async function dcExport(node, w, h, name, kind) {
+  try { await document.fonts.ready; } catch {}
+  const toDataURL = (url) => fetch(url).then((r) => r.blob()).then((b) => new Promise((res) => {
+    const fr = new FileReader(); fr.onload = () => res(fr.result); fr.onerror = () => res(url); fr.readAsDataURL(b);
+  })).catch(() => url);
+
+  // Collect @font-face rules. ss.cssRules throws SecurityError on
+  // cross-origin sheets (e.g. fonts.googleapis.com) — in that case fetch
+  // the CSS text directly (those endpoints send ACAO:*) and regex-extract
+  // the blocks. @import and @media/@supports are walked so nested
+  // @font-face rules aren't missed.
+  const fontRules = [], pending = [], seen = new Set();
+  const scrapeCss = (href) => {
+    if (seen.has(href)) return; seen.add(href);
+    pending.push(fetch(href).then((r) => r.text()).then((css) => {
+      for (const m of css.match(/@font-face\s*{[^}]*}/g) || []) fontRules.push({ css: m, base: href });
+      for (const m of css.matchAll(/@import\s+(?:url\()?['"]?([^'")\s;]+)/g))
+        scrapeCss(new URL(m[1], href).href);
+    }).catch(() => {}));
+  };
+  const walk = (rules, base) => {
+    for (const r of rules) {
+      if (r.type === CSSRule.FONT_FACE_RULE) fontRules.push({ css: r.cssText, base });
+      else if (r.type === CSSRule.IMPORT_RULE && r.styleSheet) {
+        const ibase = r.styleSheet.href || base;
+        try { walk(r.styleSheet.cssRules, ibase); } catch { scrapeCss(ibase); }
+      } else if (r.cssRules) walk(r.cssRules, base);
+    }
+  };
+  for (const ss of document.styleSheets) {
+    const base = ss.href || location.href;
+    try { walk(ss.cssRules, base); } catch { if (ss.href) scrapeCss(ss.href); }
+  }
+  while (pending.length) await pending.shift();
+  const fontCss = (await Promise.all(fontRules.map(async (rule) => {
+    let out = rule.css, m; const re = /url\((['"]?)([^'")]+)\1\)/g;
+    while ((m = re.exec(rule.css))) {
+      if (m[2].indexOf('data:') === 0) continue;
+      let abs; try { abs = new URL(m[2], rule.base).href; } catch { continue; }
+      out = out.split(m[0]).join('url("' + await toDataURL(abs) + '")');
+    }
+    return out;
+  }))).join('\n');
+
+  const cloneStyled = (src) => {
+    if (src.nodeType === 8 || (src.nodeType === 1 && src.tagName === 'SCRIPT')) return document.createTextNode('');
+    const dst = src.cloneNode(false);
+    if (src.nodeType === 1) {
+      const cs = getComputedStyle(src); let txt = '';
+      for (let i = 0; i < cs.length; i++) txt += cs[i] + ':' + cs.getPropertyValue(cs[i]) + ';';
+      dst.setAttribute('style', txt + 'animation:none;transition:none;');
+      if (src.tagName === 'CANVAS') try { const im = document.createElement('img'); im.src = src.toDataURL(); im.setAttribute('style', txt); return im; } catch {}
+    }
+    for (let c = src.firstChild; c; c = c.nextSibling) dst.appendChild(cloneStyled(c));
+    return dst;
+  };
+  const clone = cloneStyled(node);
+  clone.setAttribute('xmlns', 'http://www.w3.org/1999/xhtml');
+  // Drop the card's own shadow/radius so the export is a flush w×h rect;
+  // the artboard's own background (if any) is already in the computed style.
+  clone.style.boxShadow = 'none'; clone.style.borderRadius = '0';
+
+  const jobs = [];
+  clone.querySelectorAll('img').forEach((el) => {
+    const s = el.getAttribute('src');
+    if (s && s.indexOf('data:') !== 0) jobs.push(toDataURL(el.src).then((d) => el.setAttribute('src', d)));
+  });
+  [clone, ...clone.querySelectorAll('*')].forEach((el) => {
+    const bg = el.style.backgroundImage; if (!bg) return;
+    let m; const re = /url\(["']?([^"')]+)["']?\)/g;
+    while ((m = re.exec(bg))) {
+      const tok = m[0], url = m[1];
+      if (url.indexOf('data:') === 0) continue;
+      jobs.push(toDataURL(url).then((d) => { el.style.backgroundImage = el.style.backgroundImage.split(tok).join('url("' + d + '")'); }));
+    }
+  });
+  await Promise.all(jobs);
+
+  const xml = new XMLSerializer().serializeToString(clone);
+  const save = (blob, ext) => {
+    if (!blob) return;
+    const a = document.createElement('a');
+    a.href = URL.createObjectURL(blob); a.download = name + '.' + ext; a.click();
+    setTimeout(() => URL.revokeObjectURL(a.href), 1000);
+  };
+
+  if (kind === 'html') {
+    const html = '<!doctype html><html><head><meta charset="utf-8"><title>' + name + '</title>' +
+      (fontCss ? '<style>' + fontCss + '</style>' : '') +
+      '</head><body style="margin:0">' + xml + '</body></html>';
+    return save(new Blob([html], { type: 'text/html' }), 'html');
+  }
+
+  // PNG: the SVG's own width/height must be the output resolution — an
+  // <img>-loaded SVG rasterizes at its intrinsic size, so sizing it at 1×
+  // and ctx.scale()-ing up would just upscale a 1× bitmap. viewBox maps the
+  // w×h foreignObject onto the px·w × px·h SVG canvas so the browser renders
+  // the HTML at full resolution.
+  const px = 3;
+  const svg = '<svg xmlns="http://www.w3.org/2000/svg" width="' + w * px + '" height="' + h * px +
+    '" viewBox="0 0 ' + w + ' ' + h + '"><foreignObject width="' + w + '" height="' + h + '">' +
+    (fontCss ? '<style><![CDATA[' + fontCss + ']]></style>' : '') + xml + '</foreignObject></svg>';
+  const img = new Image();
+  await new Promise((res, rej) => {
+    img.onload = res; img.onerror = () => rej(new Error('svg load failed'));
+    img.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
+  });
+  const cv = document.createElement('canvas');
+  cv.width = w * px; cv.height = h * px;
+  cv.getContext('2d').drawImage(img, 0, 0);
+  cv.toBlob((blob) => save(blob, 'png'), 'image/png');
+}
+
+function DCArtboardFrame({ sectionId, artboard, label, order, onRename, onReorder, onFocus, onDelete }) {
+  const { id: rawId, label: rawLabel, width = 260, height = 480, children, style = {} } = artboard.props;
+  const id = rawId ?? rawLabel;
+  const ref = React.useRef(null);
+  const cardRef = React.useRef(null);
+  const menuRef = React.useRef(null);
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  const [confirming, setConfirming] = React.useState(false);
+
+  // ⋯ menu: close on any outside pointerdown. Two-click delete lives inside
+  // the menu — first click arms the row, second commits; closing disarms.
+  React.useEffect(() => {
+    if (!menuOpen) { setConfirming(false); return; }
+    const off = (e) => { if (!menuRef.current || !menuRef.current.contains(e.target)) setMenuOpen(false); };
+    document.addEventListener('pointerdown', off, true);
+    return () => document.removeEventListener('pointerdown', off, true);
+  }, [menuOpen]);
+
+  const doExport = (kind) => {
+    setMenuOpen(false);
+    if (!cardRef.current) return;
+    const name = String(label || id || 'artboard').replace(/[^\w\s.-]+/g, '_');
+    dcExport(cardRef.current, width, height, name, kind)
+      .catch((e) => console.error('[design-canvas] export failed:', e));
+  };
+
+  // Live drag-reorder: dragged card sticks to cursor; siblings slide into
+  // their would-be slots in real time via transforms. DOM order only
+  // changes on drop.
+  const onGripDown = (e) => {
+    e.preventDefault(); e.stopPropagation();
+    const me = ref.current;
+    // translateX is applied in local (pre-scale) space but pointer deltas and
+    // getBoundingClientRect().left are screen-space — divide by the viewport's
+    // current scale so the dragged card tracks the cursor at any zoom level.
+    const scale = me.getBoundingClientRect().width / me.offsetWidth || 1;
+    const peers = Array.from(document.querySelectorAll(`[data-dc-section="${sectionId}"] [data-dc-slot]`));
+    const homes = peers.map((el) => ({ el, id: el.dataset.dcSlot, x: el.getBoundingClientRect().left }));
+    const slotXs = homes.map((h) => h.x);
+    const startIdx = order.indexOf(id);
+    const startX = e.clientX;
+    let liveOrder = order.slice();
+    me.classList.add('dc-dragging');
+
+    const layout = () => {
+      for (const h of homes) {
+        if (h.id === id) continue;
+        const slot = liveOrder.indexOf(h.id);
+        h.el.style.transform = `translateX(${(slotXs[slot] - h.x) / scale}px)`;
+      }
+    };
+
+    const move = (ev) => {
+      const dx = ev.clientX - startX;
+      me.style.transform = `translateX(${dx / scale}px)`;
+      const cur = homes[startIdx].x + dx;
+      let nearest = 0, best = Infinity;
+      for (let i = 0; i < slotXs.length; i++) {
+        const d = Math.abs(slotXs[i] - cur);
+        if (d < best) { best = d; nearest = i; }
+      }
+      if (liveOrder.indexOf(id) !== nearest) {
+        liveOrder = order.filter((k) => k !== id);
+        liveOrder.splice(nearest, 0, id);
+        layout();
+      }
+    };
+
+    const up = () => {
+      document.removeEventListener('pointermove', move);
+      document.removeEventListener('pointerup', up);
+      const finalSlot = liveOrder.indexOf(id);
+      me.classList.remove('dc-dragging');
+      me.style.transform = `translateX(${(slotXs[finalSlot] - homes[startIdx].x) / scale}px)`;
+      // After the settle transition, kill transitions + clear transforms +
+      // commit the reorder in the same frame so there's no visual snap-back.
+      setTimeout(() => {
+        for (const h of homes) { h.el.style.transition = 'none'; h.el.style.transform = ''; }
+        if (liveOrder.join('|') !== order.join('|')) onReorder(liveOrder);
+        requestAnimationFrame(() => requestAnimationFrame(() => {
+          for (const h of homes) h.el.style.transition = '';
+        }));
+      }, 180);
+    };
+    document.addEventListener('pointermove', move);
+    document.addEventListener('pointerup', up);
+  };
+
+  return (
+    <div ref={ref} data-dc-slot={id} style={{ position: 'relative', flexShrink: 0 }}>
+      <div className="dc-header" style={{ color: DC.label }} onPointerDown={(e) => e.stopPropagation()}>
+        <div className="dc-labelrow">
+          <div className="dc-grip" onPointerDown={onGripDown} title="Drag to reorder">
+            <svg width="9" height="13" viewBox="0 0 9 13" fill="currentColor"><circle cx="2" cy="2" r="1.1"/><circle cx="7" cy="2" r="1.1"/><circle cx="2" cy="6.5" r="1.1"/><circle cx="7" cy="6.5" r="1.1"/><circle cx="2" cy="11" r="1.1"/><circle cx="7" cy="11" r="1.1"/></svg>
+          </div>
+          <div className="dc-labeltext" onClick={onFocus} title="Click to focus">
+            <DCEditable value={label} onChange={onRename} onClick={(e) => e.stopPropagation()}
+              style={{ fontSize: 15, fontWeight: 500, color: DC.label, lineHeight: 1 }} />
+          </div>
+        </div>
+        <div className="dc-btns">
+          <div ref={menuRef} style={{ position: 'relative' }}>
+            <button className="dc-kebab" title="More" onClick={() => setMenuOpen((o) => !o)}>
+              <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><circle cx="2.5" cy="6" r="1.1"/><circle cx="6" cy="6" r="1.1"/><circle cx="9.5" cy="6" r="1.1"/></svg>
+            </button>
+            {menuOpen && (
+              <div className="dc-menu" onPointerDown={(e) => e.stopPropagation()}>
+                <button onClick={() => doExport('png')}>Download PNG</button>
+                <button onClick={() => doExport('html')}>Download HTML</button>
+                <hr />
+                <button className="dc-danger"
+                  onClick={() => { if (confirming) { setMenuOpen(false); onDelete(); } else setConfirming(true); }}>
+                  {confirming ? 'Click again to delete' : 'Delete'}
+                </button>
+              </div>
+            )}
+          </div>
+          <button className="dc-expand" onClick={onFocus} title="Focus">
+            <svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round"><path d="M7 1h4v4M5 11H1V7M11 1L7.5 4.5M1 11l3.5-3.5"/></svg>
+          </button>
+        </div>
+      </div>
+      <div ref={cardRef} className="dc-card"
+        style={{ borderRadius: 2, boxShadow: '0 1px 3px rgba(0,0,0,.08),0 4px 16px rgba(0,0,0,.06)', overflow: 'hidden', width, height, background: '#fff', ...style }}>
+        {children || <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb', fontSize: 13, fontFamily: DC.font }}>{id}</div>}
+      </div>
+    </div>
+  );
+}
+
+// Inline rename — commits on blur or Enter.
+function DCEditable({ value, onChange, style, tag = 'span', onClick }) {
+  const T = tag;
+  return (
+    <T className="dc-editable" contentEditable suppressContentEditableWarning
+      onClick={onClick}
+      onPointerDown={(e) => e.stopPropagation()}
+      onBlur={(e) => onChange && onChange(e.currentTarget.textContent)}
+      onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); e.currentTarget.blur(); } }}
+      style={style}>{value}</T>
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Focus mode — overlay one artboard; ←/→ within section, ↑/↓ across
+// sections, Esc or backdrop click to exit.
+// ─────────────────────────────────────────────────────────────
+function DCFocusOverlay({ entry, sectionMeta, sectionOrder }) {
+  const ctx = React.useContext(DCCtx);
+  const { sectionId, artboard } = entry;
+  const sec = ctx.section(sectionId);
+  const meta = sectionMeta[sectionId];
+  const peers = meta.slotIds;
+  const aid = artboard.props.id ?? artboard.props.label;
+  const idx = peers.indexOf(aid);
+  const secIdx = sectionOrder.indexOf(sectionId);
+
+  const go = (d) => { const n = peers[(idx + d + peers.length) % peers.length]; if (n) ctx.setFocus(`${sectionId}/${n}`); };
+  const goSection = (d) => {
+    // Sections whose artboards are all deleted have slotIds:[] — step past
+    // them to the next non-empty section so ↑/↓ doesn't dead-end.
+    const n = sectionOrder.length;
+    for (let i = 1; i < n; i++) {
+      const ns = sectionOrder[(((secIdx + d * i) % n) + n) % n];
+      const first = sectionMeta[ns] && sectionMeta[ns].slotIds[0];
+      if (first) { ctx.setFocus(`${ns}/${first}`); return; }
+    }
+  };
+
+  React.useEffect(() => {
+    const k = (e) => {
+      if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
+      if (e.key === 'ArrowRight') { e.preventDefault(); go(1); }
+      if (e.key === 'ArrowUp') { e.preventDefault(); goSection(-1); }
+      if (e.key === 'ArrowDown') { e.preventDefault(); goSection(1); }
+    };
+    document.addEventListener('keydown', k);
+    return () => document.removeEventListener('keydown', k);
+  });
+
+  const { width = 260, height = 480, children } = artboard.props;
+  const [vp, setVp] = React.useState({ w: window.innerWidth, h: window.innerHeight });
+  React.useEffect(() => { const r = () => setVp({ w: window.innerWidth, h: window.innerHeight }); window.addEventListener('resize', r); return () => window.removeEventListener('resize', r); }, []);
+  const scale = Math.max(0.1, Math.min((vp.w - 200) / width, (vp.h - 260) / height, 2));
+
+  const [ddOpen, setDd] = React.useState(false);
+  const Arrow = ({ dir, onClick }) => (
+    <button onClick={(e) => { e.stopPropagation(); onClick(); }}
+      style={{ position: 'absolute', top: '50%', [dir]: 28, transform: 'translateY(-50%)',
+        border: 'none', background: 'rgba(255,255,255,.08)', color: 'rgba(255,255,255,.9)',
+        width: 44, height: 44, borderRadius: 22, fontSize: 18, cursor: 'pointer',
+        display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'background .15s' }}
+      onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.18)')}
+      onMouseLeave={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.08)')}>
+      <svg width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+        <path d={dir === 'left' ? 'M11 3L5 9l6 6' : 'M7 3l6 6-6 6'} /></svg>
+    </button>
+  );
+
+  // Portal to body so position:fixed is the real viewport regardless of any
+  // transform on DesignCanvas's ancestors (including the canvas zoom itself).
+  return ReactDOM.createPortal(
+    <div onClick={() => ctx.setFocus(null)}
+      onWheel={(e) => e.preventDefault()}
+      style={{ position: 'fixed', inset: 0, zIndex: 100, background: 'rgba(24,20,16,.6)', backdropFilter: 'blur(14px)',
+        fontFamily: DC.font, color: '#fff' }}>
+
+      {/* top bar: section dropdown (left) · close (right) */}
+      <div onClick={(e) => e.stopPropagation()}
+        style={{ position: 'absolute', top: 0, left: 0, right: 0, height: 72, display: 'flex', alignItems: 'flex-start', padding: '16px 20px 0', gap: 16 }}>
+        <div style={{ position: 'relative' }}>
+          <button onClick={() => setDd((o) => !o)}
+            style={{ border: 'none', background: 'transparent', color: '#fff', cursor: 'pointer', padding: '6px 8px',
+              borderRadius: 6, textAlign: 'left', fontFamily: 'inherit' }}>
+            <span style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+              <span style={{ fontSize: 18, fontWeight: 600, letterSpacing: -0.3 }}>{meta.title}</span>
+              <svg width="11" height="11" viewBox="0 0 11 11" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" style={{ opacity: .7 }}><path d="M2 4l3.5 3.5L9 4"/></svg>
+            </span>
+            {meta.subtitle && <span style={{ display: 'block', fontSize: 13, opacity: .6, fontWeight: 400, marginTop: 2 }}>{meta.subtitle}</span>}
+          </button>
+          {ddOpen && (
+            <div style={{ position: 'absolute', top: '100%', left: 0, marginTop: 4, background: '#2a251f', borderRadius: 8,
+              boxShadow: '0 8px 32px rgba(0,0,0,.4)', padding: 4, minWidth: 200, zIndex: 10 }}>
+              {sectionOrder.filter((sid) => sectionMeta[sid].slotIds.length).map((sid) => (
+                <button key={sid} onClick={() => { setDd(false); const f = sectionMeta[sid].slotIds[0]; if (f) ctx.setFocus(`${sid}/${f}`); }}
+                  style={{ display: 'block', width: '100%', textAlign: 'left', border: 'none', cursor: 'pointer',
+                    background: sid === sectionId ? 'rgba(255,255,255,.1)' : 'transparent', color: '#fff',
+                    padding: '8px 12px', borderRadius: 5, fontSize: 14, fontWeight: sid === sectionId ? 600 : 400, fontFamily: 'inherit' }}>
+                  {sectionMeta[sid].title}
+                </button>
+              ))}
+            </div>
+          )}
+        </div>
+        <div style={{ flex: 1 }} />
+        <button onClick={() => ctx.setFocus(null)}
+          onMouseEnter={(e) => (e.currentTarget.style.background = 'rgba(255,255,255,.12)')}
+          onMouseLeave={(e) => (e.currentTarget.style.background = 'transparent')}
+          style={{ border: 'none', background: 'transparent', color: 'rgba(255,255,255,.7)', width: 32, height: 32,
+            borderRadius: 16, fontSize: 20, cursor: 'pointer', lineHeight: 1, transition: 'background .12s' }}>×</button>
+      </div>
+
+      {/* card centered, label + index below — only the card itself stops
+          propagation so any backdrop click (including the margins around
+          the card) exits focus */}
+      <div
+        style={{ position: 'absolute', top: 64, bottom: 56, left: 100, right: 100, display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
+        <div onClick={(e) => e.stopPropagation()} style={{ width: width * scale, height: height * scale, position: 'relative' }}>
+          <div style={{ width, height, transform: `scale(${scale})`, transformOrigin: 'top left', background: '#fff', borderRadius: 2, overflow: 'hidden',
+            boxShadow: '0 20px 80px rgba(0,0,0,.4)' }}>
+            {children || <div style={{ height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#bbb' }}>{aid}</div>}
+          </div>
+        </div>
+        <div onClick={(e) => e.stopPropagation()} style={{ fontSize: 14, fontWeight: 500, opacity: .85, textAlign: 'center' }}>
+          {(sec.labels || {})[aid] ?? artboard.props.label}
+          <span style={{ opacity: .5, marginLeft: 10, fontVariantNumeric: 'tabular-nums' }}>{idx + 1} / {peers.length}</span>
+        </div>
+      </div>
+
+      <Arrow dir="left" onClick={() => go(-1)} />
+      <Arrow dir="right" onClick={() => go(1)} />
+
+      {/* dots */}
+      <div onClick={(e) => e.stopPropagation()}
+        style={{ position: 'absolute', bottom: 20, left: '50%', transform: 'translateX(-50%)', display: 'flex', gap: 8 }}>
+        {peers.map((p, i) => (
+          <button key={p} onClick={() => ctx.setFocus(`${sectionId}/${p}`)}
+            style={{ border: 'none', padding: 0, cursor: 'pointer', width: 6, height: 6, borderRadius: 3,
+              background: i === idx ? '#fff' : 'rgba(255,255,255,.3)' }} />
+        ))}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+// ─────────────────────────────────────────────────────────────
+// Post-it — absolute-positioned sticky note
+// ─────────────────────────────────────────────────────────────
+function DCPostIt({ children, top, left, right, bottom, rotate = -2, width = 180 }) {
+  return (
+    <div style={{
+      position: 'absolute', top, left, right, bottom, width,
+      background: DC.postitBg, padding: '14px 16px',
+      fontFamily: '"Comic Sans MS", "Marker Felt", "Segoe Print", cursive',
+      fontSize: 14, lineHeight: 1.4, color: DC.postitText,
+      boxShadow: '0 2px 8px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08)',
+      transform: `rotate(${rotate}deg)`,
+      zIndex: 5,
+    }}>{children}</div>
+  );
+}
+
+Object.assign(window, { DesignCanvas, DCSection, DCArtboard, DCPostIt });
+

docs/design_handoff/design_files/evidence.jsx

@@ -0,0 +1,257 @@
+/* Evidence cards: stack below the map. One card per specialist that fired.
+   Each card carries source label, formatted output, tier badge, doc_id,
+   and prominent vintage. Mobile: horizontal swipe; desktop: 2-col grid.
+*/
+
+const EVIDENCE = [
+  {
+    id: "e1", citeId: "c1", tier: "empirical",
+    source: "USGS",
+    title: "Post-Sandy high-water marks within 500ft",
+    fmt: "table",
+    table: [
+      ["HWM-NY-3081", "7.4 ft NAVD88", "0.18 mi"],
+      ["HWM-NY-3082", "8.1 ft NAVD88", "0.22 mi"],
+      ["HWM-NY-3105", "6.8 ft NAVD88", "0.31 mi"],
+    ],
+    docId: "USGS-OFR-2013-1234",
+    vintage: "2013-05",
+  },
+  {
+    id: "e2", citeId: "c3", tier: "empirical",
+    source: "FloodNet NYC",
+    title: "Sensor BK-RH-002 ,  monthly above-curb events",
+    fmt: "spark",
+    spark: [0,0,1,0,2,1,0,0,3,0,1,0,0,0,2,1,0,0,1,0,2,4,1,1],
+    headline: "7 events", sub: "Jun 2024 → Apr 2026 · peak 14.3 cm",
+    docId: "FN-BK-RH-002",
+    vintage: "2026-04",
+  },
+  {
+    id: "e3", citeId: "c4", tier: "modeled",
+    source: "FEMA",
+    title: "Preliminary FIRM, panel 36047C0207G",
+    fmt: "scalar",
+    scalar: { value: "Zone AE", unit: "BFE 11 ft NAVD88", aux: "freeboard +4.8 ft" },
+    docId: "FEMA-FIRM-36047C0207G",
+    vintage: "2024-09",
+  },
+  {
+    id: "e4", citeId: "c5", tier: "modeled",
+    source: "NYC DEP",
+    title: "Stormwater Flood Map ,  moderate scenario",
+    fmt: "thumb",
+    thumb: "stormwater",
+    sub: "2.13 in/hr · ponding ≥4 in W half of lot · routed toward Imlay St",
+    docId: "NYCDEP-SWFM-2024",
+    vintage: "2024-06",
+  },
+  {
+    id: "e5", citeId: "c6", tier: "modeled",
+    source: "NPCC4",
+    title: "Sea-level rise projections for Lower NY Harbor",
+    fmt: "forecast",
+    forecast: [
+      { year: 2030, low: 4, mid: 6, high: 9 },
+      { year: 2050, low: 13, mid: 22, high: 30 },
+      { year: 2080, low: 28, mid: 49, high: 75 },
+      { year: 2100, low: 38, mid: 71, high: 114 },
+    ],
+    docId: "NPCC4-Ch3-Tbl3.2",
+    vintage: "2024-03",
+  },
+  {
+    id: "e6", citeId: "c9", tier: "synthetic",
+    source: "TerraMind v1.2",
+    title: "Synthetic SAR for 2025-09-14 (Sentinel-1 cloud-occluded)",
+    fmt: "thumb",
+    thumb: "synthetic",
+    sub: "Generated, not observed. Confidence 0.71. Provided as prior for downstream models; do not cite as observation.",
+    docId: "RIPRAP-SYN-20250914",
+    vintage: "2025-09",
+  },
+  {
+    id: "e7", citeId: "c7", tier: "proxy",
+    source: "NYC 311",
+    title: "Flood complaints, BK CB6 (2019–2025)",
+    fmt: "histogram",
+    months: [3,2,1,0,1,4,7,12,18,11,5,3,4,2,1,0,2,3,8,9,4,2,1,0],
+    headline: "89 calls", sub: "seasonal cluster Aug–Oct",
+    docId: "NYC311-FLD-CB6",
+    vintage: "2025-12",
+  },
+  {
+    id: "e8", citeId: "c8", tier: "proxy",
+    source: "FEMA NFIP",
+    title: "NFIP claims, tract 36047008500",
+    fmt: "scalar",
+    scalar: { value: "$4.1M", unit: "47 paid losses", aux: "since 2000-01-01" },
+    docId: "NFIP-T36047008500",
+    vintage: "2024-12",
+  },
+];
+
+const Spark = ({ data, color }) => {
+  const max = Math.max(...data, 1);
+  const w = 180, h = 36, n = data.length;
+  return (
+    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" aria-hidden="true">
+      {data.map((v, i) => (
+        <rect
+          key={i}
+          x={(i / n) * w + 0.5}
+          y={h - (v / max) * h}
+          width={Math.max(2, w / n - 1.5)}
+          height={(v / max) * h}
+          fill={color}
+        />
+      ))}
+    </svg>
+  );
+};
+
+const Histogram = ({ data, color }) => (
+  <Spark data={data} color={color} />
+);
+
+const ForecastChart = ({ data, color }) => {
+  const w = 220, h = 80, pad = 4;
+  const xs = data.map((d, i) => pad + (i / (data.length - 1)) * (w - pad * 2));
+  const max = Math.max(...data.map(d => d.high));
+  const y = (v) => h - pad - (v / max) * (h - pad * 2);
+  const path = (key) => xs.map((x, i) => `${i ? "L" : "M"} ${x} ${y(data[i][key])}`).join(" ");
+  const range = xs.map((x, i) => ({ x, lo: y(data[i].low), hi: y(data[i].high) }));
+  const areaD = `M ${range.map(r => `${r.x} ${r.lo}`).join(" L ")} L ${[...range].reverse().map(r => `${r.x} ${r.hi}`).join(" L ")} Z`;
+  return (
+    <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} aria-hidden="true">
+      <path d={areaD} fill={color} fillOpacity="0.18" />
+      <path d={path("mid")} fill="none" stroke={color} strokeWidth="1.5"/>
+      {data.map((d, i) => (
+        <g key={i}>
+          <circle cx={xs[i]} cy={y(d.mid)} r="2" fill={color}/>
+          <text x={xs[i]} y={h - 1} fontSize="9" fontFamily="IBM Plex Mono" textAnchor="middle" fill="#6B6B6B">{d.year}</text>
+        </g>
+      ))}
+    </svg>
+  );
+};
+
+const ThumbStripe = ({ kind }) => (
+  <svg viewBox="0 0 220 110" width="100%" height="110" aria-hidden="true" style={{ display: "block", background: "#F2F2EE" }}>
+    <defs>
+      <pattern id={`thumb-${kind}`} width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+        <rect width="6" height="6" fill={kind === "synthetic" ? "rgba(42,111,168,0.18)" : "rgba(42,111,168,0.30)"}/>
+        <line x1="0" y1="0" x2="0" y2="6" stroke={kind === "synthetic" ? "#2A6FA8" : "#0B5394"} strokeWidth="0.8"/>
+      </pattern>
+    </defs>
+    {kind === "stormwater" ? (
+      <>
+        <rect x="0" y="0" width="220" height="110" fill="#FAFAF7"/>
+        <path d="M0 60 L60 55 L120 70 L180 80 L220 78 L220 110 L0 110 Z" fill="rgba(42,111,168,0.30)" stroke="#2A6FA8" strokeWidth="1"/>
+        <path d="M0 75 L60 72 L120 85 L180 92 L220 90 L220 110 L0 110 Z" fill="rgba(42,111,168,0.20)" stroke="#2A6FA8" strokeWidth="0.8"/>
+        <circle cx="100" cy="68" r="4" fill="#D17C00" stroke="#FAFAF7" strokeWidth="1.5"/>
+      </>
+    ) : (
+      <>
+        <rect x="0" y="0" width="220" height="110" fill={`url(#thumb-${kind})`}/>
+        <text x="8" y="100" fontFamily="IBM Plex Mono" fontSize="9" fill="#2A6FA8">SYN · 2025-09-14</text>
+      </>
+    )}
+  </svg>
+);
+
+const EvidenceCard = ({ ev, onCite }) => {
+  const tierColor = `var(--tier-${ev.tier})`;
+  return (
+    <article className={`evidence-card evidence-card-${ev.tier}`} aria-labelledby={`ec-${ev.id}-title`}>
+      <header className="evidence-card-head">
+        <div className="evidence-card-source">
+          <TierGlyph tier={ev.tier} size={11} color={tierColor} />
+          <span className="evidence-card-source-label">{ev.source}</span>
+        </div>
+        <span className="evidence-card-vintage" title="Data vintage">v. {ev.vintage}</span>
+      </header>
+      <h4 id={`ec-${ev.id}-title`} className="evidence-card-title">{ev.title}</h4>
+
+      <div className="evidence-card-body">
+        {ev.fmt === "scalar" && (
+          <div className="evidence-scalar">
+            <div className="evidence-scalar-value" style={{ color: tierColor }}>{ev.scalar.value}</div>
+            <div className="evidence-scalar-unit">{ev.scalar.unit}</div>
+            {ev.scalar.aux && <div className="evidence-scalar-aux">{ev.scalar.aux}</div>}
+          </div>
+        )}
+        {ev.fmt === "table" && (
+          <table className="evidence-table">
+            <thead><tr><th>id</th><th>elev.</th><th>dist.</th></tr></thead>
+            <tbody>
+              {ev.table.map((row, i) => (
+                <tr key={i}>{row.map((c, j) => <td key={j}>{c}</td>)}</tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+        {ev.fmt === "spark" && (
+          <div className="evidence-spark">
+            <div className="evidence-spark-headline" style={{ color: tierColor }}>{ev.headline}</div>
+            <Spark data={ev.spark} color={tierColor}/>
+            <div className="evidence-scalar-aux">{ev.sub}</div>
+          </div>
+        )}
+        {ev.fmt === "histogram" && (
+          <div className="evidence-spark">
+            <div className="evidence-spark-headline" style={{ color: tierColor }}>{ev.headline}</div>
+            <Histogram data={ev.months} color={tierColor}/>
+            <div className="evidence-scalar-aux">{ev.sub}</div>
+          </div>
+        )}
+        {ev.fmt === "forecast" && (
+          <div className="evidence-spark">
+            <ForecastChart data={ev.forecast} color={tierColor}/>
+            <div className="evidence-scalar-aux">inches MSL · 17th–83rd %ile range, median line</div>
+          </div>
+        )}
+        {ev.fmt === "thumb" && (
+          <div className="evidence-thumb">
+            <ThumbStripe kind={ev.thumb}/>
+            <div className="evidence-scalar-aux">{ev.sub}</div>
+          </div>
+        )}
+      </div>
+
+      <footer className="evidence-card-foot">
+        <button
+          type="button"
+          className="evidence-card-cite"
+          onClick={() => onCite?.(ev.citeId)}
+          title={`Open citation ${ev.citeId} in drawer`}
+        >
+          <span className="evidence-card-docid">{ev.docId}</span>
+          <span className="evidence-card-cite-arrow" aria-hidden="true">→</span>
+        </button>
+        <TierBadge tier={ev.tier} compact />
+      </footer>
+    </article>
+  );
+};
+
+const EvidenceGrid = ({ onCite }) => (
+  <section className="evidence-grid" aria-label="Evidence cards">
+    <div className="evidence-grid-head">
+      <span className="section-label">Evidence · 8 cards</span>
+      <span className="evidence-grid-meta">
+        <span className="evidence-grid-tally"><TierGlyph tier="empirical" size={9}/> 3</span>
+        <span className="evidence-grid-tally"><TierGlyph tier="modeled" size={9}/> 3</span>
+        <span className="evidence-grid-tally"><TierGlyph tier="proxy" size={9}/> 2</span>
+        <span className="evidence-grid-tally"><TierGlyph tier="synthetic" size={9}/> 1</span>
+      </span>
+    </div>
+    <div className="evidence-grid-rail">
+      {EVIDENCE.map((ev) => (
+        <EvidenceCard key={ev.id} ev={ev} onCite={onCite}/>
+      ))}
+    </div>
+  </section>
+);
+
+Object.assign(window, { EvidenceGrid, EvidenceCard });

docs/design_handoff/design_files/findings.jsx

@@ -0,0 +1,848 @@
+/* Riprap v0.4.4 · Findings region.
+   Card grammar: a small set of body variants any Stone's specialists render into.
+   Variants: tabular, headline, visualization, raster-thumbnail, time-series,
+             composite-register (novel), comparison (novel · EMP vs SYN), text-headline.
+   Common chrome: header (source badge + tier glyph + vintage) → title → body → footer (source ID + tier badge).
+*/
+
+const { useState: useFi, useMemo: useFiMemo } = React;
+
+/* ─── Card data ─── */
+
+const CARDS_BY_QUERY = {
+  redhook: {
+    cornerstone: ["fc-fema", "fc-hwm", "fc-stormwater"],
+    keystone:    ["fc-register-rh"],
+    touchstone:  ["fc-floodnet", "fc-311", "fc-prithvi", "fc-nws"],
+    lodestone:   ["fc-ttm-surge", "fc-npcc4"],
+    capstone:    ["fc-mellea-meta"],
+  },
+  bronx: {
+    cornerstone: ["fc-fema-x", "fc-stormwater-bx"],
+    keystone:    ["fc-register-bx"],
+    touchstone:  ["fc-311-bx", "fc-nws"],
+    lodestone:   [],   /* full-Stone silence: address is inland, no Battery surge relevance */
+    capstone:    ["fc-mellea-meta-bx"],
+  },
+};
+
+const CARDS = {
+  /* ── Cornerstone ── */
+  "fc-fema": {
+    stone: "cornerstone", tier: "modeled", variant: "headline",
+    source: "FEMA", agency: "Federal Emergency Management Agency",
+    title: "Preliminary FIRM, panel 36047C0207G",
+    headline: "Zone AE", subhead: "BFE 11 ft NAVD88 · freeboard +4.8 ft",
+    body: "Address sits within the regulatory 1% annual-chance floodplain. Base Flood Elevation 11.0 ft NAVD88; first floor must be at or above this datum for NFIP rating.",
+    docId: "FEMA-FIRM-36047C0207G", vintage: "2024-09", citeId: "c4",
+    mapKey: "fema-ae",
+  },
+  "fc-hwm": {
+    stone: "cornerstone", tier: "empirical", variant: "tabular",
+    source: "USGS", agency: "U.S. Geological Survey",
+    title: "Post-Sandy high-water marks within 500 ft",
+    columns: ["id", "elev.", "dist."],
+    rows: [
+      ["HWM-NY-3081", "7.4 ft NAVD88", "0.18 mi"],
+      ["HWM-NY-3082", "8.1 ft NAVD88", "0.22 mi"],
+      ["HWM-NY-3105", "6.8 ft NAVD88", "0.31 mi"],
+    ],
+    sub: "3 marks · max 8.1 ft · surveyed Nov 2012",
+    docId: "USGS-OFR-2013-1234", vintage: "2013-05", citeId: "c1",
+    mapKey: "hwm",
+  },
+  "fc-stormwater": {
+    stone: "cornerstone", tier: "modeled", variant: "raster",
+    source: "NYC DEP", agency: "NYC Dept. of Environmental Protection",
+    title: "Stormwater Flood Map · moderate scenario",
+    rasterKind: "stormwater",
+    sub: "2.13 in/hr · ponding ≥4 in W half of lot · routed toward Imlay St",
+    docId: "NYCDEP-SWFM-2024", vintage: "2024-06", citeId: "c5",
+    mapKey: "stormwater",
+  },
+  "fc-fema-x": {
+    stone: "cornerstone", tier: "modeled", variant: "headline",
+    source: "FEMA", agency: "Federal Emergency Management Agency",
+    title: "Preliminary FIRM, panel 36005C0152F",
+    headline: "Zone X", subhead: "outside the 1% annual-chance floodplain",
+    body: "Address is in Zone X, the unshaded 0.2% annual-chance area or higher ground. NFIP coverage optional; insurance not mandated.",
+    docId: "FEMA-FIRM-36005C0152F", vintage: "2024-09", citeId: "cx1",
+    mapKey: "fema-x",
+  },
+  "fc-stormwater-bx": {
+    stone: "cornerstone", tier: "modeled", variant: "raster",
+    source: "NYC DEP", agency: "NYC Dept. of Environmental Protection",
+    title: "Stormwater Flood Map · moderate scenario",
+    rasterKind: "stormwater-dry",
+    sub: "2.13 in/hr · no ponding ≥4 in within parcel · upslope grade 3.4%",
+    docId: "NYCDEP-SWFM-2024", vintage: "2024-06", citeId: "cx2",
+    mapKey: "stormwater",
+  },
+
+  /* ── Keystone (composite register) ── */
+  "fc-register-rh": {
+    stone: "keystone", tier: "empirical", variant: "register",
+    source: "NYC OpenData", agency: "NYC OpenData · multi-agency join",
+    title: "Nearby exposed assets",
+    registers: [
+      { reg: "MTA",   tier: "empirical", label: "Smith–9 St subway entrance",   detail: "0.34 mi · F · G",       sourceId: "MTA-ENT-N048",  vintage: "2025-11", note: null },
+      { reg: "NYCHA", tier: "empirical", label: "Red Hook East Houses",         detail: "0.41 mi · 2,878 res.", sourceId: "NYCHA-RHE",     vintage: "2025-Q3", note: null },
+      { reg: "NYCHA", tier: "empirical", label: "Red Hook West Houses",         detail: "0.52 mi · 3,142 res.", sourceId: "NYCHA-RHW",     vintage: "2025-Q3", note: null },
+      { reg: "DOE",   tier: "empirical", label: "PS 27 Agnes Y. Humphrey",      detail: "0.29 mi · 271 K-5",    sourceId: "DOE-K027",      vintage: "2024-25", note: null },
+      { reg: "DOH",   tier: "empirical", label: null,                            detail: null,                   sourceId: null,             vintage: null,       note: "no acute-care hospital within 1.0 mi (silent)" },
+      { reg: "PLUTO", tier: "empirical", label: "Lot 36047 / 521 / 7",          detail: "BIN 3018472 · MX-1",   sourceId: "PLUTO-2024v2",   vintage: "2024-12", note: null },
+    ],
+    sub: "5 of 6 registers fired · 1 silent · joined within 1.0 mi",
+    docId: "RIPRAP-EXP-RH80", vintage: "2026-05", citeId: "c-reg-rh",
+    mapKey: "registers",
+  },
+  "fc-register-bx": {
+    stone: "keystone", tier: "empirical", variant: "register",
+    source: "NYC OpenData", agency: "NYC OpenData · multi-agency join",
+    title: "Nearby exposed assets",
+    registers: [
+      { reg: "MTA",   tier: "empirical", label: "Pelham Pkwy 5 station",       detail: "0.18 mi · 5",          sourceId: "MTA-ENT-N122",  vintage: "2025-11", note: null },
+      { reg: "NYCHA", tier: "empirical", label: null,                            detail: null,                   sourceId: null,             vintage: null,       note: "no NYCHA developments within 1.0 mi (silent)" },
+      { reg: "DOE",   tier: "empirical", label: "PS 89 Cinco Estrellas",       detail: "0.22 mi · 612 K-5",    sourceId: "DOE-X089",      vintage: "2024-25", note: null },
+      { reg: "DOH",   tier: "empirical", label: "Jacobi Medical Center",       detail: "0.51 mi · 457 beds",   sourceId: "DOH-JMC",        vintage: "2025-Q1", note: null },
+      { reg: "PLUTO", tier: "empirical", label: "Lot 36005 / 4382 / 18",       detail: "BIN 2098441 · R5",     sourceId: "PLUTO-2024v2",   vintage: "2024-12", note: null },
+    ],
+    sub: "4 of 5 registers fired · 1 silent · joined within 1.0 mi",
+    docId: "RIPRAP-EXP-BX12", vintage: "2026-05", citeId: "cx-reg",
+    mapKey: "registers",
+  },
+
+  /* ── Touchstone ── */
+  "fc-floodnet": {
+    stone: "touchstone", tier: "empirical", variant: "spark",
+    source: "FloodNet", agency: "FloodNet NYC sensor network",
+    title: "Sensor BK-RH-002, monthly above-curb events",
+    headline: "7 events", subhead: "Jun 2024 → Apr 2026 · peak 14.3 cm",
+    spark: [0,0,1,0,2,1,0,0,3,0,1,0,0,0,2,1,0,0,1,0,2,4,1,1],
+    sparkSub: "Sensor located 0.21 mi N at Coffey & Van Brunt. Above-curb depth in cm; events ≥2 cm.",
+    docId: "FN-BK-RH-002", vintage: "2026-04", citeId: "c3",
+    mapKey: "floodnet",
+  },
+  "fc-311": {
+    stone: "touchstone", tier: "proxy", variant: "histogram",
+    source: "NYC 311", agency: "NYC 311 service requests",
+    title: "Recent 311 flood complaints, BK CB6",
+    headline: "89 calls", subhead: "2019–2025 · seasonal cluster Aug–Oct",
+    histogram: [3,2,1,0,1,4,7,12,18,11,5,3,4,2,1,0,2,3,8,9,4,2,1,0],
+    sparkSub: "Filtered to complaint types: Sewer (Backup), Street Flooding, Catch Basin Clogged. Within 200 m of address.",
+    docId: "NYC311-FLD-CB6", vintage: "2025-12", citeId: "c7",
+    mapKey: "complaints",
+  },
+  "fc-311-bx": {
+    stone: "touchstone", tier: "proxy", variant: "histogram",
+    source: "NYC 311", agency: "NYC 311 service requests",
+    title: "Recent 311 flood complaints, BX CB11",
+    headline: "12 calls", subhead: "2019–2025 · sparse · no seasonal cluster",
+    histogram: [0,0,1,0,0,1,0,1,2,0,0,0,1,0,0,0,1,0,2,1,1,0,0,1],
+    sparkSub: "Filtered to complaint types: Sewer (Backup), Street Flooding, Catch Basin Clogged. Within 200 m of address.",
+    docId: "NYC311-FLD-CB11", vintage: "2025-12", citeId: "cx7",
+    mapKey: "complaints",
+  },
+  "fc-prithvi": {
+    stone: "touchstone", tier: "modeled", variant: "raster-pred",
+    source: "Prithvi-NYC", agency: "Prithvi-NYC-Pluvial v2 · IBM/NASA × Riprap",
+    title: "Pluvial flood prediction, current Sentinel-2 chip",
+    rasterKind: "prithvi",
+    headline: "0.3% flooded", subhead: "no flooding apparent · scene 2026-05-02",
+    sub: "Model interpretation of imagery, not real-time observation. Confidence-mean 0.84 across non-flooded pixels.",
+    docId: "PRITHVI-NYC-PLUV-V2-20260502", vintage: "2026-05-02",
+    illustrative: true, citeId: "c-prithvi",
+    mapKey: "prithvi",
+  },
+  "fc-nws": {
+    stone: "touchstone", tier: "empirical", variant: "scalars",
+    source: "NWS KNYC", agency: "NOAA · National Weather Service",
+    title: "Current weather, station KNYC",
+    scalars: [
+      { value: "0.02 in", label: "precip · last 24h" },
+      { value: "67°F",    label: "temp · current" },
+      { value: "PC", label: "conditions" },
+    ],
+    sub: "Observation timestamp 2026-05-05 14:18 ET. Central Park station; not point-of-query.",
+    docId: "NWS-KNYC", vintage: "2026-05-05", citeId: "c-nws",
+    mapKey: "nws",
+  },
+
+  /* ── Lodestone ── */
+  "fc-ttm-surge": {
+    stone: "lodestone", tier: "modeled", variant: "timeseries",
+    source: "Granite TTM r2", agency: "IBM Granite-TimeSeries · Riprap fine-tune",
+    title: "Storm surge nowcast at The Battery, 96-hour horizon",
+    timeseries: { hours: 96, peak: { x: 38, y: 47 }, peakLabel: "+47 cm @ +38h" },
+    headline: "+47 cm", subhead: "peak surge residual · Wed 04:00 ET",
+    sub: "Nowcast applies city-wide via NOAA station 8518750. Not localized to query address. Residual above harmonic tide.",
+    docId: "ttm_battery_surge_v2", vintage: "2026-05-05 12:00 ET",
+    spatialNote: "regional · The Battery, not point-of-query",
+    citeId: "c-ttm",
+    mapKey: null,  /* TTM does not render on map; lives only as Lodestone card */
+  },
+  "fc-npcc4": {
+    stone: "lodestone", tier: "modeled", variant: "forecast",
+    source: "NPCC4", agency: "NYC Panel on Climate Change, 4th Assessment",
+    title: "Sea-level rise projections, Lower NY Harbor",
+    forecast: [
+      { year: 2030, low: 4,  mid: 6,  high: 9   },
+      { year: 2050, low: 13, mid: 22, high: 30  },
+      { year: 2080, low: 28, mid: 49, high: 75  },
+      { year: 2100, low: 38, mid: 71, high: 114 },
+    ],
+    sub: "inches MSL · 17th–83rd %ile range, median line. Battery tide-gauge baseline.",
+    docId: "NPCC4-Ch3-Tbl3.2", vintage: "2024-03", citeId: "c6",
+    mapKey: null,
+  },
+
+  /* ── Capstone meta ── */
+  "fc-mellea-meta": {
+    stone: "capstone", tier: "modeled", variant: "meta",
+    source: "Mellea", agency: "Capstone synthesis · grounding check",
+    title: "Briefing reconciliation",
+    metaRows: [
+      { k: "Mellea reroll",     v: "1 attempt" },
+      { k: "Grounding checks",  v: "4 / 4 passed" },
+      { k: "Citations resolved",v: "11 / 11" },
+      { k: "RAG → GLiNER",      v: "9 entities · 0 unresolved" },
+    ],
+    sub: "Capstone produces prose, not cards. This meta-card summarizes the reconciler chain that wrote the four-section briefing above.",
+    docId: "RIPRAP-CAP-RH80", vintage: "2026-05-05 14:22 ET", citeId: null,
+    mapKey: null,
+  },
+  "fc-mellea-meta-bx": {
+    stone: "capstone", tier: "modeled", variant: "meta",
+    source: "Mellea", agency: "Capstone synthesis · grounding check",
+    title: "Briefing reconciliation",
+    metaRows: [
+      { k: "Mellea reroll",     v: "1 attempt" },
+      { k: "Grounding checks",  v: "4 / 4 passed" },
+      { k: "Citations resolved",v: "6 / 6" },
+      { k: "RAG → GLiNER",      v: "5 entities · 0 unresolved" },
+    ],
+    sub: "Capstone produces prose, not cards. This meta-card summarizes the reconciler chain.",
+    docId: "RIPRAP-CAP-BX12", vintage: "2026-05-05 14:24 ET", citeId: null,
+    mapKey: null,
+  },
+};
+
+/* Comparison card · only included when "showComparison" is on (novel variant the brief flags as v1.1 idea). */
+const COMPARISON_CARD = {
+  stone: "keystone", tier: "synthetic", variant: "comparison",
+  source: "TerraMind × DOITT", agency: "TerraMind v1.2 Buildings × NYC DOITT footprints",
+  title: "Building footprint · documented vs. interpreted",
+  left:  { tier: "empirical",  label: "DOITT (documented)",   value: "31.4%", aux: "112 building polygons in chip" },
+  right: { tier: "synthetic",  label: "TerraMind (interpreted)", value: "36.2%", aux: "126 components · Sentinel-2 2026-05-02" },
+  delta: "+4.8 pp · model sees ~14 unrecorded structures",
+  sub: "Difference layer. v1.1 idea: surface where the foundation model sees buildings the catalogue doesn't, or vice versa. Illustrative — not part of v0.4.4 production output.",
+  docId: "RIPRAP-CMP-RH80-BLDG", vintage: "2026-05-02", citeId: null,
+  illustrative: true, mapKey: "buildings",
+};
+
+/* ─── Stone metadata ─── */
+
+const STONE_META = {
+  cornerstone: { name: "Cornerstone", role: "the hazard reader",  tag: "what NYC's ground remembers" },
+  keystone:    { name: "Keystone",    role: "the asset register", tag: "what's exposed" },
+  touchstone:  { name: "Touchstone",  role: "the live observer",  tag: "what's happening now" },
+  lodestone:   { name: "Lodestone",   role: "the projector",      tag: "what's coming" },
+  capstone:    { name: "Capstone",    role: "the synthesizer",    tag: "writes it all down with citations" },
+};
+
+const STONE_ORDER = ["cornerstone", "keystone", "touchstone", "lodestone", "capstone"];
+
+/* ─── Tier badge (footer) ─── */
+
+const FiTierBadge = ({ tier }) => {
+  const map = { empirical: "EMP", modeled: "MOD", proxy: "PRX", synthetic: "SYN" };
+  return (
+    <span className={`fc-tier-badge fc-tier-badge-${tier}`} aria-label={`epistemic tier ${map[tier]}`}>
+      <window.TierGlyph tier={tier} size={9}/>
+      <span>{map[tier]}</span>
+    </span>
+  );
+};
+
+/* ─── Body variants ─── */
+
+const BodyHeadline = ({ c }) => (
+  <div className="fc-body fc-body-headline">
+    <div className="fc-headline" style={{ color: `var(--tier-${c.tier})` }}>{c.headline}</div>
+    <div className="fc-subhead">{c.subhead}</div>
+    {c.body && <p className="fc-body-prose">{c.body}</p>}
+  </div>
+);
+
+const BodyTabular = ({ c }) => (
+  <div className="fc-body fc-body-tabular">
+    <table className="fc-table">
+      <thead><tr>{c.columns.map((h, i) => <th key={i}>{h}</th>)}</tr></thead>
+      <tbody>
+        {c.rows.map((row, i) => (
+          <tr key={i}>{row.map((cell, j) => <td key={j}>{cell}</td>)}</tr>
+        ))}
+      </tbody>
+    </table>
+    {c.sub && <div className="fc-body-sub">{c.sub}</div>}
+  </div>
+);
+
+const BodySpark = ({ c }) => {
+  const data = c.spark || c.histogram;
+  const max = Math.max(...data, 1);
+  const w = 240, h = 38, n = data.length;
+  return (
+    <div className="fc-body fc-body-spark">
+      <div className="fc-headline" style={{ color: `var(--tier-${c.tier})` }}>{c.headline}</div>
+      <div className="fc-subhead">{c.subhead}</div>
+      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} preserveAspectRatio="none" aria-hidden="true">
+        {data.map((v, i) => (
+          <rect
+            key={i}
+            x={(i / n) * w + 0.5}
+            y={h - (v / max) * h}
+            width={Math.max(2, w / n - 1.5)}
+            height={(v / max) * h}
+            fill={`var(--tier-${c.tier})`}
+          />
+        ))}
+      </svg>
+      {c.sparkSub && <div className="fc-body-sub">{c.sparkSub}</div>}
+    </div>
+  );
+};
+
+const BodyForecast = ({ c }) => {
+  const data = c.forecast;
+  const w = 240, h = 88, pad = 6;
+  const xs = data.map((_, i) => pad + (i / (data.length - 1)) * (w - pad * 2));
+  const max = Math.max(...data.map(d => d.high));
+  const y = (v) => h - pad - (v / max) * (h - pad * 2 - 12);
+  const path = (key) => xs.map((x, i) => `${i ? "L" : "M"} ${x} ${y(data[i][key])}`).join(" ");
+  const range = xs.map((x, i) => ({ x, lo: y(data[i].low), hi: y(data[i].high) }));
+  const areaD = `M ${range.map(r => `${r.x} ${r.lo}`).join(" L ")} L ${[...range].reverse().map(r => `${r.x} ${r.hi}`).join(" L ")} Z`;
+  const color = `var(--tier-${c.tier})`;
+  return (
+    <div className="fc-body fc-body-forecast">
+      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} aria-hidden="true">
+        <path d={areaD} fill={color} fillOpacity="0.18"/>
+        <path d={path("mid")} fill="none" stroke={color} strokeWidth="1.5"/>
+        {data.map((d, i) => (
+          <g key={i}>
+            <circle cx={xs[i]} cy={y(d.mid)} r="2.2" fill={color}/>
+            <text x={xs[i]} y={h - 1} fontSize="9" fontFamily="IBM Plex Mono" textAnchor="middle" fill="#6B6B6B">{d.year}</text>
+          </g>
+        ))}
+      </svg>
+      {c.sub && <div className="fc-body-sub">{c.sub}</div>}
+    </div>
+  );
+};
+
+const BodyTimeseries = ({ c }) => {
+  const w = 240, h = 84, pad = 6;
+  const hours = c.timeseries.hours;
+  /* Synthetic surge curve: harmonic baseline + storm pulse around peak */
+  const points = Array.from({ length: hours + 1 }, (_, i) => {
+    const t = i;
+    const harmonic = 6 * Math.sin((t / 12.42) * Math.PI * 2);
+    const pulse = 38 * Math.exp(-Math.pow((t - c.timeseries.peak.x) / 12, 2));
+    return { x: t, y: harmonic + pulse + 4 };
+  });
+  const maxY = Math.max(...points.map(p => p.y), c.timeseries.peak.y);
+  const minY = Math.min(...points.map(p => p.y), -10);
+  const sx = (t) => pad + (t / hours) * (w - pad * 2);
+  const sy = (v) => h - pad - 14 - ((v - minY) / (maxY - minY)) * (h - pad * 2 - 14);
+  const pathD = points.map((p, i) => `${i ? "L" : "M"} ${sx(p.x)} ${sy(p.y)}`).join(" ");
+  const color = `var(--tier-${c.tier})`;
+  return (
+    <div className="fc-body fc-body-timeseries">
+      <div className="fc-ts-header">
+        <span className="fc-headline" style={{ color }}>{c.headline}</span>
+        <span className="fc-subhead">{c.subhead}</span>
+      </div>
+      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} aria-hidden="true">
+        <line x1={pad} y1={sy(0)} x2={w - pad} y2={sy(0)} stroke="#C9C9C5" strokeWidth="0.5" strokeDasharray="2 2"/>
+        <path d={pathD} fill="none" stroke={color} strokeWidth="1.4"/>
+        <circle cx={sx(c.timeseries.peak.x)} cy={sy(c.timeseries.peak.y)} r="3" fill={color}/>
+        <text x={sx(c.timeseries.peak.x)} y={sy(c.timeseries.peak.y) - 6} fontSize="9" fontFamily="IBM Plex Mono" textAnchor="middle" fill={color}>{c.timeseries.peakLabel}</text>
+        <text x={pad} y={h - 2} fontSize="8" fontFamily="IBM Plex Mono" fill="#6B6B6B">now</text>
+        <text x={w - pad} y={h - 2} fontSize="8" fontFamily="IBM Plex Mono" textAnchor="end" fill="#6B6B6B">+96h</text>
+      </svg>
+      <div className="fc-body-sub">
+        <span className="fc-spatial-note">{c.spatialNote}</span>
+        <span>{c.sub}</span>
+      </div>
+    </div>
+  );
+};
+
+const BodyScalars = ({ c }) => (
+  <div className="fc-body fc-body-scalars">
+    <div className="fc-scalars-row">
+      {c.scalars.map((s, i) => (
+        <div key={i} className="fc-scalar-cell">
+          <div className="fc-scalar-value" style={{ color: `var(--tier-${c.tier})` }}>{s.value}</div>
+          <div className="fc-scalar-label">{s.label}</div>
+        </div>
+      ))}
+    </div>
+    {c.sub && <div className="fc-body-sub">{c.sub}</div>}
+  </div>
+);
+
+/* Raster thumbnail · hand-drawn SVG approximations using each layer's conventional palette. */
+const RasterThumb = ({ kind }) => {
+  const w = 240, h = 120;
+  if (kind === "stormwater") {
+    return (
+      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} aria-hidden="true" style={{ display: "block" }}>
+        <rect width={w} height={h} fill="#F2F2EE"/>
+        {/* street grid */}
+        <g stroke="#D9D6CC" strokeWidth="0.6">
+          <line x1="0" y1="40" x2={w} y2="40"/><line x1="0" y1="80" x2={w} y2="80"/>
+          <line x1="60" y1="0" x2="60" y2={h}/><line x1="160" y1="0" x2="160" y2={h}/>
+        </g>
+        {/* ponding */}
+        <path d="M20 50 Q 60 38 90 56 Q 120 76 150 64 Q 180 50 180 86 Q 130 100 70 96 Q 30 92 20 76 Z" fill="rgba(42,111,168,0.32)" stroke="#2A6FA8" strokeWidth="0.7"/>
+        <path d="M40 60 Q 80 54 110 70 Q 140 84 160 78 Q 165 90 130 92 Q 80 90 50 82 Z" fill="rgba(11,83,148,0.36)" stroke="#0B5394" strokeWidth="0.6"/>
+        <circle cx="120" cy="74" r="3.2" fill="#D17C00" stroke="#FAFAF7" strokeWidth="1.3"/>
+        <text x={w - 6} y={h - 5} fontSize="8" fontFamily="IBM Plex Mono" textAnchor="end" fill="#6B6B6B">2.13 in/hr · MOD</text>
+      </svg>
+    );
+  }
+  if (kind === "stormwater-dry") {
+    return (
+      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} aria-hidden="true" style={{ display: "block" }}>
+        <rect width={w} height={h} fill="#F2F2EE"/>
+        <g stroke="#D9D6CC" strokeWidth="0.6">
+          <line x1="0" y1="40" x2={w} y2="40"/><line x1="0" y1="80" x2={w} y2="80"/>
+          <line x1="60" y1="0" x2="60" y2={h}/><line x1="160" y1="0" x2="160" y2={h}/>
+        </g>
+        <path d="M180 92 Q 200 88 215 96 Q 220 105 200 104 Q 185 102 180 96 Z" fill="rgba(42,111,168,0.18)" stroke="#2A6FA8" strokeWidth="0.5" strokeDasharray="2 2"/>
+        <circle cx="120" cy="60" r="3.2" fill="#D17C00" stroke="#FAFAF7" strokeWidth="1.3"/>
+        <text x={w - 6} y={h - 5} fontSize="8" fontFamily="IBM Plex Mono" textAnchor="end" fill="#6B6B6B">no ponding · MOD</text>
+      </svg>
+    );
+  }
+  if (kind === "prithvi") {
+    /* Prithvi: 50% Sentinel RGB · 50% pluvial mask. Mostly dry → speckle, no flood polygons. */
+    return (
+      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} aria-hidden="true" style={{ display: "block" }}>
+        <defs>
+          <pattern id="s2-rgb" x="0" y="0" width="6" height="6" patternUnits="userSpaceOnUse">
+            <rect width="6" height="6" fill="#7A8E6A"/>
+            <rect x="0" y="0" width="3" height="3" fill="#8D9C7A"/>
+            <rect x="3" y="3" width="3" height="3" fill="#69795D"/>
+          </pattern>
+        </defs>
+        <rect width={w} height={h} fill="url(#s2-rgb)"/>
+        {/* roads / impervious */}
+        <rect x="0" y="55" width={w} height="6" fill="#A8A496"/>
+        <rect x="115" y="0" width="8" height={h} fill="#A8A496"/>
+        {/* tiny flood blob (0.3%) */}
+        <ellipse cx="50" cy="92" rx="6" ry="3" fill="#2A6FA8" fillOpacity="0.65"/>
+        <text x="6" y="14" fontSize="9" fontFamily="IBM Plex Mono" fill="#FAFAF7">PRITHVI · 0.3%</text>
+        <text x={w - 6} y={h - 5} fontSize="8" fontFamily="IBM Plex Mono" textAnchor="end" fill="#FAFAF7">scene 2026-05-02</text>
+      </svg>
+    );
+  }
+  if (kind === "lulc") {
+    return (
+      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} aria-hidden="true" style={{ display: "block" }}>
+        <rect width={w} height={h} fill="#F2F2EE"/>
+        {/* developed (red) blocks */}
+        <rect x="0" y="0" width="80" height="60" fill="#C66"/>
+        <rect x="80" y="0" width="60" height="60" fill="#C66"/>
+        <rect x="140" y="0" width="100" height="38" fill="#C66"/>
+        {/* water */}
+        <rect x="140" y="38" width="100" height="22" fill="#5B7FB4"/>
+        {/* developed lower */}
+        <rect x="0" y="60" width="100" height="60" fill="#C66"/>
+        {/* forest patch */}
+        <rect x="100" y="60" width="50" height="40" fill="#5B8A4A"/>
+        {/* herbaceous */}
+        <rect x="150" y="60" width="50" height="60" fill="#D9C75A"/>
+        <rect x="200" y="60" width="40" height="60" fill="#C66"/>
+        <rect x="100" y="100" width="50" height="20" fill="#A89A78"/>
+        <text x="6" y="14" fontSize="9" fontFamily="IBM Plex Mono" fill="#FAFAF7">LULC · TerraMind</text>
+        <text x={w - 6} y={h - 5} fontSize="8" fontFamily="IBM Plex Mono" textAnchor="end" fill="#FAFAF7">scene 2026-05-02</text>
+      </svg>
+    );
+  }
+  if (kind === "buildings") {
+    return (
+      <svg viewBox={`0 0 ${w} ${h}`} width="100%" height={h} aria-hidden="true" style={{ display: "block" }}>
+        <rect width={w} height={h} fill="#3A3A38"/>
+        {/* building polygons */}
+        {[
+          [10,10,28,18],[42,10,30,16],[78,10,40,22],[124,10,32,18],[162,10,30,18],[198,10,32,18],
+          [10,32,28,16],[42,30,30,18],[124,32,32,16],[162,32,30,16],[198,32,32,16],
+          [10,55,28,18],[42,55,30,18],[78,55,40,18],[124,55,32,18],[162,55,30,18],[198,55,32,18],
+          [10,80,28,16],[42,80,30,16],[78,80,40,16],[124,80,32,16],[162,80,30,16],
+          [10,100,28,12],[42,100,30,12],[78,100,40,12],
+        ].map(([x,y,bw,bh], i) => (
+          <rect key={i} x={x} y={y} width={bw} height={bh} fill="rgba(42,111,168,0.55)" stroke="#2A6FA8" strokeWidth="0.4"/>
+        ))}
+        <text x="6" y="14" fontSize="9" fontFamily="IBM Plex Mono" fill="#FAFAF7">BLDG · TerraMind</text>
+        <text x={w - 6} y={h - 5} fontSize="8" fontFamily="IBM Plex Mono" textAnchor="end" fill="#FAFAF7">36.2% built</text>
+      </svg>
+    );
+  }
+  return <div className="fc-thumb-placeholder">raster preview</div>;
+};
+
+const BodyRaster = ({ c }) => (
+  <div className="fc-body fc-body-raster">
+    <div className="fc-raster-frame">
+      <RasterThumb kind={c.rasterKind}/>
+      {c.illustrative && <span className="fc-illustrative" title="Illustrative rendering, not source pixels">illustrative</span>}
+    </div>
+    {c.headline && <div className="fc-raster-headline"><span style={{ color: `var(--tier-${c.tier})` }}>{c.headline}</span> · {c.subhead}</div>}
+    {c.sub && <div className="fc-body-sub">{c.sub}</div>}
+  </div>
+);
+
+const BodyRegister = ({ c, density }) => (
+  <div className="fc-body fc-body-register">
+    <ul className="fc-reg-list">
+      {c.registers.map((r, i) => (
+        <li key={i} className={`fc-reg-row ${r.label ? "" : "is-silent"}`}>
+          <span className="fc-reg-tag">{r.reg}</span>
+          {r.label ? (
+            <>
+              <span className="fc-reg-label" title={r.detail ? `${r.label} , ${r.detail}` : r.label}>{r.label}</span>
+              <span className="fc-reg-source">{r.sourceId}</span>
+            </>
+          ) : (
+            <span className="fc-reg-silent">{r.note}</span>
+          )}
+        </li>
+      ))}
+    </ul>
+    {c.sub && <div className="fc-body-sub">{c.sub}</div>}
+  </div>
+);
+
+/* ─── Card-grammar reference: one stub per variant ─── */
+const GRAMMAR_STUBS = [
+  { variant: "headline",    tier: "modeled",    source: "FEMA",          title: "Single big number, scenario-tagged",      headline: "Zone AE", subhead: "preliminary FIRM, panel ID", sub: "Use when the answer is one categorical state.",                  docId: "DS-HEADLINE",   vintage: "spec" },
+  { variant: "tabular",     tier: "empirical",  source: "USGS",          title: "Small table of observations",             columns: ["id", "value", "dist."], rows: [["ROW-001", "1.2 m", "0.18 mi"], ["ROW-002", "0.9 m", "0.32 mi"], ["ROW-003", "0.7 m", "0.41 mi"]], sub: "Use when 3,8 records each carry the same fields.", docId: "DS-TABULAR",    vintage: "spec" },
+  { variant: "scalars",     tier: "empirical",  source: "NWS",           title: "Trio of scalar readings",                 scalars: [{ value: "0.02 in", label: "precip · 24h" }, { value: "11 mph", label: "wind" }, { value: "63°F", label: "temp" }], sub: "Use for current-state dashboards.", docId: "DS-SCALARS", vintage: "spec" },
+  { variant: "spark",       tier: "empirical",  source: "FloodNet",      title: "Sparkline of recent events",              headline: "n events", subhead: "window · peak", spark: [1,2,4,3,7,12,8,5,3,2,4,9,6], docId: "DS-SPARK", vintage: "spec" },
+  { variant: "histogram",   tier: "proxy",      source: "NYC 311",       title: "Histogram of binned counts",              headline: "n calls",  subhead: "window · seasonal note", histogram: [3,2,1,0,1,4,7,12,18,11,5,3,4,2,1,0,2,3,8,9,4,2,1,0], docId: "DS-HIST", vintage: "spec" },
+  { variant: "timeseries",  tier: "modeled",    source: "Granite TTM",   title: "Forecast curve with horizon",             headline: "+0.41 m peak", subhead: "+38h · 90% CI", timeseries: { hours: 96, peak: { x: 38, y: 41 }, peakLabel: "+0.41 m" }, spatialNote: "regional", sub: "Spatial-index callout when station ≠ point-of-query.", docId: "DS-TS", vintage: "spec" },
+  { variant: "forecast",    tier: "modeled",    source: "NPCC4",         title: "Long-horizon scenario projections",       forecast: [{ year: 2030, low: 4, mid: 6, high: 9 }, { year: 2050, low: 13, mid: 22, high: 30 }, { year: 2100, low: 38, mid: 71, high: 114 }], sub: "Use for decadal+ uncertainty cones.", docId: "DS-FCST", vintage: "spec" },
+  { variant: "raster",      tier: "modeled",    source: "NYC DEP",       title: "Raster snapshot, mapped layer",           rasterKind: "stormwater", headline: "ponding", subhead: "scenario · pixel summary", sub: "Use for any 2D model output.", docId: "DS-RASTER", vintage: "spec" },
+  { variant: "raster-pred", tier: "modeled",    source: "Prithvi-NYC",   title: "Raster prediction, illustrative",         rasterKind: "prithvi", headline: "n% flooded", subhead: "model · scene id", illustrative: true, sub: "Same chrome as raster + illustrative tag.", docId: "DS-RASTERPRED", vintage: "spec" },
+  { variant: "register",    tier: "empirical",  source: "NYC OpenData",  title: "Composite register list",                 registers: [
+    { reg: "MTA",   tier: "empirical", label: "Station entrance",     sourceId: "MTA-X",  note: null },
+    { reg: "NYCHA", tier: "empirical", label: "Development",          sourceId: "NYCHA-Y", note: null },
+    { reg: "DOH",   tier: "empirical", label: null,                   sourceId: null,      note: "no acute-care hospital within 1.0 mi" },
+  ], sub: "Use when many specialists join into one Stone.", docId: "DS-REGISTER", vintage: "spec" },
+  { variant: "comparison",  tier: "synthetic",  source: "EMP × SYN",     title: "Documented vs. interpreted",              left: { tier: "empirical", label: "documented", value: "31.4%", aux: "n polygons" }, right: { tier: "synthetic", label: "interpreted", value: "29.8%", aux: "n polygons" }, delta: "Δ = , 1.6 pp · agreement strong", sub: "Use to surface model , ground-truth deltas.", docId: "DS-CMP", vintage: "spec" },
+  { variant: "meta",        tier: "modeled",    source: "Mellea",        title: "Capstone reconciliation",                 metaRows: [{ k: "claims", v: "12 / 12 grounded" }, { k: "tier mix", v: "EMP 5 · MOD 4 · PRX 2 · SYN 1" }, { k: "tier-1 freshness", v: "median 38 d" }, { k: "warnings", v: "0" }], sub: "Use to expose the synthesis layer's audit.", docId: "DS-META", vintage: "spec" },
+];
+
+const CardGrammarReference = ({ density }) => (
+  <section className="f-region f-region-grammar" aria-label="Card grammar reference">
+    <header className="f-region-head">
+      <div className="f-region-head-left">
+        <span className="f-region-num">SPEC</span>
+        <h3 className="f-region-name">Card grammar</h3>
+        <span className="f-region-role">every body variant in the system</span>
+        <span className="f-region-tag">stubs, not findings</span>
+      </div>
+      <span className="f-tally"><span className="f-tally-strong">{GRAMMAR_STUBS.length}</span> variants</span>
+    </header>
+    <div className="f-rail">
+      {GRAMMAR_STUBS.map((c) => (
+        <article key={c.variant} className={`fc fc-${c.variant} fc-tier-${c.tier} ${density === "compact" ? "is-compact" : ""}`}>
+          <header className="fc-head">
+            <div className="fc-head-source">
+              <window.TierGlyph tier={c.tier} size={11}/>
+              <span className="fc-head-source-label">{c.source}</span>
+            </div>
+            <span className="fc-head-vintage">{c.variant}</span>
+          </header>
+          <h4 className="fc-title">{c.title}</h4>
+          {renderBody(c, density)}
+          <footer className="fc-foot">
+            <span className="fc-foot-docid fc-foot-docid-mute">{c.docId}</span>
+            <FiTierBadge tier={c.tier}/>
+          </footer>
+        </article>
+      ))}
+    </div>
+  </section>
+);
+
+Object.assign(window, { CardGrammarReference });
+
+const BodyComparison = ({ c }) => (
+  <div className="fc-body fc-body-comparison">
+    <div className="fc-cmp-grid">
+      <div className="fc-cmp-cell">
+        <div className="fc-cmp-cell-tier">
+          <window.TierGlyph tier={c.left.tier} size={10}/>
+          <span className="fc-cmp-cell-label">{c.left.label}</span>
+        </div>
+        <div className="fc-cmp-cell-value" style={{ color: `var(--tier-${c.left.tier})` }}>{c.left.value}</div>
+        <div className="fc-cmp-cell-aux">{c.left.aux}</div>
+      </div>
+      <div className="fc-cmp-divider" aria-hidden="true">vs</div>
+      <div className="fc-cmp-cell">
+        <div className="fc-cmp-cell-tier">
+          <window.TierGlyph tier={c.right.tier} size={10}/>
+          <span className="fc-cmp-cell-label">{c.right.label}</span>
+        </div>
+        <div className="fc-cmp-cell-value" style={{ color: `var(--tier-${c.right.tier})` }}>{c.right.value}</div>
+        <div className="fc-cmp-cell-aux">{c.right.aux}</div>
+      </div>
+    </div>
+    <div className="fc-cmp-delta">{c.delta}</div>
+    {c.sub && <div className="fc-body-sub">{c.sub}</div>}
+  </div>
+);
+
+const BodyMeta = ({ c }) => (
+  <div className="fc-body fc-body-meta">
+    <dl className="fc-meta-list">
+      {c.metaRows.map((r, i) => (
+        <div key={i} className="fc-meta-row">
+          <dt>{r.k}</dt>
+          <dd>{r.v}</dd>
+        </div>
+      ))}
+    </dl>
+    {c.sub && <div className="fc-body-sub">{c.sub}</div>}
+  </div>
+);
+
+const renderBody = (c, density) => {
+  switch (c.variant) {
+    case "headline":    return <BodyHeadline c={c}/>;
+    case "tabular":     return <BodyTabular c={c}/>;
+    case "spark":       return <BodySpark c={c}/>;
+    case "histogram":   return <BodySpark c={c}/>;
+    case "forecast":    return <BodyForecast c={c}/>;
+    case "timeseries":  return <BodyTimeseries c={c}/>;
+    case "scalars":     return <BodyScalars c={c}/>;
+    case "raster":      return <BodyRaster c={c}/>;
+    case "raster-pred": return <BodyRaster c={c}/>;
+    case "register":    return <BodyRegister c={c} density={density}/>;
+    case "comparison":  return <BodyComparison c={c}/>;
+    case "meta":        return <BodyMeta c={c}/>;
+    default: return null;
+  }
+};
+
+/* ─── Card frame ─── */
+
+const FindingCard = ({ c, density, onCite, onHover, onClick, isLinked }) => {
+  return (
+    <article
+      className={`fc fc-${c.variant} fc-tier-${c.tier} ${density === "compact" ? "is-compact" : ""} ${isLinked ? "is-linked" : ""}`}
+      aria-labelledby={`fc-${c.docId}-title`}
+      onMouseEnter={() => onHover?.(c.mapKey)}
+      onMouseLeave={() => onHover?.(null)}
+      onClick={() => onClick?.(c)}
+    >
+      <header className="fc-head">
+        <div className="fc-head-source">
+          <window.TierGlyph tier={c.tier} size={11}/>
+          <span className="fc-head-source-label" title={c.agency}>{c.source}</span>
+        </div>
+        <span className="fc-head-vintage">v. {c.vintage}</span>
+      </header>
+      <h4 id={`fc-${c.docId}-title`} className="fc-title">{c.title}</h4>
+      {renderBody(c, density)}
+      <footer className="fc-foot">
+        {c.citeId ? (
+          <button type="button" className="fc-foot-cite" onClick={(e) => { e.stopPropagation(); onCite?.(c.citeId); }} title={`Open ${c.docId} in citation drawer`}>
+            <span className="fc-foot-docid">{c.docId}</span>
+            <span className="fc-foot-arrow" aria-hidden="true">→</span>
+          </button>
+        ) : (
+          <span className="fc-foot-docid fc-foot-docid-mute">{c.docId}</span>
+        )}
+        <FiTierBadge tier={c.tier}/>
+      </footer>
+    </article>
+  );
+};
+
+/* ─── Stone region ─── */
+
+const flatten = (members) => members.flatMap((m) => (m.children ? [m, ...flatten(m.children)] : [m]));
+
+const StoneTally44 = ({ cardCount, members }) => {
+  const flat = flatten(members);
+  const fired = flat.filter((m) => m.status === "ok").length;
+  const silent = flat.filter((m) => m.status === "silent").length;
+  const warn = flat.filter((m) => m.status === "warn").length;
+  const error = flat.filter((m) => m.status === "error").length;
+  const ms = members.reduce((acc, m) => Math.max(acc, m.ms || 0), 0);
+  const fmtMs = (x) => (x === 0 ? "—" : x < 1000 ? x + "ms" : (x / 1000).toFixed(1) + "s");
+  return (
+    <span className="f-tally">
+      <span className="f-tally-cards">{cardCount} card{cardCount === 1 ? "" : "s"}</span>
+      <span className="f-tally-sep">·</span>
+      <span className="f-tally-fired"><span className="f-tally-strong">{fired}</span> fired</span>
+      {silent > 0 && <><span className="f-tally-sep">·</span><span className="f-tally-silent"><span className="f-tally-strong">{silent}</span> silent</span></>}
+      {warn > 0 && <><span className="f-tally-sep">·</span><span className="f-tally-warn"><span className="f-tally-strong">{warn}</span> warn</span></>}
+      {error > 0 && <><span className="f-tally-sep">·</span><span className="f-tally-err"><span className="f-tally-strong">{error}</span> error</span></>}
+      <span className="f-tally-sep">·</span>
+      <span className="f-tally-ms"><span className="f-tally-strong">{fmtMs(ms)}</span></span>
+    </span>
+  );
+};
+
+const StoneRegion = ({ stone, cardIds, density, provenanceMode, onCite, onHover, linkedKey }) => {
+  const meta = STONE_META[stone.key];
+  const cards = cardIds.map((id) => CARDS[id]).filter(Boolean);
+  const traceCount = flatten(stone.members).length;
+  const flat = flatten(stone.members);
+  const hasAnomaly = flat.some((m) => m.status === "warn" || m.status === "error" || m.status === "silent");
+  const defaultOpen =
+    provenanceMode === "all-expanded" ? true :
+    provenanceMode === "all-collapsed" ? false :
+    /* smart */ hasAnomaly;
+  const [traceOpen, setTraceOpen] = useFi(defaultOpen);
+  /* Re-sync if user toggles tweak */
+  useFiMemo(() => setTraceOpen(defaultOpen), [provenanceMode]);
+
+  const isCapstone = stone.key === "capstone";
+
+  return (
+    <section className={`f-region f-region-${stone.key}`} aria-labelledby={`f-h-${stone.key}`} data-stone={stone.key}>
+      <header className="f-region-head">
+        <div className="f-region-head-left">
+          <span className="f-region-num">{(STONE_ORDER.indexOf(stone.key) + 1).toString().padStart(2, "0")}</span>
+          <h3 id={`f-h-${stone.key}`} className="f-region-name">{meta.name}</h3>
+          <span className="f-region-role">· {meta.role}</span>
+          <span className="f-region-tag">{meta.tag}</span>
+        </div>
+        <StoneTally44 cardCount={cards.length} members={stone.members}/>
+      </header>
+
+      {/* Findings · primary surface */}
+      {cards.length === 0 ? (
+        <div className="f-silent">
+          <span className="f-silent-tag">silent</span>
+          <p className="f-silent-prose">
+            {stone.key === "lodestone"
+              ? "No projection cards landed for this query. The address is inland (Pelham Pkwy, Bronx); NPCC4 SLR and TTM Battery surge are coastal projections and do not localize here. Atomic functions still ran (see provenance) and returned silence rather than confabulation."
+              : "No cards for this Stone on this query."}
+          </p>
+        </div>
+      ) : (
+        <div className={`f-rail ${isCapstone ? "f-rail-capstone" : ""}`}>
+          {cards.map((c) => (
+            <FindingCard
+              key={c.docId}
+              c={c}
+              density={density}
+              onCite={onCite}
+              onHover={onHover}
+              onClick={(card) => onHover?.(card.mapKey, true)}
+              isLinked={linkedKey && c.mapKey === linkedKey}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Provenance */}
+      <div className="f-prov">
+        <button
+          type="button"
+          className="f-prov-toggle"
+          aria-expanded={traceOpen}
+          onClick={() => setTraceOpen((o) => !o)}
+        >
+          <span className="f-prov-caret" aria-hidden="true">{traceOpen ? "▾" : "▸"}</span>
+          <span className="f-prov-label">{traceOpen ? "Hide" : "Show"} provenance</span>
+          <span className="f-prov-meta">· {traceCount} function{traceCount === 1 ? "" : "s"}{hasAnomaly ? " · anomaly" : ""}</span>
+        </button>
+        {traceOpen && (
+          <div className="f-prov-body">
+            {stone.members.map((m) => <window.TraceRow key={m.id} m={m}/>)}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+/* ─── Run-health strip ─── */
+
+const RunHealth44 = ({ totalCards }) => {
+  const all = window.STONES.flatMap((s) => flatten(s.members));
+  const fired = all.filter((m) => m.status === "ok").length;
+  const total = all.length;
+  const silent = all.filter((m) => m.status === "silent").length;
+  const warn = all.filter((m) => m.status === "warn").length;
+  const error = all.filter((m) => m.status === "error").length;
+  return (
+    <div className="f-runhealth">
+      <span className="f-rh-item"><strong>5</strong> Stones</span>
+      <span className="f-rh-sep">·</span>
+      <span className="f-rh-item"><strong>{fired}/{total}</strong> functions fired</span>
+      <span className="f-rh-sep">·</span>
+      <span className="f-rh-item"><strong>{totalCards}</strong> evidence cards</span>
+      <span className="f-rh-sep">·</span>
+      <span className="f-rh-item"><strong>14.0s</strong> wall-clock</span>
+      {silent > 0 && <><span className="f-rh-sep">·</span><span className="f-rh-item f-rh-silent">{silent} silent</span></>}
+      {warn > 0 && <><span className="f-rh-sep">·</span><span className="f-rh-item f-rh-warn">{warn} warn</span></>}
+      {error > 0 && <><span className="f-rh-sep">·</span><span className="f-rh-item f-rh-err">{error} error</span></>}
+    </div>
+  );
+};
+
+/* ─── Findings region ─── */
+
+const FindingsRegion = ({ density, provenanceMode, queryKey, showComparison, showGrammar, onCite, onHover, linkedKey }) => {
+  const map = CARDS_BY_QUERY[queryKey] || CARDS_BY_QUERY.redhook;
+  /* Inject the comparison card into Keystone after the register card if showComparison is on */
+  const adjusted = useFiMemo(() => {
+    if (!showComparison) return map;
+    if (queryKey !== "redhook") return map;
+    /* Add a synthetic ID reference to the in-memory comparison card */
+    return { ...map, keystone: [...(map.keystone || []), "__comparison__"] };
+  }, [map, showComparison, queryKey]);
+
+  const totalCards = STONE_ORDER.reduce((n, k) => n + (adjusted[k] || []).length, 0);
+
+  return (
+    <section className="findings" aria-label="Findings, grouped by Stone">
+      <header className="findings-head">
+        <h2 className="findings-h2">Findings · grouped by Stone</h2>
+        <span className="findings-tagline">cards = what each Stone found · provenance collapses below</span>
+      </header>
+      <RunHealth44 totalCards={totalCards}/>
+      {STONE_ORDER.map((key) => {
+        const stone = window.STONES.find((s) => s.key === key);
+        const ids = adjusted[key] || [];
+        return (
+          <StoneRegion
+            key={key}
+            stone={stone}
+            cardIds={ids}
+            density={density}
+            provenanceMode={provenanceMode}
+            onCite={onCite}
+            onHover={onHover}
+            linkedKey={linkedKey}
+          />
+        );
+      })}
+      {showGrammar && <CardGrammarReference density={density}/>}
+    </section>
+  );
+};
+
+/* Fold the comparison card into CARDS lookup at module load */
+CARDS["__comparison__"] = COMPARISON_CARD;
+
+Object.assign(window, { FindingsRegion, CARDS, CARDS_BY_QUERY });

docs/design_handoff/design_files/glyphs.jsx

@@ -0,0 +1,126 @@
+/* Epistemic-tier glyphs.
+   12×12 monochrome SVGs. Distinguishable by shape (filled square,
+   open square, filled circle, striped square) ,  never by color alone.
+   Used in: briefing prose left margin, evidence card badge, trace tier
+   column, PDF body, MapLibre legend.
+*/
+
+const TierGlyph = ({ tier, size = 12, color = "currentColor", title }) => {
+  const s = size;
+  const stroke = Math.max(1, Math.round(size / 9));
+  const ariaTitle = title || ({
+    empirical: "Empirical: directly measured or observed",
+    modeled: "Modeled: scenario-based prediction",
+    proxy: "Proxy: indirect indicator",
+    synthetic: "Synthetic prior: generated, not observed",
+  })[tier];
+
+  const patternId = `rip-stripe-${tier}-${size}`;
+
+  return (
+    <svg
+      width={s}
+      height={s}
+      viewBox={`0 0 ${s} ${s}`}
+      role="img"
+      aria-label={ariaTitle}
+      style={{ flex: "none", display: "inline-block", verticalAlign: "-0.12em" }}
+    >
+      <title>{ariaTitle}</title>
+      {tier === "empirical" && (
+        <rect x="0" y="0" width={s} height={s} fill={color} />
+      )}
+      {tier === "modeled" && (
+        <rect
+          x={stroke / 2}
+          y={stroke / 2}
+          width={s - stroke}
+          height={s - stroke}
+          fill="none"
+          stroke={color}
+          strokeWidth={stroke}
+        />
+      )}
+      {tier === "proxy" && (
+        <circle cx={s / 2} cy={s / 2} r={s / 2 - 0.5} fill={color} />
+      )}
+      {tier === "synthetic" && (
+        <>
+          <defs>
+            <pattern
+              id={patternId}
+              width="3"
+              height="3"
+              patternUnits="userSpaceOnUse"
+              patternTransform="rotate(45)"
+            >
+              <line x1="0" y1="0" x2="0" y2="3" stroke={color} strokeWidth="1.5" />
+            </pattern>
+          </defs>
+          <rect
+            x={stroke / 2}
+            y={stroke / 2}
+            width={s - stroke}
+            height={s - stroke}
+            fill={`url(#${patternId})`}
+            stroke={color}
+            strokeWidth={stroke}
+          />
+        </>
+      )}
+    </svg>
+  );
+};
+
+const TIER_META = {
+  empirical: {
+    label: "Empirical",
+    short: "EMP",
+    desc: "Directly measured or observed",
+    examples: "USGS high-water marks · FloodNet sensors · Sandy Inundation Zone",
+  },
+  modeled: {
+    label: "Modeled",
+    short: "MOD",
+    desc: "Scenario-based prediction",
+    examples: "FEMA flood zones · DEP stormwater scenarios · NPCC4 SLR",
+  },
+  proxy: {
+    label: "Proxy",
+    short: "PRX",
+    desc: "Indirect indicator",
+    examples: "311 flood complaints · NFIP claims · terrain indices",
+  },
+  synthetic: {
+    label: "Synthetic prior",
+    short: "SYN",
+    desc: "Generated, not observed",
+    examples: "TerraMind land-cover · synthetic SAR for occluded days",
+  },
+};
+
+const TierBadge = ({ tier, compact = false }) => {
+  const meta = TIER_META[tier];
+  return (
+    <span
+      className={`tier-badge tier-badge-${tier}`}
+      style={{
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        fontFamily: "var(--font-mono)",
+        fontSize: 11,
+        letterSpacing: "0.08em",
+        textTransform: "uppercase",
+        color: `var(--tier-${tier})`,
+        fontWeight: 500,
+      }}
+      title={meta.desc}
+    >
+      <TierGlyph tier={tier} size={10} color={`var(--tier-${tier})`} />
+      {compact ? meta.short : meta.label}
+    </span>
+  );
+};
+
+Object.assign(window, { TierGlyph, TierBadge, TIER_META });

docs/design_handoff/design_files/landing-variants.css

@@ -0,0 +1,89 @@
+/* Riprap landing-page variants ,  shared styles */
+
+/* Chrome */
+.land { background: var(--paper); color: var(--ink); font-family: var(--font-sans); display: flex; flex-direction: column; min-height: 100%; }
+.land-header { display: flex; align-items: baseline; gap: 12px; padding: 20px 32px; border-bottom: 1px solid var(--rule-soft); }
+.land-header .riprap-wordmark { font-family: var(--font-serif); font-weight: 600; font-size: 18px; letter-spacing: 0.02em; }
+.land-header-sep { color: var(--ink-tertiary); }
+.land-header-context { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-secondary); }
+.land-header-nav { margin-left: auto; display: flex; gap: 18px; font-family: var(--font-mono); font-size: 12px; }
+.land-header-nav a { color: var(--ink-secondary); text-decoration: none; border-bottom: 1px dotted transparent; }
+.land-header-nav a:hover { border-bottom-color: var(--ink-secondary); }
+
+.land-footer { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 32px; border-top: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.02em; }
+.land-footer-tiers { display: flex; gap: 16px; flex-wrap: wrap; }
+.land-footer-tier { display: inline-flex; align-items: center; gap: 5px; }
+.lm-sw-syn { background: rgba(42,111,168,0.25); border: 1px dashed var(--tier-modeled); }
+
+/* Hero common */
+.land-hero { padding: 64px 32px 48px; }
+.land-hero-h1 { display: flex; flex-direction: column; gap: 18px; margin: 0 0 30px; max-width: 880px; }
+.land-hero-headline { font-family: var(--font-serif); font-weight: 500; font-size: 52px; line-height: 1.08; color: var(--ink); letter-spacing: -0.015em; }
+.land-hero-headline em { font-style: italic; font-weight: 500; }
+.land-hero-deck { font-family: var(--font-serif); font-size: 18px; line-height: 1.55; color: var(--ink-secondary); max-width: 64ch; }
+
+/* Query box */
+.land-query { display: flex; align-items: stretch; gap: 0; max-width: 760px; border: 1px solid var(--ink); background: white; }
+.land-query-lg { font-size: 18px; }
+.land-query-md { font-size: 16px; max-width: 640px; }
+.land-query-prompt { display: flex; align-items: center; padding: 0 14px; font-family: var(--font-mono); font-size: 22px; color: var(--ink-tertiary); background: var(--paper-deep); border-right: 1px solid var(--rule-soft); }
+.land-query-input { flex: 1; min-width: 0; padding: 18px 16px; font: inherit; font-family: var(--font-sans); border: none; outline: none; background: white; color: var(--ink); }
+.land-query-input::placeholder { color: var(--ink-tertiary); }
+.land-query-submit { padding: 0 22px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; background: var(--ink); color: var(--paper); border: none; cursor: pointer; white-space: nowrap; letter-spacing: 0.02em; }
+.land-query-submit:hover { background: #000; }
+
+/* Sections */
+.land-section { padding: 48px 32px; border-top: 1px solid var(--rule-soft); }
+.land-section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 22px; padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); }
+.land-section-meta { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-tertiary); }
+.land-section-link { font-family: var(--font-mono); font-size: 12px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink); }
+
+/* ── v1 ── */
+.land-cycling { margin-top: 18px; display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-tertiary); max-width: 760px; }
+.land-cycling-label { letter-spacing: 0.06em; text-transform: uppercase; font-size: 11px; line-height: 1.4em; }
+.land-cycling-rail { position: relative; min-width: 0; height: 1.4em; line-height: 1.4em; }
+.land-cycling-item { position: absolute; inset: 0; line-height: 1.4em; opacity: 0; transition: opacity 240ms ease; color: var(--ink); border-bottom: 1px dotted var(--rule-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.land-cycling-item.is-active { opacity: 1; }
+
+.land-preview { display: flex; justify-content: flex-start; }
+.land-preview-frame { background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); padding: 22px 26px; max-width: 760px; }
+.land-preview-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-tertiary); margin-bottom: 12px; }
+.land-preview-body { font-family: var(--font-serif); font-size: 17px; line-height: 1.65; color: var(--ink); margin: 0 0 18px; }
+.land-preview-cite { background: linear-gradient(transparent 60%, rgba(11,83,148,0.14) 60%); }
+.land-preview-cite sup { font-family: var(--font-mono); font-size: 10px; color: var(--tier-empirical); margin-left: 2px; vertical-align: super; }
+.land-preview-cites { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px dashed var(--rule-soft); }
+.land-preview-cite-row { display: grid; grid-template-columns: 36px 1fr 90px; gap: 10px; align-items: baseline; font-family: var(--font-mono); font-size: 12px; }
+.land-preview-cite-pin { color: var(--tier-empirical); font-weight: 600; }
+.land-preview-cite-src { color: var(--ink); }
+.land-preview-cite-tier { color: var(--ink-tertiary); font-size: 11px; text-align: right; letter-spacing: 0.04em; }
+
+/* ── v2 ── */
+.land-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
+.land-gallery-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); text-decoration: none; color: inherit; transition: background 120ms; }
+.land-gallery-card:hover { background: var(--paper-deep); }
+.land-gallery-kind { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-tertiary); }
+.land-gallery-title { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0; color: var(--ink); }
+.land-gallery-sub { font-family: var(--font-serif); font-size: 14px; font-style: italic; color: var(--ink-secondary); margin: 0; line-height: 1.45; }
+.land-gallery-tally { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--rule-soft); font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); }
+.land-gallery-arrow { margin-top: 6px; font-family: var(--font-mono); font-size: 11px; color: var(--ink); letter-spacing: 0.04em; }
+
+.land-section-stones { background: var(--paper-deep); }
+.land-stones-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
+.land-stone-pill { padding: 14px 16px; background: white; border: 1px solid var(--rule-soft); font-family: var(--font-sans); font-size: 13px; color: var(--ink-secondary); }
+.land-stone-pill strong { display: block; font-family: var(--font-sans); font-weight: 600; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
+
+/* ── v3 ── */
+.land-hero-v3 .land-hero-h1 { margin-bottom: 36px; }
+.land-frieze { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--rule-soft); border-bottom: 2px solid var(--ink); background: white; margin-bottom: 36px; }
+.land-frieze-stone { padding: 22px 18px 24px; border-right: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 8px; }
+.land-frieze-stone:last-child { border-right: none; }
+.land-frieze-num { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.08em; }
+.land-frieze-name { font-family: var(--font-serif); font-size: 22px; font-weight: 500; margin: 0; color: var(--ink); }
+.land-frieze-role { font-family: var(--font-sans); font-size: 13px; color: var(--ink-secondary); }
+.land-frieze-tag { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--ink-tertiary); margin: 0 0 6px; line-height: 1.4; }
+.land-frieze-sources { margin-top: auto; padding-top: 10px; border-top: 1px dashed var(--rule-soft); font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); line-height: 1.5; }
+
+.land-frieze-query { display: flex; flex-direction: column; gap: 12px; }
+.land-frieze-query-meta { font-family: var(--font-mono); font-size: 12px; color: var(--ink-tertiary); display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
+.land-link { background: none; border: none; padding: 0; font: inherit; color: var(--ink); border-bottom: 1px dotted var(--ink-secondary); cursor: pointer; }
+.land-link:hover { border-bottom-style: solid; }

docs/design_handoff/design_files/landing-variants.jsx

@@ -0,0 +1,266 @@
+/* Riprap landing-page variants — three artboards on a design canvas.
+   v1: Minimal pushed harder (cycling example queries + tiny grounded-output preview)
+   v2: Example gallery (query box + 6 pre-baked NYC archetype briefings)
+   v3: Methodology-forward (5 Stones frieze leads, query box below)
+*/
+
+const { useState: useLand, useEffect: useLandFx } = React;
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Shared chrome — wordmark + footer methodology link
+   ═══════════════════════════════════════════════════════════════════════ */
+const LandingChrome = ({ children, board }) => (
+  <div className={`land land-${board}`}>
+    <header className="land-header">
+      <span className="riprap-wordmark">riprap</span>
+      <span className="land-header-sep">/</span>
+      <span className="land-header-context">Flood Exposure Briefing · NYC</span>
+      <nav className="land-header-nav">
+        <a href="#methodology">Methodology</a>
+        <a href="#sources">Sources</a>
+        <a href="#about">About</a>
+      </nav>
+    </header>
+    {children}
+    <footer className="land-footer">
+      <span>Riprap v0.4.4 — built on NYC OpenData, FEMA NFHL, USGS, NPCC4</span>
+      <span>Each briefing is a citation graph. Every claim links to its primary source.</span>
+    </footer>
+  </div>
+);
+
+const QueryBox = ({ size = "md", placeholder = "Address, neighborhood, or BBL — e.g. 80 Pioneer Street, Red Hook" }) => (
+  <form className={`land-query land-query-${size}`} onSubmit={(e) => e.preventDefault()}>
+    <span className="land-query-prompt" aria-hidden="true">›</span>
+    <input
+      type="text"
+      placeholder={placeholder}
+      className="land-query-input"
+      aria-label="Query an address, neighborhood, or BBL"
+    />
+    <button type="submit" className="land-query-submit">
+      Brief this place →
+    </button>
+  </form>
+);
+
+/* ═══════════════════════════════════════════════════════════════════════
+   v1 · Minimal pushed harder
+   ═══════════════════════════════════════════════════════════════════════ */
+const SAMPLE_QUERIES = [
+  "80 Pioneer Street, Red Hook",
+  "Coney Island Hospital",
+  "PS 188, Lower East Side",
+  "Hammels Houses, Rockaway",
+  "Bowling Green station",
+  "555 W 57th Street",
+];
+
+const CyclingExamples = () => {
+  const [i, setI] = useLand(0);
+  useLandFx(() => {
+    const t = setInterval(() => setI((x) => (x + 1) % SAMPLE_QUERIES.length), 2200);
+    return () => clearInterval(t);
+  }, []);
+  return (
+    <div className="land-cycling" aria-live="polite">
+      <span className="land-cycling-label">Try:</span>
+      <span className="land-cycling-rail">
+        {SAMPLE_QUERIES.map((q, idx) => (
+          <span
+            key={q}
+            className={`land-cycling-item ${idx === i ? "is-active" : ""}`}
+            aria-hidden={idx !== i}
+          >
+            {q}
+          </span>
+        ))}
+      </span>
+    </div>
+  );
+};
+
+const GroundedOutputPreview = () => (
+  <div className="land-preview" aria-label="Sample of grounded output">
+    <div className="land-preview-frame">
+      <div className="land-preview-eyebrow">Excerpt — 80 Pioneer Street briefing</div>
+      <p className="land-preview-body">
+        The lot sits inside the FEMA <span className="land-preview-cite">1% AE flood zone <sup>[c3]</sup></span>,
+        with Hurricane Sandy storm-surge high-water marks recorded
+        <span className="land-preview-cite"> 4.7 ft above grade <sup>[c1]</sup></span> at the address.
+        FloodNet sensor FN-BK-018, two blocks north, has logged
+        <span className="land-preview-cite"> 14 nuisance-flood events since 2023 <sup>[c2]</sup></span>.
+      </p>
+      <div className="land-preview-cites">
+        <div className="land-preview-cite-row">
+          <span className="land-preview-cite-pin">[c1]</span>
+          <span className="land-preview-cite-src">USGS High-Water Mark · Sandy 2012</span>
+          <span className="land-preview-cite-tier">empirical</span>
+        </div>
+        <div className="land-preview-cite-row">
+          <span className="land-preview-cite-pin">[c2]</span>
+          <span className="land-preview-cite-src">FloodNet sensor FN-BK-018 · 2023–2026</span>
+          <span className="land-preview-cite-tier">empirical</span>
+        </div>
+        <div className="land-preview-cite-row">
+          <span className="land-preview-cite-pin">[c3]</span>
+          <span className="land-preview-cite-src">FEMA NFHL · panel 36047C0207</span>
+          <span className="land-preview-cite-tier">modeled</span>
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+const LandingV1 = () => (
+  <LandingChrome board="v1">
+    <main className="land-hero land-hero-v1">
+      <h1 className="land-hero-h1">
+        <span className="land-hero-eyebrow">Riprap</span>
+        <span className="land-hero-headline">A flood exposure briefing for any place in New York City.</span>
+        <span className="land-hero-deck">
+          Type an address. Get a written briefing where every numeric claim
+          links to its primary public-record source.
+        </span>
+      </h1>
+      <QueryBox size="lg"/>
+      <CyclingExamples/>
+    </main>
+    <section className="land-section land-section-v1">
+      <div className="land-section-head">
+        <span className="section-label">What you'll get back</span>
+        <span className="land-section-meta">A grounded paragraph with citations — not a chatbot answer.</span>
+      </div>
+      <GroundedOutputPreview/>
+    </section>
+  </LandingChrome>
+);
+
+/* ═══════════════════════════════════════════════════════════════════════
+   v2 · Example gallery
+   ═══════════════════════════════════════════════════════════════════════ */
+const GALLERY = [
+  { kind: "Address",     title: "80 Pioneer Street",       sub: "Red Hook · industrial loft on Sandy inundation footprint",      tally: "8 cards · 1% AE zone · 4.7ft Sandy HWM" },
+  { kind: "Hospital",    title: "Coney Island Hospital",   sub: "Brooklyn · NYC Health+Hospitals · coastal AE-zone facility",     tally: "11 cards · evacuated 2012 · NPCC4 +30in by 2070" },
+  { kind: "School",      title: "PS 188",                  sub: "Lower East Side · K-5 · 1.3mi from East River shore",            tally: "6 cards · 0.2% shaded-X zone · DEP CSO outfall 200ft" },
+  { kind: "NYCHA",       title: "Hammels Houses",          sub: "Rockaway · 712 units · ocean-side public housing",               tally: "13 cards · multi-event flooding · TerraMind synthetic SAR" },
+  { kind: "Transit",     title: "Bowling Green station",   sub: "Lower Manhattan · 4/5 line · 2012 inundation, post-Sandy hardened", tally: "9 cards · MTA flood-resilience capital plan referenced" },
+  { kind: "Address",     title: "555 W 57th Street",       sub: "Hell's Kitchen · inland · low-exposure control case",            tally: "4 cards · X-zone · cited for context comparison" },
+];
+
+const GalleryCard = ({ item }) => (
+  <a className="land-gallery-card" href="#" onClick={(e) => e.preventDefault()}>
+    <div className="land-gallery-kind">{item.kind}</div>
+    <h3 className="land-gallery-title">{item.title}</h3>
+    <p className="land-gallery-sub">{item.sub}</p>
+    <div className="land-gallery-tally">{item.tally}</div>
+    <span className="land-gallery-arrow" aria-hidden="true">Open briefing →</span>
+  </a>
+);
+
+const LandingV2 = () => (
+  <LandingChrome board="v2">
+    <main className="land-hero land-hero-v2">
+      <h1 className="land-hero-h1">
+        <span className="land-hero-eyebrow">Riprap · Flood Exposure Briefing</span>
+        <span className="land-hero-headline">What does flood mean for this place in New York?</span>
+        <span className="land-hero-deck">
+          Riprap reads a place across hazard, exposure, observation, and projection —
+          and writes it down with citations.
+        </span>
+      </h1>
+      <QueryBox size="lg"/>
+    </main>
+    <section className="land-section land-section-v2">
+      <div className="land-section-head">
+        <span className="section-label">Or open a sample briefing</span>
+        <span className="land-section-meta">Six NYC archetypes · pre-computed · click to read</span>
+      </div>
+      <div className="land-gallery">
+        {GALLERY.map((it) => <GalleryCard key={it.title} item={it}/>)}
+      </div>
+    </section>
+    <section className="land-section land-section-stones">
+      <div className="land-section-head">
+        <span className="section-label">How Riprap reads a place</span>
+        <a className="land-section-link" href="#methodology">See methodology →</a>
+      </div>
+      <div className="land-stones-strip">
+        <div className="land-stone-pill"><strong>Cornerstone</strong> hazard reader</div>
+        <div className="land-stone-pill"><strong>Keystone</strong> asset register</div>
+        <div className="land-stone-pill"><strong>Touchstone</strong> live observer</div>
+        <div className="land-stone-pill"><strong>Lodestone</strong> projector</div>
+        <div className="land-stone-pill"><strong>Capstone</strong> synthesizer</div>
+      </div>
+    </section>
+  </LandingChrome>
+);
+
+/* ══════════��════════════════════════════════════════════════════════════
+   v3 · Methodology-forward
+   ═══════════════════════════════════════════════════════════════════════ */
+const STONE_FRIEZE = [
+  { name: "Cornerstone", role: "the hazard reader",  tag: "what NYC's ground remembers", sources: "USGS HWMs · FEMA NFHL · DEP stormwater · Prithvi historical" },
+  { name: "Keystone",    role: "the asset register", tag: "what's exposed",              sources: "MTA · NYCHA · DOE · DOH · PLUTO" },
+  { name: "Touchstone",  role: "the live observer",  tag: "what's happening now",        sources: "FloodNet sensors · 311 complaints · tidal gauges" },
+  { name: "Lodestone",   role: "the projector",      tag: "what's coming",               sources: "NPCC4 · TTM foundation model · TerraMind synthetic SAR · NFIP" },
+  { name: "Capstone",    role: "the synthesizer",    tag: "writes it all down",          sources: "Granite composer · Mellea grounding-check · WeasyPrint" },
+];
+
+const LandingV3 = () => (
+  <LandingChrome board="v3">
+    <main className="land-hero land-hero-v3">
+      <h1 className="land-hero-h1">
+        <span className="land-hero-eyebrow">Riprap · Flood Exposure Briefing</span>
+        <span className="land-hero-headline">Five Stones read every place.</span>
+        <span className="land-hero-deck">
+          Each briefing routes through a fixed taxonomy of public-record specialists.
+          Each Stone is a class of evidence; together they form the briefing.
+        </span>
+      </h1>
+      <div className="land-frieze">
+        {STONE_FRIEZE.map((s, i) => (
+          <article key={s.name} className="land-frieze-stone">
+            <div className="land-frieze-num">{String(i + 1).padStart(2, "0")}</div>
+            <h3 className="land-frieze-name">{s.name}</h3>
+            <div className="land-frieze-role">{s.role}</div>
+            <p className="land-frieze-tag">{s.tag}</p>
+            <div className="land-frieze-sources">{s.sources}</div>
+          </article>
+        ))}
+      </div>
+      <div className="land-frieze-query">
+        <QueryBox size="lg"/>
+        <span className="land-frieze-query-meta">
+          Try <button className="land-link" type="button">80 Pioneer Street, Red Hook</button> ·
+          <button className="land-link" type="button"> Coney Island Hospital</button> ·
+          <button className="land-link" type="button"> Hammels Houses</button>
+        </span>
+      </div>
+    </main>
+  </LandingChrome>
+);
+
+/* ═══════════════════════════════════════════════════════════════════════
+   Canvas mount
+   ═══════════════════════════════════════════════════════════════════════ */
+const App = () => (
+  <DesignCanvas
+    title="Riprap landing — three directions"
+    subtitle="Compare side-by-side. Click any artboard to focus."
+  >
+    <DCSection id="landings" title="Landing page · directions">
+      <DCArtboard id="v1" label="v1 · Minimal pushed harder" width={1200} height={1500}>
+        <LandingV1/>
+      </DCArtboard>
+      <DCArtboard id="v2" label="v2 · Example gallery" width={1200} height={1700}>
+        <LandingV2/>
+      </DCArtboard>
+      <DCArtboard id="v3" label="v3 · Methodology-forward" width={1200} height={1500}>
+        <LandingV3/>
+      </DCArtboard>
+    </DCSection>
+  </DesignCanvas>
+);
+
+ReactDOM.createRoot(document.getElementById("root")).render(<App/>);

docs/design_handoff/design_files/map.jsx

@@ -0,0 +1,211 @@
+/* Static SVG mock of the MapLibre map for 80 Pioneer St, Red Hook.
+   No network dependency. Encodes all four evidence-tier styles
+   per the brief: empirical solid + 0.4 fill, modeled solid + 0.25,
+   synthetic dashed + 0.25 with stripe, proxy graduated dots no fill.
+*/
+
+const RedHookMapMock = ({ activeLayers, queriedAddress }) => {
+  return (
+    <svg
+      viewBox="0 0 800 560"
+      width="100%"
+      height="100%"
+      role="application"
+      aria-label={`NYC flood-exposure map for ${queriedAddress}`}
+      style={{ display: "block", background: "#F2F2EE" }}
+      preserveAspectRatio="xMidYMid slice"
+    >
+      <defs>
+        {/* Diagonal stripe pattern for synthetic-prior fill */}
+        <pattern id="syn-stripe" width="6" height="6" patternUnits="userSpaceOnUse" patternTransform="rotate(45)">
+          <rect width="6" height="6" fill="rgba(42,111,168,0.18)"/>
+          <line x1="0" y1="0" x2="0" y2="6" stroke="#2A6FA8" strokeWidth="1" />
+        </pattern>
+        {/* Halo for label readability */}
+        <filter id="label-halo" x="-10%" y="-10%" width="120%" height="120%">
+          <feMorphology in="SourceAlpha" radius="1.5" operator="dilate" result="halo"/>
+          <feFlood floodColor="#FAFAF7"/>
+          <feComposite in2="halo" operator="in"/>
+          <feMerge><feMergeNode/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+      </defs>
+
+      {/* ── Basemap: Carto Positron register ── */}
+      {/* Water (Erie Basin / Buttermilk Channel) */}
+      <path d="M 0 380 L 220 360 L 360 410 L 520 470 L 800 500 L 800 560 L 0 560 Z" fill="#DCE6EC"/>
+      <path d="M 540 0 L 580 0 L 600 90 L 640 180 L 700 240 L 800 280 L 800 0 Z" fill="#DCE6EC"/>
+
+      {/* Park (Coffey Park) */}
+      <rect x="380" y="240" width="90" height="60" fill="#E2E8DA"/>
+
+      {/* Parcels (reference layer #E5E5E5) */}
+      <g stroke="#C9C9C5" strokeWidth="0.5" fill="#FAFAF7">
+        {Array.from({ length: 8 }).map((_, r) =>
+          Array.from({ length: 14 }).map((_, c) => (
+            <rect key={`p-${r}-${c}`} x={60 + c * 50} y={60 + r * 38} width="46" height="34" />
+          ))
+        )}
+      </g>
+
+      {/* Streets */}
+      <g stroke="#FAFAF7" strokeWidth="6" fill="none">
+        <path d="M 0 100 L 800 90"/>
+        <path d="M 0 200 L 800 190"/>
+        <path d="M 0 300 L 800 290"/>
+        <path d="M 60 0 L 50 380"/>
+        <path d="M 200 0 L 190 380"/>
+        <path d="M 340 0 L 330 380"/>
+        <path d="M 480 0 L 470 380"/>
+        <path d="M 620 0 L 610 380"/>
+      </g>
+      <g stroke="#C9C9C5" strokeWidth="6.5" fill="none" opacity="0.0"/>
+
+      {/* ── Empirical layer: Sandy Inundation Zone ── */}
+      {activeLayers.empirical && (
+        <g aria-label="Sandy Inundation Zone">
+          <path
+            d="M 0 380 L 220 360 L 360 410 L 520 470 L 800 500 L 800 560 L 0 560 Z
+               M 0 360 L 240 340 L 380 390 L 540 450 L 800 480
+               L 800 380 L 600 360 L 420 320 L 240 300 L 0 320 Z"
+            fill="rgba(11,83,148,0.40)"
+            stroke="#0B5394"
+            strokeWidth="1.5"
+            fillRule="evenodd"
+          />
+        </g>
+      )}
+
+      {/* ── Modeled layer: FEMA AE zone (solid line, 0.25 fill) ── */}
+      {activeLayers.modeled && (
+        <g aria-label="FEMA Zone AE">
+          <path
+            d="M 40 340 L 280 320 L 440 360 L 600 420 L 800 440 L 800 560 L 0 560 L 0 350 Z"
+            fill="rgba(42,111,168,0.25)"
+            stroke="#2A6FA8"
+            strokeWidth="1.5"
+            strokeDasharray="0"
+          />
+        </g>
+      )}
+
+      {/* ── Synthetic-prior: dashed line + stripe pattern ── */}
+      {activeLayers.synthetic && (
+        <g aria-label="Synthetic SAR backscatter (TerraMind, 2025-09-14)">
+          <path
+            d="M 100 380 L 260 360 L 380 390 L 480 420 L 600 440 L 720 460 L 720 500 L 100 500 Z"
+            fill="url(#syn-stripe)"
+            stroke="#2A6FA8"
+            strokeWidth="1.5"
+            strokeDasharray="4 3"
+          />
+        </g>
+      )}
+
+      {/* ── Proxy: 311 flood complaints (graduated dots, no fill) ── */}
+      {activeLayers.proxy && (
+        <g aria-label="311 flood complaints, 2019-2025">
+          {[
+            [120, 320, 5], [180, 350, 8], [220, 280, 4], [280, 330, 11],
+            [340, 360, 6], [240, 240, 3], [380, 320, 9], [440, 350, 7],
+            [200, 220, 4], [160, 280, 5], [340, 240, 3], [420, 280, 4],
+            [500, 360, 6], [540, 400, 8], [180, 380, 5],
+          ].map(([x, y, r], i) => (
+            <circle key={i} cx={x} cy={y} r={r} fill="none" stroke="#6B6B6B" strokeWidth="1.25" />
+          ))}
+        </g>
+      )}
+
+      {/* ── Asset pins for register specialists ── */}
+      {/* Subway entrance ,  square */}
+      <g transform="translate(580 260)">
+        <rect x="-5" y="-5" width="10" height="10" fill="#1A1A1A" />
+        <text x="0" y="-9" fontSize="9" fontFamily="IBM Plex Sans" textAnchor="middle" fill="#1A1A1A" filter="url(#label-halo)">Smith–9 St</text>
+      </g>
+      {/* NYCHA ,  open square */}
+      <g transform="translate(420 200)">
+        <rect x="-5" y="-5" width="10" height="10" fill="none" stroke="#1A1A1A" strokeWidth="1.5"/>
+        <text x="0" y="-9" fontSize="9" fontFamily="IBM Plex Sans" textAnchor="middle" fill="#1A1A1A" filter="url(#label-halo)">Red Hook Houses</text>
+      </g>
+      {/* School ,  cross */}
+      <g transform="translate(360 280)" stroke="#1A1A1A" strokeWidth="1.75" fill="none">
+        <line x1="-5" y1="0" x2="5" y2="0"/><line x1="0" y1="-5" x2="0" y2="5"/>
+        <text x="8" y="3" fontSize="9" fontFamily="IBM Plex Sans" fill="#1A1A1A" filter="url(#label-halo)">PS 15</text>
+      </g>
+      {/* Hospital ,  circle */}
+      <g transform="translate(680 160)">
+        <circle r="5" fill="#1A1A1A"/>
+        <text x="8" y="3" fontSize="9" fontFamily="IBM Plex Sans" fill="#1A1A1A" filter="url(#label-halo)">NYU Cobble Hill</text>
+      </g>
+
+      {/* ── Queried-address pin (warm orange, dominant at z14+) ── */}
+      <g transform="translate(300 320)">
+        <circle r="14" fill="rgba(209,124,0,0.20)"/>
+        <circle r="6" fill="#D17C00" stroke="#FAFAF7" strokeWidth="2"/>
+        <line x1="0" y1="6" x2="0" y2="22" stroke="#D17C00" strokeWidth="2"/>
+        <text x="0" y="-12" fontSize="11" fontWeight="600" fontFamily="IBM Plex Sans" textAnchor="middle" fill="#1A1A1A" filter="url(#label-halo)">80 Pioneer St</text>
+      </g>
+
+      {/* ── Map labels (Imhof hierarchy: water italic, neighborhoods regular caps) ── */}
+      <text x="640" y="490" fontSize="13" fontStyle="italic" fontFamily="IBM Plex Sans" fill="#5A7B8A" filter="url(#label-halo)">Buttermilk Channel</text>
+      <text x="120" y="450" fontSize="13" fontStyle="italic" fontFamily="IBM Plex Sans" fill="#5A7B8A" filter="url(#label-halo)">Erie Basin</text>
+      <text x="180" y="40" fontSize="14" fontFamily="IBM Plex Sans" fontWeight="500" letterSpacing="0.18em" fill="#4A4A4A" filter="url(#label-halo)">RED HOOK</text>
+      <text x="600" y="40" fontSize="14" fontFamily="IBM Plex Sans" fontWeight="500" letterSpacing="0.18em" fill="#4A4A4A" filter="url(#label-halo)">CARROLL GARDENS</text>
+      <text x="425" y="265" fontSize="11" fontFamily="IBM Plex Sans" fill="#4A6B4A" filter="url(#label-halo)">Coffey Park</text>
+
+      {/* Street labels at z15+ */}
+      <text x="120" y="195" fontSize="10" fontFamily="IBM Plex Sans" fill="#6B6B6B" filter="url(#label-halo)">Van Brunt St</text>
+      <text x="120" y="295" fontSize="10" fontFamily="IBM Plex Sans" fill="#6B6B6B" filter="url(#label-halo)">Pioneer St</text>
+      <text x="120" y="345" fontSize="10" fontFamily="IBM Plex Sans" fill="#6B6B6B" filter="url(#label-halo)">Imlay St</text>
+
+      {/* ── Scale bar + zoom indicator (corners, like USGS quad) ── */}
+      <g transform="translate(20 530)" fontFamily="IBM Plex Mono" fontSize="10" fill="#4A4A4A">
+        <line x1="0" y1="-2" x2="80" y2="-2" stroke="#1A1A1A" strokeWidth="1.5"/>
+        <line x1="0" y1="-5" x2="0" y2="1" stroke="#1A1A1A" strokeWidth="1"/>
+        <line x1="40" y1="-5" x2="40" y2="1" stroke="#1A1A1A" strokeWidth="1"/>
+        <line x1="80" y1="-5" x2="80" y2="1" stroke="#1A1A1A" strokeWidth="1"/>
+        <text x="0" y="14">0</text>
+        <text x="40" y="14" textAnchor="middle">200</text>
+        <text x="80" y="14" textAnchor="middle">400 ft</text>
+      </g>
+      <g transform="translate(720 28)" fontFamily="IBM Plex Mono" fontSize="10" fill="#4A4A4A">
+        <text x="0" y="0">z 16 · 40.6776°N 74.0096°W</text>
+      </g>
+    </svg>
+  );
+};
+
+const MapLegend = ({ activeLayers, onToggle }) => {
+  const layers = [
+    { key: "empirical", tier: "empirical", label: "Sandy Inundation Zone (2012)", source: "NYC OEM" },
+    { key: "modeled", tier: "modeled", label: "FEMA Zone AE ,  preliminary FIRM", source: "FEMA" },
+    { key: "synthetic", tier: "synthetic", label: "Synthetic SAR (2025-09-14)", source: "TerraMind v1.2" },
+    { key: "proxy", tier: "proxy", label: "311 flood complaints, 2019–25", source: "NYC 311" },
+  ];
+  return (
+    <div className="map-legend" role="group" aria-label="Map layer toggles">
+      <div className="map-legend-head">
+        <span className="section-label">Layers</span>
+      </div>
+      {layers.map((l) => (
+        <button
+          key={l.key}
+          type="button"
+          className={`map-legend-item ${activeLayers[l.key] ? "is-on" : "is-off"}`}
+          onClick={() => onToggle(l.key)}
+          aria-pressed={activeLayers[l.key]}
+        >
+          <span className="map-legend-swatch" aria-hidden="true">
+            <TierGlyph tier={l.tier} size={11} color={`var(--tier-${l.tier})`} />
+          </span>
+          <span className="map-legend-text">
+            <span className="map-legend-label">{l.label}</span>
+            <span className="map-legend-source">{l.source} · <TierBadge tier={l.tier} compact /></span>
+          </span>
+          <span className="map-legend-toggle" aria-hidden="true">{activeLayers[l.key] ? "ON" : "OFF"}</span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+Object.assign(window, { RedHookMapMock, MapLegend });

docs/design_handoff/design_files/shell.jsx

@@ -0,0 +1,140 @@
+/* App shell + cold-start state + spec sections that live below the
+   prototype: typography spec, palette spec, glyph spec, MapLibre style.json
+   fragments, layout grids, PDF template preview, accessibility checklist,
+   design rationale, reference register sketches.
+*/
+
+const SAMPLE_QUERIES = [
+  { mode: "address", q: "80 Pioneer Street, Red Hook, Brooklyn",
+    sub: "Address-mode · Sandy edge · IBZ · NYCHA proximity" },
+  { mode: "neighborhood", q: "Far Rockaway flood exposure briefing",
+    sub: "Neighborhood-mode · chronic stormwater · 2050 SLR" },
+  { mode: "development", q: "Hunts Point proposed rezoning ,  flood-context check",
+    sub: "Development-check · CEQR §817 · 311 proxy density" },
+];
+
+const ColdStart = ({ onPick, onSubmit }) => {
+  const [v, setV] = useState("");
+  return (
+    <section className="cold-start" aria-label="Empty query state">
+      <div className="cold-start-band">
+        <p className="cold-start-deck">
+          <strong>Riprap</strong> is a citation-grounded Flood Exposure Briefing tool for New York City.
+          Type an address, neighborhood, or proposed development ,  Riprap returns a written briefing
+          where every numeric claim links to its primary public-record source.
+        </p>
+        <p className="cold-start-deck cold-start-deck-secondary">
+          Built for agency analysts, planners, journalists, community boards, and researchers.
+          <strong> Not for individual residents making personal property decisions.</strong>
+          {" "}For residents seeking flood guidance, see <a href="https://www.floodhelpny.org" className="cold-start-redir">FloodHelpNY</a>.
+          For real-time conditions, see <a href="https://www.floodnet.nyc" className="cold-start-redir">FloodNet NYC</a>.
+        </p>
+      </div>
+
+      <form
+        className="cold-start-form"
+        onSubmit={(e) => { e.preventDefault(); onSubmit?.(v); }}
+        role="search"
+      >
+        <label htmlFor="riprap-query" className="cold-start-label section-label">Query</label>
+        <div className="cold-start-input-row">
+          <input
+            id="riprap-query"
+            type="text"
+            value={v}
+            onChange={(e) => setV(e.target.value)}
+            placeholder="address · neighborhood · proposed development"
+            className="cold-start-input"
+            autoComplete="off"
+          />
+          <button type="submit" className="cold-start-submit">Generate briefing →</button>
+        </div>
+      </form>
+
+      <div className="cold-start-samples">
+        <span className="section-label cold-start-samples-label">Sample queries</span>
+        <div className="cold-start-samples-grid">
+          {SAMPLE_QUERIES.map((s, i) => (
+            <button
+              key={i}
+              type="button"
+              className="cold-start-sample"
+              onClick={() => onPick?.(s)}
+            >
+              <span className="cold-start-sample-mode">{s.mode}</span>
+              <span className="cold-start-sample-q">{s.q}</span>
+              <span className="cold-start-sample-sub">{s.sub}</span>
+              <span className="cold-start-sample-arrow" aria-hidden="true">↗</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="cold-start-trust">
+        <span className="section-label">How Riprap is built</span>
+        <p className="cold-start-thesis">
+          <strong>Cornerstone</strong> remembers. <strong>Keystone</strong> tallies.
+          {" "}<strong>Touchstone</strong> watches. <strong>Lodestone</strong> projects.
+          {" "}<strong>Capstone</strong> writes it all down with citations.
+        </p>
+        <ul className="cold-start-trust-list">
+          <li>Five named cognitive roles compose ~25 atomic specialists. <a href="#spec-stones">Architecture →</a></li>
+          <li>All foundation models <strong>Apache-2.0</strong>; no commercial APIs at runtime.</li>
+          <li>All data from public-record federal, state, and city sources.</li>
+          <li>Four epistemic tiers ,  empirical, modeled, proxy, synthetic prior ,  visible in the briefing margin and the trace.</li>
+          <li>Sections without supporting documents are omitted entirely. Silence over confabulation.</li>
+        </ul>
+        <a href="#methodology" className="cold-start-method-link">Methodology paper →</a>
+      </div>
+    </section>
+  );
+};
+
+const AppHeader = ({ query, onResetCold, onOpenMethodology }) => (
+  <header className="app-header" data-screen-label="App header">
+    <div className="app-header-inner">
+      <div className="app-header-left">
+        <span className="riprap-wordmark" aria-label="Riprap">riprap</span>
+        <span className="app-header-sep">/</span>
+        <span className="app-header-context">Flood Exposure Briefing</span>
+      </div>
+      <div className="app-header-mid">
+        <button
+          type="button"
+          className="app-header-query"
+          onClick={onResetCold}
+          aria-label="Edit query"
+        >
+          <span className="app-header-query-icon" aria-hidden="true">⌕</span>
+          <span className="app-header-query-text">{query}</span>
+          <span className="app-header-query-edit">edit</span>
+        </button>
+      </div>
+      <div className="app-header-right">
+        <a className="app-header-link" href="#methodology" onClick={(e) => { e.preventDefault(); onOpenMethodology?.(); }}>methodology</a>
+        <a className="app-header-link" href="#export-pdf">export PDF</a>
+        <span className="app-header-status" aria-live="polite">
+          <span className="app-header-status-dot" aria-hidden="true"></span>
+          live
+        </span>
+      </div>
+    </div>
+  </header>
+);
+
+const AppFooter = () => (
+  <footer className="app-footer">
+    <div className="app-footer-inner">
+      <p className="app-footer-guard">
+        <strong>Riprap does not predict damage.</strong>
+        {" "}This tool is for professional analytical work, not personal property decisions.
+        For residents, see <a href="https://www.floodhelpny.org">FloodHelpNY</a> · <a href="https://www.floodnet.nyc">FloodNet NYC</a>.
+      </p>
+      <p className="app-footer-build">
+        All foundation models Apache-2.0 · All data from public-record federal, state, and city sources · No commercial APIs contacted at runtime · Riprap v0.4.3 · build 2026-05-05
+      </p>
+    </div>
+  </footer>
+);
+
+Object.assign(window, { ColdStart, AppHeader, AppFooter });

docs/design_handoff/design_files/stone-evidence.jsx

@@ -0,0 +1,140 @@
+/* Riprap v0.4.4 ,  Unified Stone bands.
+   Each Stone holds: header (name + aggregate) → evidence cards → collapsed trace.
+   This replaces the duplicated "evidence grouped by stone" + "trace grouped by stone".
+*/
+
+const { useState: useSEv44 } = React;
+
+const EVIDENCE_BY_STONE = {
+  cornerstone: ["e1", "e3", "e4"],   // USGS HWMs · FEMA FIRM · DEP stormwater
+  keystone:    [],                    // (no exposure-register cards in current EVIDENCE ,  Keystone-silent)
+  touchstone:  ["e2", "e7"],          // FloodNet sensor · 311 complaints
+  lodestone:   ["e5"],                // NPCC4 SLR projection
+  capstone:    ["e6", "e8"],          // synthesis-tier outputs
+};
+
+const STONE_LOOKUP_V44 = {
+  cornerstone: { name: "Cornerstone", role: "the hazard reader",  tag: "what NYC's ground remembers" },
+  keystone:    { name: "Keystone",    role: "the asset register", tag: "what's exposed" },
+  touchstone:  { name: "Touchstone",  role: "the live observer",  tag: "what's happening now" },
+  lodestone:   { name: "Lodestone",   role: "the projector",      tag: "what's coming" },
+  capstone:    { name: "Capstone",    role: "the synthesizer",    tag: "writes it all down with citations" },
+};
+
+/* Walk a Stone's trace members (incl. nested children) into a flat list for tally. */
+const flattenMembers = (members) =>
+  members.flatMap((m) => (m.children ? [m, ...flattenMembers(m.children)] : [m]));
+
+const StoneTally = ({ cards, members }) => {
+  const flat = flattenMembers(members);
+  const fired = flat.filter((m) => m.status === "ok").length;
+  const silent = flat.filter((m) => m.status === "silent").length;
+  const warn = flat.filter((m) => m.status === "warn").length;
+  const error = flat.filter((m) => m.status === "error").length;
+  const ms = members.reduce((acc, m) => Math.max(acc, m.ms || 0), 0);
+  const fmt = (x) => (x === 0 ? ", " : x < 1000 ? x + "ms" : (x / 1000).toFixed(1) + "s");
+  return (
+    <span className="stone-uni-agg">
+      <span className="stone-uni-agg-cards">{cards.length} card{cards.length === 1 ? "" : "s"}</span>
+      <span className="stone-uni-agg-sep">·</span>
+      <span className="stone-uni-agg-num">{fired}</span> fired
+      {silent > 0 && <>{" · "}<span className="stone-uni-agg-num">{silent}</span> silent</>}
+      {warn > 0 && <>{" · "}<span className="stone-uni-agg-warn">{warn} warn</span></>}
+      {error > 0 && <>{" · "}<span className="stone-uni-agg-err">{error} error</span></>}
+      <span className="stone-uni-agg-sep">·</span>
+      <span className="stone-uni-agg-ms">{fmt(ms)}</span>
+    </span>
+  );
+};
+
+const UnifiedStoneBand = ({ stone, cardIds, onCite }) => {
+  const meta = STONE_LOOKUP_V44[stone.key];
+  const cards = cardIds.map((id) => EVIDENCE.find((e) => e.id === id)).filter(Boolean);
+  const traceCount = flattenMembers(stone.members).length;
+  const [traceOpen, setTraceOpen] = useSEv44(false);
+
+  return (
+    <section className={`stone-uni stone-uni-${stone.key}`} aria-labelledby={`stone-uni-h-${stone.key}`}>
+      <header className="stone-uni-head">
+        <div className="stone-uni-head-left">
+          <h3 id={`stone-uni-h-${stone.key}`} className="stone-uni-name">{meta.name}</h3>
+          <span className="stone-uni-role">,  {meta.role}</span>
+          <span className="stone-uni-tag">{meta.tag}</span>
+        </div>
+        <StoneTally cards={cards} members={stone.members}/>
+      </header>
+
+      {/* Findings ,  primary surface */}
+      {cards.length === 0 ? (
+        <div className="stone-uni-empty">
+          <span className="section-label">silent</span>
+          <p>No exposure-register cards landed for this query ,  Keystone's atomic functions all fired (5 joins, see trace) but none of the asset registers (MTA, NYCHA, DOE, DOH, PLUTO) returned a hit at this address.</p>
+        </div>
+      ) : (
+        <div className="stone-uni-rail">
+          {cards.map((ev) => <EvidenceCard key={ev.id} ev={ev} onCite={onCite}/>)}
+        </div>
+      )}
+
+      {/* Provenance ,  collapsed by default */}
+      <div className="stone-uni-trace">
+        <button
+          className="stone-uni-trace-toggle"
+          aria-expanded={traceOpen}
+          onClick={() => setTraceOpen((o) => !o)}
+        >
+          <span className="stone-uni-trace-caret" aria-hidden="true">{traceOpen ? "▾" : "▸"}</span>
+          <span className="stone-uni-trace-label">
+            {traceOpen ? "Hide" : "Show"} provenance · {traceCount} function{traceCount === 1 ? "" : "s"}
+          </span>
+        </button>
+        {traceOpen && (
+          <div className="stone-uni-trace-body">
+            {stone.members.map((m) => <window.TraceRow key={m.id} m={m}/>)}
+          </div>
+        )}
+      </div>
+    </section>
+  );
+};
+
+/* Global tally strip ,  at-a-glance run health */
+const RunHealthStrip = () => {
+  const allMembers = STONES.flatMap((s) => flattenMembers(s.members));
+  const fired = allMembers.filter((m) => m.status === "ok").length;
+  const total = allMembers.length;
+  const silent = allMembers.filter((m) => m.status === "silent").length;
+  const warn = allMembers.filter((m) => m.status === "warn").length;
+  const error = allMembers.filter((m) => m.status === "error").length;
+  const totalCards = Object.values(EVIDENCE_BY_STONE).reduce((n, ids) => n + ids.length, 0);
+  return (
+    <div className="run-health">
+      <span className="run-health-item"><strong>5</strong> Stones</span>
+      <span className="run-health-sep">·</span>
+      <span className="run-health-item"><strong>{fired}/{total}</strong> functions fired</span>
+      <span className="run-health-sep">·</span>
+      <span className="run-health-item"><strong>{totalCards}</strong> evidence cards</span>
+      <span className="run-health-sep">·</span>
+      <span className="run-health-item run-health-time"><strong>14.0s</strong> wall-clock</span>
+      {silent > 0 && <><span className="run-health-sep">·</span><span className="run-health-item run-health-silent">{silent} silent</span></>}
+      {warn > 0 && <><span className="run-health-sep">·</span><span className="run-health-item run-health-warn">{warn} warn</span></>}
+      {error > 0 && <><span className="run-health-sep">·</span><span className="run-health-item run-health-error">{error} error</span></>}
+    </div>
+  );
+};
+
+const UnifiedStoneLayout = ({ onCite }) => (
+  <section className="stone-uni-layout" aria-label="Findings and provenance, grouped by Stone">
+    <RunHealthStrip/>
+    {STONES.map((stone) => (
+      <UnifiedStoneBand
+        key={stone.key}
+        stone={stone}
+        cardIds={EVIDENCE_BY_STONE[stone.key] || []}
+        onCite={onCite}
+      />
+    ))}
+  </section>
+);
+
+Object.assign(window, { UnifiedStoneLayout });

docs/design_handoff/design_files/stones-trace.jsx

@@ -0,0 +1,164 @@
+/* Riprap v0.4.4 ,  Stone-banded trace (Treatment A).
+   Pulled out of the deleted spec-v043.jsx; this is what the mockup uses.
+*/
+
+const { useState: useStV44, useEffect: useEfV44 } = React;
+
+const STONES = [
+  {
+    key: "cornerstone", name: "Cornerstone", role: "the hazard reader",
+    tag: "what NYC's ground remembers",
+    members: [
+      { id: "c1", name: "sandy_inundation.lookup",  status: "ok",   ms: 380, tier: "empirical" },
+      { id: "c2", name: "usgs_hwm.spatial_join",     status: "ok",   ms: 460, tier: "empirical" },
+      { id: "c3", name: "fema_firm.lookup",          status: "ok",   ms: 290, tier: "modeled" },
+      { id: "c4", name: "dep_stormwater.lookup",     status: "ok",   ms: 540, tier: "modeled" },
+      { id: "c5", name: "prithvi.historical_segment",status: "warn", ms: 1240, tier: "modeled",
+        warning: "deprecation: Prithvi-100M v1 → v2 migration scheduled 2026-Q3" },
+    ],
+  },
+  {
+    key: "keystone", name: "Keystone", role: "the asset register",
+    tag: "what's exposed",
+    members: [
+      { id: "k1", name: "mta.entrance_join",      status: "ok", ms: 220, tier: "empirical" },
+      { id: "k2", name: "nycha.development_join", status: "ok", ms: 538, tier: "empirical" },
+      { id: "k3", name: "doe.school_join",        status: "ok", ms: 180, tier: "empirical" },
+      { id: "k4", name: "doh.facility_join",      status: "ok", ms: 210, tier: "empirical" },
+      { id: "k5", name: "pluto.lot_lookup",       status: "ok", ms: 142, tier: "empirical" },
+    ],
+  },
+  {
+    key: "touchstone", name: "Touchstone", role: "the live observer",
+    tag: "what's happening now",
+    members: [
+      { id: "t1", name: "floodnet.history",      status: "ok",     ms: 1240, tier: "empirical" },
+      { id: "t2", name: "nyc311.flood_complaints", status: "ok",   ms: 880, tier: "proxy" },
+      { id: "t3", name: "tidalgauge.recent",      status: "silent", ms: 0,  tier: "empirical",
+        note: "out of range (gauge >2km from address)" },
+    ],
+  },
+  {
+    key: "lodestone", name: "Lodestone", role: "the projector",
+    tag: "what's coming",
+    members: [
+      { id: "l1", name: "npcc4.slr_projection", status: "ok", ms: 320, tier: "modeled" },
+      { id: "l2", name: "ttm.foundation_run", status: "ok", ms: 14000, tier: "modeled",
+        children: [
+          { id: "l2a", name: "ttm.zarr_load",        status: "ok",    ms: 2400, tier: "modeled" },
+          { id: "l2b", name: "ttm.checkpoint",        status: "error", ms: 10750, tier: "modeled",
+            error: "checkpoint architecture mismatch (ttm-r2 vs ttm-r1 weights)" },
+          { id: "l2c", name: "ttm.cpu_inference",    status: "ok",    ms: 850,  tier: "modeled" },
+        ],
+      },
+      { id: "l3", name: "terramind.synthetic_sar", status: "ok", ms: 8200, tier: "synthetic" },
+      { id: "l4", name: "nfip.claims_aggregation", status: "ok", ms: 460, tier: "proxy" },
+    ],
+  },
+  {
+    key: "capstone", name: "Capstone", role: "the synthesizer",
+    tag: "writes it all down with citations",
+    members: [
+      { id: "p1", name: "granite.compose_briefing",  status: "ok", ms: 3200, tier: "modeled" },
+      { id: "p2", name: "mellea.grounding_check",    status: "ok", ms: 480,  tier: "modeled" },
+      { id: "p3", name: "weasyprint.render_artifact",status: "ok", ms: 920,  tier: null },
+    ],
+  },
+];
+
+const fmtMs = (ms) => ms === 0 ? ", " : ms < 1000 ? ms + "ms" : (ms / 1000).toFixed(1) + "s";
+const tierColor = (t) => t ? `var(--tier-${t})` : "var(--ink-tertiary)";
+
+const StoneAggregate = ({ stone }) => {
+  const flat = (members) => members.flatMap(m => m.children ? [m, ...flat(m.children)] : [m]);
+  const all = flat(stone.members);
+  const fired = all.filter(m => m.status === "ok").length;
+  const silent = all.filter(m => m.status === "silent").length;
+  const warn = all.filter(m => m.status === "warn").length;
+  const error = all.filter(m => m.status === "error").length;
+  const ms = stone.members.reduce((acc, m) => Math.max(acc, m.ms || 0), 0);
+  return (
+    <span className="stone-band-agg">
+      <span className="stone-band-agg-num">{fired}</span> fired
+      {silent > 0 && <> · <span className="stone-band-agg-num">{silent}</span> silent</>}
+      {warn > 0 && <> · <span className="stone-band-agg-warn">{warn} warn</span></>}
+      {error > 0 && <> · <span className="stone-band-agg-err">{error} error</span></>}
+      {" · "}<span className="stone-band-agg-ms">{fmtMs(ms)}</span>
+    </span>
+  );
+};
+
+const TraceRow = ({ m, indent = 16 }) => {
+  if (m.children) {
+    return (
+      <details className="trace-row trace-row-group" style={{ paddingLeft: indent }} open>
+        <summary>
+          <span className="trace-bullet">▸</span>
+          <span className="trace-name">{m.name}</span>
+          <span className="trace-status">{m.status}</span>
+          <span className="trace-tier" style={{ color: tierColor(m.tier) }}>{m.tier || ""}</span>
+          <span className="trace-ms">{fmtMs(m.ms)}</span>
+        </summary>
+        {m.children.map(c => <TraceRow key={c.id} m={c} indent={indent + 16}/>)}
+      </details>
+    );
+  }
+  if (m.status === "error") {
+    return (
+      <div className="trace-row trace-row-error" style={{ paddingLeft: indent }}>
+        <span className="trace-bullet">●</span>
+        <span className="trace-name">{m.name}</span>
+        <span className="trace-status trace-status-err">error</span>
+        <span className="trace-tier" style={{ color: tierColor(m.tier) }}>{m.tier || ""}</span>
+        <span className="trace-ms">{fmtMs(m.ms)}</span>
+        <span className="trace-error-summary">{m.error}</span>
+      </div>
+    );
+  }
+  return (
+    <div className={`trace-row trace-row-${m.status}`} style={{ paddingLeft: indent }}>
+      <span className="trace-bullet">{m.status === "silent" ? "□" : m.status === "warn" ? "!" : "·"}</span>
+      <span className="trace-name">{m.name}</span>
+      <span className="trace-status">{m.status}</span>
+      <span className="trace-tier" style={{ color: tierColor(m.tier) }}>{m.tier || ""}</span>
+      <span className="trace-ms">{fmtMs(m.ms)}</span>
+      {m.warning && <span className="trace-warn-note">{m.warning}</span>}
+      {m.note && <span className="trace-note">{m.note}</span>}
+    </div>
+  );
+};
+
+const StoneBand = ({ stone }) => {
+  const [open, setOpen] = useStV44(true);
+  return (
+    <section className={`stone-band stone-band-${stone.key}`} aria-labelledby={`band-h-${stone.key}`}>
+      <button className="stone-band-head" aria-expanded={open} onClick={() => setOpen(o => !o)}>
+        <span className="stone-band-head-left">
+          <span id={`band-h-${stone.key}`} className="stone-band-name">{stone.name}</span>
+          <span className="stone-band-role">,  {stone.role}</span>
+          <span className="stone-band-tag">{stone.tag}</span>
+        </span>
+        <StoneAggregate stone={stone}/>
+      </button>
+      {open && (
+        <div className="stone-band-body">
+          {stone.members.map(m => <TraceRow key={m.id} m={m}/>)}
+        </div>
+      )}
+    </section>
+  );
+};
+
+const StoneTrace = () => {
+  return (
+    <div className="trace-ui-v44">
+      <header className="stone-trace-head">
+        <span className="section-label">Run trace · 5 Stones</span>
+        <span className="stone-trace-tally">17 fired · 1 silent · 1 warn · 1 error · 14.0s</span>
+      </header>
+      {STONES.map(s => <StoneBand key={s.key} stone={s}/>)}
+    </div>
+  );
+};
+
+Object.assign(window, { StoneTrace, STONES, TraceRow, fmtMs, tierColor });

docs/design_handoff/design_files/styles.css

@@ -0,0 +1,1122 @@
+/* Riprap component styles. Civic-tech-clean. */
+
+/* ── App header ────────────────────────────────────────── */
+.app-header {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: var(--paper);
+  border-bottom: 2px solid var(--ink);
+}
+.app-header-inner {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding: 14px 28px;
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 24px;
+}
+.app-header-left { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 13px; }
+.app-header-sep { color: var(--ink-tertiary); }
+.app-header-context { color: var(--ink-secondary); letter-spacing: 0.04em; }
+.app-header-mid { display: flex; justify-content: center; }
+.app-header-query {
+  background: var(--paper-deep);
+  border: 1px solid var(--rule-soft);
+  padding: 8px 14px;
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--ink);
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 360px;
+  text-align: left;
+}
+.app-header-query-icon { color: var(--ink-tertiary); }
+.app-header-query-edit {
+  margin-left: auto;
+  font-size: 11px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--ink-tertiary);
+}
+.app-header-right { display: flex; align-items: center; justify-content: flex-end; gap: 18px; font-family: var(--font-mono); font-size: 12px; }
+.app-header-link { color: var(--ink-secondary); text-decoration: none; border-bottom: 1px solid transparent; }
+.app-header-link:hover { border-bottom-color: var(--ink); color: var(--ink); }
+.app-header-status { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.1em; font-size: 11px; }
+.app-header-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-graphical); display: inline-block; }
+
+/* ── Hero band (prototype) ───────────────────────────────── */
+.hero-band { background: var(--paper); border-bottom: 1px solid var(--rule-soft); }
+.hero-band-inner { max-width: 1600px; margin: 0 auto; padding: 32px 28px 56px; }
+
+/* ── App shell layout ────────────────────────────────────── */
+.app-shell {
+  display: grid;
+  gap: 24px;
+}
+.app-shell-desktop {
+  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
+  grid-template-areas:
+    "brief map"
+    "brief cites"
+    "evidence evidence"
+    "trace trace";
+}
+.app-shell-tablet {
+  grid-template-columns: 1fr;
+  grid-template-areas: "map" "brief" "cites" "evidence" "trace";
+}
+.app-shell-mobile {
+  grid-template-columns: 1fr;
+  grid-template-areas: "brief" "map" "cites" "evidence" "trace";
+}
+.app-region-brief { grid-area: brief; }
+.app-region-map { grid-area: map; position: sticky; top: 80px; align-self: start; max-height: calc(100vh - 96px); display: flex; flex-direction: column; }
+.app-region-map .map-frame { flex: 1; min-height: 0; }
+.app-region-cites { grid-area: cites; }
+.app-region-evidence { grid-area: evidence; }
+.app-region-trace { grid-area: trace; }
+
+@media (max-width: 1099px) {
+  .app-region-map { position: static; }
+}
+
+.region-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid var(--rule-soft);
+  padding-bottom: 8px;
+  margin-bottom: 16px;
+}
+.region-head-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.region-action {
+  background: transparent;
+  border: 1px solid var(--rule-soft);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 4px 10px;
+  cursor: pointer;
+  color: var(--ink-secondary);
+}
+.region-action:hover { border-color: var(--ink); color: var(--ink); }
+
+.brief-h1 {
+  font-size: 13px;
+  line-height: 1.2;
+  font-weight: 500;
+  margin: 0 0 22px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ink-tertiary);
+  font-family: var(--font-mono);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 14px 18px;
+  align-items: end;
+  padding-bottom: 14px;
+  border-bottom: 2px solid var(--ink);
+}
+.brief-h1-addr {
+  display: block;
+  grid-column: 1;
+  grid-row: 1;
+  font-family: var(--font-serif);
+  font-size: 32px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  text-transform: none;
+  color: var(--ink);
+  line-height: 1.1;
+  margin-top: 4px;
+}
+.brief-h1-eyebrow {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  display: block;
+}
+.brief-h1-meta {
+  grid-column: 2;
+  grid-row: 1;
+  align-self: end;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  text-align: right;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-tertiary);
+  text-transform: none;
+  letter-spacing: 0.04em;
+}
+.brief-h1-meta-row { display: flex; gap: 6px; justify-content: flex-end; }
+.brief-h1-meta-key { color: var(--ink-tertiary); }
+.brief-h1-meta-val { color: var(--ink); font-weight: 500; }
+
+/* ── Briefing prose ──────────────────────────────────────── */
+.briefing-prose {
+  font-size: 16px;
+  line-height: var(--leading-prose);
+  max-width: 70ch;
+  position: relative;
+}
+.briefing-status {
+  border-left: 2px solid var(--ink);
+  padding: 4px 0 4px 14px;
+  margin-bottom: 24px;
+  font-size: 14px;
+  color: var(--ink-secondary);
+}
+.briefing-deck strong { color: var(--ink); font-weight: 600; }
+.briefing-meta { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); margin-top: 6px; letter-spacing: 0.04em; }
+
+.briefing-section-head {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  font-size: 22px;
+  font-weight: 600;
+  margin: 32px 0 12px;
+  border-top: 2px solid var(--ink);
+  padding-top: 16px;
+  flex-wrap: wrap;
+}
+.briefing-section-num {
+  font-family: var(--font-mono);
+  font-size: 13px;
+  color: var(--ink-tertiary);
+  letter-spacing: 0.06em;
+  font-weight: 500;
+}
+.briefing-section-label { font-family: var(--font-sans); font-weight: 600; }
+.briefing-section-title {
+  font-family: var(--font-sans);
+  font-size: 14px;
+  font-weight: 400;
+  color: var(--ink-secondary);
+  font-style: italic;
+}
+.briefing-section-tier { font-size: 11px; }
+
+.briefing-para {
+  margin: 0 0 18px;
+  padding-left: 22px;
+  position: relative;
+  text-wrap: pretty;
+}
+
+.claim {
+  position: relative;
+}
+.claim-glyph {
+  position: absolute;
+  left: -22px;
+  top: 6px;
+  display: inline-block;
+}
+.claim-empirical .claim-body { /* default */ }
+.claim-modeled .claim-body { /* default */ }
+.claim-proxy .claim-body { color: var(--ink-secondary); }
+.claim-synthetic .claim-body {
+  background: linear-gradient(transparent 60%, rgba(42,111,168,0.15) 60%);
+  padding: 0 1px;
+}
+
+.inline-cite {
+  color: var(--tier-empirical);
+  font-family: var(--font-sans);
+  font-weight: 500;
+  text-decoration: none;
+  font-size: 14px;
+}
+.inline-cite sup { font-size: 0.78em; }
+.inline-cite:hover { background: rgba(11,83,148,0.08); }
+
+.is-dense .briefing-section-head { margin: 18px 0 10px; padding-top: 12px; }
+.is-dense .briefing-para { margin-bottom: 12px; }
+
+.streaming-caret {
+  display: inline-block;
+  color: var(--accent-graphical);
+  animation: blink 1s steps(2) infinite;
+  margin-left: 2px;
+}
+@keyframes blink { 50% { opacity: 0; } }
+
+/* ── Citation drawer ─────────────────────────────────────── */
+.citation-drawer {
+  border-top: 1px solid var(--rule-soft);
+  border-bottom: 1px solid var(--rule-soft);
+  padding: 16px 0;
+  font-size: 13px;
+}
+.citation-drawer-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  border-bottom: 1px solid var(--rule-soft);
+  padding-bottom: 8px;
+  margin-bottom: 12px;
+}
+.citation-drawer-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.citation-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
+.citation-item {
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  gap: 8px;
+  padding: 10px 12px;
+  border-left: 2px solid var(--rule-soft);
+  transition: background 200ms;
+}
+.citation-item.is-active {
+  border-left-color: var(--accent-graphical);
+  background: rgba(209,124,0,0.06);
+}
+.citation-num { font-family: var(--font-mono); color: var(--ink-tertiary); font-size: 12px; }
+.citation-line-1 { display: flex; align-items: center; gap: 8px; }
+.citation-source { font-weight: 600; }
+.citation-vintage { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); margin-left: auto; }
+.citation-title { font-size: 13px; line-height: 1.4; margin: 4px 0; color: var(--ink-secondary); }
+.citation-meta { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.citation-drawer-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--rule-soft); }
+.citation-foot-copy { font-size: 12px; color: var(--ink-tertiary); margin: 6px 0 0; max-width: 60ch; }
+
+/* ── Map ─────────────────────────────────────────────────── */
+.map-frame {
+  position: relative;
+  border: 1px solid var(--ink);
+  background: var(--paper-deep);
+  aspect-ratio: 8 / 5.6;
+  overflow: hidden;
+}
+.map-legend {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  background: rgba(250, 250, 247, 0.96);
+  border: 1px solid var(--ink);
+  padding: 10px 12px 12px;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  backdrop-filter: blur(4px);
+}
+.map-legend-head { padding-bottom: 6px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 4px; }
+.map-legend-item {
+  display: grid;
+  grid-template-columns: 16px 1fr auto;
+  gap: 10px;
+  align-items: center;
+  background: transparent;
+  border: 0;
+  padding: 6px 4px;
+  text-align: left;
+  cursor: pointer;
+  font-family: var(--font-sans);
+  border-bottom: 1px solid transparent;
+  min-height: 44px;
+}
+.map-legend-item:hover { background: rgba(0,0,0,0.03); }
+.map-legend-item.is-off { opacity: 0.45; }
+.map-legend-text { display: flex; flex-direction: column; gap: 2px; }
+.map-legend-label { font-size: 12px; line-height: 1.3; color: var(--ink); }
+.map-legend-source { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); display: inline-flex; gap: 6px; align-items: center; }
+.map-legend-toggle { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-tertiary); }
+.is-on .map-legend-toggle { color: var(--accent); }
+
+/* ── Trace UI ────────────────────────────────────────────── */
+.trace-ui {
+  border: 1px solid var(--rule-soft);
+  background: var(--paper-deep);
+}
+.trace-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 10px 16px;
+  border-bottom: 1px solid var(--rule-soft);
+}
+.trace-head-left { display: flex; align-items: center; gap: 14px; }
+.trace-head-meta { display: flex; gap: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
+.trace-head-sep { color: var(--ink-tertiary); }
+.trace-head-silent { color: var(--accent); }
+.trace-collapse-btn {
+  background: transparent;
+  border: 1px solid var(--rule-soft);
+  font-family: var(--font-mono);
+  font-size: 11px;
+  padding: 4px 10px;
+  cursor: pointer;
+  color: var(--ink-secondary);
+}
+.trace-col-heads {
+  display: grid;
+  grid-template-columns: 28px 24px 1fr 80px 140px;
+  gap: 8px;
+  padding: 8px 16px 6px;
+  border-bottom: 1px solid var(--rule-soft);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-tertiary);
+}
+.trace-tree { font-family: var(--font-mono); font-size: 13px; }
+.trace-row { border-bottom: 1px solid var(--rule-soft); }
+.trace-row-toggle {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 16px 24px 1fr 80px 140px;
+  gap: 8px;
+  align-items: center;
+  background: transparent;
+  border: 0;
+  padding: 6px 16px 6px 0;
+  text-align: left;
+  cursor: pointer;
+  color: var(--ink);
+  min-height: 36px;
+}
+.trace-row-toggle[disabled] { cursor: default; }
+.trace-row-toggle:hover:not([disabled]) { background: rgba(0,0,0,0.025); }
+.trace-tree-glyph { color: var(--ink-tertiary); }
+.trace-name { color: var(--ink); }
+.trace-note { color: var(--ink-tertiary); }
+.trace-ms-col { color: var(--ink-secondary); }
+.trace-tier-col { display: inline-flex; align-items: center; gap: 6px; }
+.trace-row-silent .trace-name { color: var(--ink-tertiary); }
+.trace-silent-tag {
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: var(--accent);
+  border: 1px solid var(--accent);
+  padding: 1px 5px;
+}
+.trace-status-glyph { color: var(--ink-tertiary); font-size: 13px; }
+.trace-output {
+  padding: 4px 16px 8px 0;
+  font-size: 12px;
+  color: var(--ink-secondary);
+  display: flex;
+  gap: 10px;
+  align-items: baseline;
+  border-top: 1px dashed var(--rule-soft);
+  background: rgba(0,0,0,0.015);
+}
+.trace-output-prefix { color: var(--ink-tertiary); }
+.trace-output-claims { margin-left: auto; padding-right: 16px; font-family: var(--font-mono); font-size: 11px; color: var(--accent); }
+
+/* ── Evidence cards ──────────────────────────────────────── */
+.evidence-grid-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  border-bottom: 1px solid var(--rule-soft);
+  padding-bottom: 8px;
+  margin-bottom: 16px;
+}
+.evidence-grid-meta { display: flex; gap: 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); }
+.evidence-grid-tally { display: inline-flex; align-items: center; gap: 4px; }
+.evidence-grid-rail {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.evidence-card {
+  border: 1px solid var(--rule-soft);
+  background: var(--paper);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+  border-top: 3px solid var(--ink);
+}
+.evidence-card-empirical { border-top-color: var(--tier-empirical); }
+.evidence-card-modeled { border-top-color: var(--tier-modeled); }
+.evidence-card-proxy { border-top-color: var(--tier-proxy); }
+.evidence-card-synthetic { border-top-color: var(--tier-synthetic); border-top-style: dashed; }
+
+.evidence-card-head { display: flex; justify-content: space-between; align-items: center; }
+.evidence-card-source { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 13px; }
+.evidence-card-vintage { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.evidence-card-title { font-size: 14px; font-weight: 600; line-height: 1.3; margin: 0; }
+.evidence-card-body { padding: 4px 0; }
+.evidence-scalar-value { font-size: 24px; font-weight: 600; line-height: 1.1; font-family: var(--font-serif); }
+.evidence-scalar-unit { font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); margin-top: 2px; }
+.evidence-scalar-aux { font-size: 12px; color: var(--ink-tertiary); margin-top: 4px; line-height: 1.4; }
+.evidence-spark-headline { font-size: 18px; font-weight: 600; font-family: var(--font-serif); margin-bottom: 4px; }
+.evidence-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
+.evidence-table th, .evidence-table td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--rule-soft); }
+.evidence-table th { color: var(--ink-tertiary); font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; }
+.evidence-thumb { display: flex; flex-direction: column; gap: 6px; }
+.evidence-card-foot {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: 8px;
+  border-top: 1px solid var(--rule-soft);
+}
+.evidence-card-cite {
+  background: transparent;
+  border: 0;
+  font-family: var(--font-mono);
+  font-size: 11px;
+  color: var(--ink-secondary);
+  cursor: pointer;
+  padding: 4px 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+.evidence-card-cite:hover { color: var(--accent); }
+.evidence-card-cite-arrow { color: var(--ink-tertiary); }
+
+/* ── Cold start ─────────────────────────────────────────── */
+.cold-start { max-width: 920px; margin: 0 auto; padding: 32px 0; }
+.cold-start-band { border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule-soft); padding: 24px 0; margin-bottom: 32px; }
+.cold-start-deck { font-size: 18px; line-height: 1.5; max-width: 70ch; margin: 0 0 12px; text-wrap: pretty; }
+.cold-start-deck-secondary { font-size: 14px; color: var(--ink-secondary); }
+.cold-start-redir { color: var(--accent); border-bottom: 1px solid var(--accent); text-decoration: none; }
+.cold-start-form { margin-bottom: 32px; }
+.cold-start-label { display: block; margin-bottom: 8px; }
+.cold-start-input-row { display: grid; grid-template-columns: 1fr auto; gap: 0; border: 2px solid var(--ink); }
+.cold-start-input { padding: 14px 16px; font-family: var(--font-mono); font-size: 14px; border: 0; background: var(--paper); color: var(--ink); }
+.cold-start-input:focus { outline: 0; background: var(--paper-deep); }
+.cold-start-submit { background: var(--ink); color: var(--paper); border: 0; padding: 0 20px; font-family: var(--font-mono); font-size: 13px; cursor: pointer; letter-spacing: 0.04em; }
+.cold-start-submit:hover { background: var(--accent); }
+.cold-start-samples { margin-bottom: 32px; }
+.cold-start-samples-label { display: block; margin-bottom: 12px; }
+.cold-start-samples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
+.cold-start-sample {
+  text-align: left;
+  background: var(--paper-deep);
+  border: 1px solid var(--rule-soft);
+  padding: 14px 16px;
+  font-family: var(--font-sans);
+  cursor: pointer;
+  display: grid;
+  gap: 4px;
+  position: relative;
+  min-height: 80px;
+}
+.cold-start-sample:hover { border-color: var(--ink); }
+.cold-start-sample-mode { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
+.cold-start-sample-q { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink); }
+.cold-start-sample-sub { font-size: 11px; color: var(--ink-tertiary); font-family: var(--font-mono); }
+.cold-start-sample-arrow { position: absolute; top: 12px; right: 14px; color: var(--ink-tertiary); }
+.cold-start-trust { border-top: 1px solid var(--rule-soft); padding-top: 16px; }
+.cold-start-trust-list { font-size: 13px; line-height: 1.5; color: var(--ink-secondary); padding-left: 18px; margin: 8px 0; }
+.cold-start-method-link { font-family: var(--font-mono); font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--ink); text-decoration: none; }
+
+/* ── Spec band ──────────────────────────────────────────── */
+.spec-band { background: var(--paper-deep); border-top: 2px solid var(--ink); }
+.spec-band-inner { max-width: 1600px; margin: 0 auto; padding: 56px 28px 80px; }
+.spec-band-head { max-width: 70ch; margin-bottom: 56px; }
+.spec-band-title { font-size: 42px; line-height: 1.1; font-weight: 600; margin: 12px 0 16px; letter-spacing: -0.02em; font-family: var(--font-serif); }
+.spec-band-deck { font-size: 17px; line-height: 1.5; color: var(--ink-secondary); }
+.spec-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0; margin-top: 32px; border-top: 1px solid var(--rule-soft); border-left: 1px solid var(--rule-soft); }
+.spec-toc-item { display: flex; gap: 8px; padding: 10px 14px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); text-decoration: none; color: var(--ink); background: var(--paper); font-family: var(--font-mono); font-size: 12px; align-items: baseline; }
+.spec-toc-item:hover { background: var(--paper-deep); color: var(--accent); }
+.spec-toc-n { color: var(--ink-tertiary); }
+
+.spec-section { padding: 48px 0; border-top: 2px solid var(--ink); }
+.spec-section-head { max-width: 70ch; margin-bottom: 32px; display: flex; flex-direction: column; gap: 6px; }
+.spec-section-title { font-size: 32px; line-height: 1.15; font-weight: 600; margin: 4px 0 12px; font-family: var(--font-serif); }
+.spec-section-deck { font-size: 15px; line-height: 1.55; color: var(--ink-secondary); margin: 0; }
+
+/* Overview */
+.overview-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0; border-top: 1px solid var(--rule-soft); border-left: 1px solid var(--rule-soft); }
+.overview-tier { padding: 20px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); background: var(--paper); display: flex; flex-direction: column; gap: 10px; }
+.overview-tier-head { display: flex; align-items: center; gap: 10px; }
+.overview-tier-name { font-size: 16px; font-weight: 600; }
+.overview-tier-desc { font-size: 13px; color: var(--ink-secondary); margin: 0; line-height: 1.5; }
+.overview-tier-ex { font-size: 11px; font-family: var(--font-mono); color: var(--ink-tertiary); margin: 0; line-height: 1.5; }
+
+/* Palette */
+.palette-grid { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
+.palette-row {
+  display: grid;
+  grid-template-columns: 60px 1.6fr 1.2fr 1.4fr 2fr;
+  gap: 16px;
+  align-items: center;
+  padding: 14px 0;
+  border-bottom: 1px solid var(--rule-soft);
+  font-size: 13px;
+}
+.palette-swatch { width: 48px; height: 48px; border: 1px solid var(--rule-soft); }
+.palette-swatch.is-syn { background-image: repeating-linear-gradient(45deg, transparent 0, transparent 3px, #2A6FA8 3px, #2A6FA8 4px); }
+.palette-name { font-weight: 600; font-size: 14px; }
+.palette-token { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.palette-hex { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
+.palette-contrast-ratio { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
+.palette-contrast-grade { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; }
+.palette-contrast-aaa, .palette-contrast-aa { color: var(--tier-empirical); }
+.palette-contrast-decorative { color: var(--ink-tertiary); }
+.palette-note { font-size: 12px; color: var(--ink-secondary); line-height: 1.4; }
+.cvd-strip { margin-top: 24px; padding: 16px; background: var(--paper); border: 1px solid var(--rule-soft); }
+.cvd-copy { font-size: 13px; line-height: 1.55; color: var(--ink-secondary); margin: 8px 0 0; max-width: 70ch; }
+
+/* Type spec */
+.type-spec-table { border-top: 1px solid var(--rule-soft); margin-bottom: 32px; }
+.type-spec-row { display: grid; grid-template-columns: 1.4fr 1.2fr 1.4fr 2fr; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; align-items: baseline; }
+.type-spec-head { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-tertiary); }
+.type-spec-surface { font-weight: 500; }
+.type-spec-family { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
+.type-spec-size { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); }
+.type-spec-use { color: var(--ink-secondary); font-size: 12px; }
+.type-spec-samples { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; padding: 20px; background: var(--paper); border: 1px solid var(--rule-soft); }
+.type-sample { display: flex; flex-direction: column; }
+
+/* Glyphs */
+.glyph-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0; border-top: 1px solid var(--rule-soft); border-left: 1px solid var(--rule-soft); }
+.glyph-cell { padding: 24px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 14px; background: var(--paper); }
+.glyph-display { width: 96px; height: 96px; background: var(--paper-deep); display: flex; align-items: center; justify-content: center; border: 1px solid var(--rule-soft); }
+.glyph-anatomy { display: flex; flex-direction: column; gap: 4px; }
+.glyph-anatomy-title { font-size: 16px; font-weight: 600; }
+.glyph-anatomy-shape { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.glyph-anatomy-desc { font-size: 13px; color: var(--ink-secondary); line-height: 1.5; }
+.glyph-anatomy-ex { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); line-height: 1.5; }
+.glyph-sizes, .glyph-mono { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); border-top: 1px dashed var(--rule-soft); padding-top: 10px; }
+.glyph-sizes-label { min-width: 80px; }
+.glyph-sizes-mono { color: var(--ink-tertiary); margin-left: auto; }
+.glyph-mono > svg:last-of-type { background: #1A1A1A; padding: 2px; border-radius: 1px; }
+
+/* Map spec */
+.map-spec-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
+.map-spec-preview { border: 1px solid var(--ink); aspect-ratio: 8 / 5.6; position: relative; overflow: hidden; }
+.map-spec-caption { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(250,250,247,0.92); padding: 6px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); border-top: 1px solid var(--rule-soft); }
+.map-spec-code { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; background: var(--ink); color: var(--paper); padding: 16px; margin: 0; overflow-x: auto; max-height: 560px; overflow-y: auto; }
+
+@media (max-width: 900px) { .map-spec-grid { grid-template-columns: 1fr; } }
+
+/* Layouts */
+.layout-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
+.layout-fig { margin: 0; }
+.layout-fig-cap { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 12px; }
+.layout-fig-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.layout-canvas { background: var(--paper); border: 1px solid var(--ink); display: grid; gap: 4px; padding: 8px; }
+.layout-canvas-desktop { grid-template-columns: 5fr 7fr; grid-template-rows: 220px 80px 60px; aspect-ratio: 16/10; }
+.layout-canvas-tablet { grid-template-rows: 160px 120px 80px; aspect-ratio: 4/5; }
+.layout-canvas-mobile { grid-template-rows: 180px 100px 100px 60px; aspect-ratio: 9/16; max-height: 540px; }
+.layout-region { background: var(--paper-deep); border: 1px dashed var(--rule-soft); padding: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); display: flex; flex-direction: column; justify-content: space-between; }
+.layout-region-w { color: var(--ink-tertiary); font-size: 10px; }
+.layout-canvas-desktop .layout-region-brief { grid-row: 1 / span 2; }
+.layout-canvas-desktop .layout-region-map { grid-column: 2; }
+.layout-canvas-desktop .layout-region-evidence { grid-column: 1 / span 2; }
+.layout-canvas-desktop .layout-region-trace { grid-column: 1 / span 2; background: var(--paper); }
+.layout-region-brief { background: rgba(11,83,148,0.08); border-color: var(--tier-empirical); }
+.layout-region-map { background: rgba(42,111,168,0.08); border-color: var(--tier-modeled); }
+.layout-region-evidence { background: rgba(107,107,107,0.08); }
+.layout-region-tabs { background: rgba(11,83,148,0.06); }
+.layout-region-trace { background: var(--paper-deep); border-style: solid; }
+
+/* PDF spec */
+.pdf-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; align-items: start; }
+.pdf-page { aspect-ratio: 210 / 297; background: var(--paper); border: 1px solid var(--rule-soft); box-shadow: 0 12px 32px -16px rgba(0,0,0,0.18); position: relative; overflow: hidden; }
+.pdf-page-inner { position: absolute; inset: 0; padding: 28px 28px; display: flex; flex-direction: column; gap: 14px; font-size: 10px; line-height: 1.45; }
+.pdf-cover-band { display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-family: var(--font-mono); font-size: 9px; color: var(--ink-secondary); }
+.pdf-cover-band-meta { letter-spacing: 0.06em; }
+.pdf-cover-headline { padding: 24px 0; }
+.pdf-cover-eyebrow { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-tertiary); }
+.pdf-cover-title { font-family: var(--font-serif); font-size: 28px; font-weight: 600; line-height: 1.1; margin: 8px 0 6px; letter-spacing: -0.01em; }
+.pdf-cover-deck { font-family: var(--font-mono); font-size: 10px; color: var(--ink-secondary); margin: 0; }
+.pdf-cover-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); padding: 12px 0; font-size: 10px; }
+.pdf-cover-meta div { display: flex; gap: 6px; }
+.pdf-cover-meta dt { font-family: var(--font-mono); font-size: 9px; color: var(--ink-tertiary); text-transform: uppercase; letter-spacing: 0.08em; min-width: 88px; margin: 0; }
+.pdf-cover-meta dd { margin: 0; font-size: 10px; }
+.pdf-cover-models ul { margin: 6px 0 0; padding-left: 14px; font-family: var(--font-mono); font-size: 9px; line-height: 1.6; color: var(--ink-secondary); }
+.pdf-cover-foot { margin-top: auto; display: flex; justify-content: space-between; padding-top: 12px; border-top: 1px solid var(--ink); font-family: var(--font-mono); font-size: 9px; color: var(--ink-secondary); }
+.pdf-cover-foot a { color: var(--ink); }
+
+.pdf-running-head { display: flex; justify-content: space-between; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 9px; color: var(--ink-tertiary); }
+.pdf-running-foot { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 8px; color: var(--ink-tertiary); }
+.pdf-h2 { font-family: var(--font-sans); font-size: 14px; font-weight: 600; margin: 8px 0 6px; }
+.pdf-h3 { font-family: var(--font-sans); font-size: 11px; font-weight: 600; margin: 8px 0 4px; }
+.pdf-prose { font-family: var(--font-serif); font-size: 10px; line-height: 1.5; }
+.pdf-prose p { margin: 0 0 8px; padding-left: 16px; position: relative; }
+.pdf-margin-glyph { position: absolute; left: 0; top: 4px; }
+.pdf-prose sup { color: var(--tier-empirical); font-family: var(--font-sans); font-weight: 500; }
+.pdf-cite-list { font-family: var(--font-serif); font-size: 9px; line-height: 1.55; padding-left: 16px; margin: 8px 0; }
+.pdf-cite-list li { margin-bottom: 6px; }
+.pdf-cite-list span { font-family: var(--font-mono); font-size: 8px; color: var(--ink-tertiary); }
+
+/* A11y */
+.a11y-grid { display: grid; gap: 0; border-top: 1px solid var(--rule-soft); }
+.a11y-row { display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); font-size: 13px; align-items: baseline; }
+.a11y-key { padding-top: 2px; }
+.a11y-val { color: var(--ink-secondary); line-height: 1.55; }
+
+/* Refs */
+.ref-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
+.ref-card { background: var(--paper); border: 1px solid var(--rule-soft); display: flex; flex-direction: column; }
+.ref-card-thumb { aspect-ratio: 200/140; border-bottom: 1px solid var(--rule-soft); }
+.ref-card-body { padding: 14px; display: flex; flex-direction: column; gap: 6px; }
+.ref-card-name { margin: 0; font-size: 14px; font-weight: 600; }
+.ref-card-borrow { font-size: 12px; color: var(--ink-secondary); line-height: 1.5; margin: 0; }
+.ref-card-url { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+
+/* Rationale */
+.spec-section-quote { background: var(--paper); }
+.rationale-quote { margin: 0; max-width: 70ch; border-left: 3px solid var(--ink); padding: 16px 0 16px 24px; }
+.rationale-quote p { font-family: var(--font-serif); font-size: 19px; line-height: 1.55; margin: 0 0 16px; text-wrap: pretty; }
+.rationale-cite { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--ink-tertiary); font-style: normal; }
+
+/* Footer */
+.app-footer { background: var(--ink); color: var(--paper); }
+.app-footer-inner { max-width: 1600px; margin: 0 auto; padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; }
+.app-footer-guard { font-size: 14px; line-height: 1.5; max-width: 70ch; margin: 0; }
+.app-footer-guard a { color: var(--accent-graphical); border-bottom: 1px solid var(--accent-graphical); text-decoration: none; }
+.app-footer-build { font-family: var(--font-mono); font-size: 11px; color: rgba(250,250,247,0.55); margin: 0; letter-spacing: 0.04em; }
+
+/* Dark mode ,  deferred to v0.5 (see §17). Partial styles removed in v0.4.2. */
+
+/* ════════════════════════════════════════════════════════════════════
+   v0.4.2 APPENDIX STYLES
+   §11 loading · §12 errors · §13 guardian · §14 stripe · §15 register
+   §16 caveats · §17 dark mode · §18 print · §19 changelog
+   ════════════════════════════════════════════════════════════════════ */
+
+/* v0.4.2 banner */
+.v042-band { background: var(--paper); border-top: 1px solid var(--rule-soft); }
+.v042-banner { background: linear-gradient(180deg, #F4EFE5 0%, var(--paper) 100%); border: 1px solid var(--rule-soft); padding: 36px 32px; margin-bottom: 48px; }
+.v042-banner-inner { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start; }
+.v042-banner-title { font-family: var(--font-serif); font-size: 30px; font-weight: 600; line-height: 1.18; margin: 8px 0 12px; letter-spacing: -0.01em; }
+.v042-banner-deck { font-size: 15px; line-height: 1.6; color: var(--ink-secondary); max-width: 60ch; }
+.v042-toc { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule-soft); }
+.v042-toc-item { display: flex; gap: 10px; padding: 10px 14px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); font-size: 13px; color: var(--ink); text-decoration: none; align-items: baseline; background: white; }
+.v042-toc-item:nth-child(2n) { border-right: none; }
+.v042-toc-item:hover { background: #F8F4EA; }
+.v042-toc-n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); letter-spacing: 0.06em; min-width: 28px; }
+
+/* §11 Loading + skeleton + reroll */
+.loading-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 28px; }
+.loading-fig { display: flex; flex-direction: column; gap: 10px; }
+.loading-cap { display: flex; flex-direction: column; gap: 4px; }
+.loading-cap-meta { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.04em; }
+.loading-frame { background: white; border: 1px solid var(--rule-soft); padding: 20px; min-height: 320px; }
+
+.skeleton-brief { display: flex; flex-direction: column; gap: 18px; }
+.skeleton-status { display: flex; flex-direction: column; gap: 6px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
+.skeleton-section { display: flex; flex-direction: column; gap: 8px; }
+.skeleton-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 4px; }
+.skeleton-num { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); letter-spacing: 0.08em; }
+.skeleton-label { font-family: var(--font-serif); font-size: 16px; font-weight: 600; color: var(--ink); }
+.skeleton-spinner { font-family: var(--font-mono); color: var(--tier-modeled); font-size: 12px; animation: skeletonBlink 1.1s ease-in-out infinite; margin-left: auto; }
+.skeleton-pulse { display: block; height: 12px; background: linear-gradient(90deg, #ECE8DD 0%, #DAD4C5 50%, #ECE8DD 100%); background-size: 200% 100%; animation: skeletonShimmer 1.6s ease-in-out infinite; border-radius: 1px; }
+.skeleton-pulse-meta { height: 9px; }
+@keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+@keyframes skeletonBlink { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
+@media (prefers-reduced-motion: reduce) {
+  .skeleton-pulse { animation: none; background: #E2DCCC; }
+  .skeleton-spinner { animation: none; opacity: 0.6; }
+}
+
+.reroll-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(42,111,168,0.08); border-left: 3px solid var(--tier-modeled); margin-bottom: 14px; }
+.reroll-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
+.reroll-head { font-family: var(--font-sans); font-size: 14px; font-weight: 500; color: var(--ink); }
+.reroll-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.03em; }
+.reroll-spinner { font-size: 16px; color: var(--tier-modeled); animation: rerollSpin 2s linear infinite; }
+@keyframes rerollSpin { 100% { transform: rotate(360deg); } }
+.reroll-prev { opacity: 0.4; pointer-events: none; }
+.reroll-prev-line { font-family: var(--font-serif); font-size: 14px; line-height: 1.55; color: var(--ink); margin-bottom: 8px; }
+
+.loading-rules { padding: 18px 22px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--tier-empirical); }
+.loading-rules ul { margin: 8px 0 0 18px; }
+.loading-rules li { font-size: 13px; line-height: 1.6; margin-bottom: 4px; color: var(--ink-secondary); }
+
+/* §12 Errors */
+.error-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
+.error-card { background: white; border: 1px solid var(--rule-soft); padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; }
+.error-card-head { display: flex; align-items: center; gap: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--rule-soft); }
+.error-card-eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }
+.error-card-headline { font-family: var(--font-serif); font-size: 19px; font-weight: 600; line-height: 1.3; margin: 0; }
+.error-card-body { font-size: 14px; line-height: 1.55; color: var(--ink-secondary); margin: 0; }
+.error-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
+.error-card-action { font-family: var(--font-sans); font-size: 12px; font-weight: 500; padding: 7px 14px; border: 1px solid var(--ink); background: white; cursor: pointer; letter-spacing: 0.02em; }
+.error-card-action.is-primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
+.error-card-action:hover { background: #F4EFE5; }
+.error-card-action.is-primary:hover { background: #2A2A2A; }
+.error-card-foot { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; margin-top: 4px; border-top: 1px dashed var(--rule-soft); }
+.error-card-foot-copy { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); letter-spacing: 0.03em; }
+
+/* §13 Guardian */
+.guardian-tabs { display: flex; gap: 0; border: 1px solid var(--rule-soft); margin-bottom: 0; flex-wrap: wrap; }
+.guardian-tab { font-family: var(--font-sans); font-size: 12px; font-weight: 500; padding: 11px 16px; background: white; border: none; border-right: 1px solid var(--rule-soft); cursor: pointer; flex: 1; min-width: 180px; text-align: left; color: var(--ink-secondary); letter-spacing: 0.01em; }
+.guardian-tab:last-child { border-right: none; }
+.guardian-tab.is-active { background: var(--ink); color: var(--paper); }
+.guardian-tab:hover:not(.is-active) { background: #F8F4EA; color: var(--ink); }
+
+.guardian-card { background: white; border: 1px solid var(--rule-soft); border-top: none; padding: 32px 36px; display: flex; flex-direction: column; gap: 14px; }
+.guardian-head { display: flex; align-items: baseline; gap: 8px; }
+.guardian-eyebrow { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }
+.guardian-title { font-family: var(--font-serif); font-size: 24px; font-weight: 600; line-height: 1.25; margin: 0; }
+.guardian-body { font-family: var(--font-serif); font-size: 16px; line-height: 1.6; color: var(--ink); max-width: 60ch; margin: 0; }
+.guardian-redirect { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--ink); background: #FBF8EF; text-decoration: none; color: var(--ink); margin: 6px 0; max-width: 480px; }
+.guardian-redirect:hover { background: #F4EFE5; }
+.guardian-redirect-label { font-family: var(--font-sans); font-size: 14px; font-weight: 600; }
+.guardian-redirect-url { font-family: var(--font-mono); font-size: 12px; color: var(--ink-secondary); letter-spacing: 0.02em; }
+.guardian-no-redirect { padding: 14px 18px; border-left: 2px solid var(--ink-tertiary); background: #FBF8EF; max-width: 540px; }
+.guardian-no-redirect p { font-size: 13px; line-height: 1.55; color: var(--ink-secondary); margin: 4px 0 0; }
+.guardian-foot { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.03em; padding-top: 12px; border-top: 1px dashed var(--rule-soft); }
+
+.guardian-a11y { padding: 18px 22px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--tier-empirical); margin-top: 22px; }
+.guardian-a11y p { font-size: 13px; line-height: 1.6; color: var(--ink-secondary); margin: 6px 0 0; }
+.guardian-a11y em { font-family: var(--font-serif); font-style: italic; color: var(--ink); }
+
+/* §14 syn-stripe */
+.stripe-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
+.stripe-cell { display: flex; flex-direction: column; gap: 8px; padding: 18px; background: white; border: 1px solid var(--rule-soft); }
+.stripe-preview { width: 100%; height: 180px; border: 1px solid var(--rule-soft); background-color: #FAFAF7; overflow: hidden; }
+.stripe-preview > div { background-repeat: repeat; background-size: 12px 12px !important; }
+.stripe-code { font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: var(--ink-secondary); background: #FBF8EF; padding: 10px 12px; border: 1px solid var(--rule-soft); white-space: pre-wrap; overflow-x: auto; max-height: 180px; overflow-y: auto; }
+.stripe-code-wide { max-height: 360px; }
+.stripe-reg { padding: 18px; background: white; border: 1px solid var(--rule-soft); margin-bottom: 18px; }
+.stripe-reg .section-label { display: block; margin-bottom: 8px; }
+.stripe-data { padding: 14px 18px; background: white; border: 1px solid var(--rule-soft); }
+.stripe-data .section-label { display: block; margin-bottom: 6px; }
+.stripe-data-uri { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-secondary); word-break: break-all; line-height: 1.5; max-height: 80px; overflow-y: auto; }
+
+/* §15 Register card */
+.register-frame { padding: 28px; background: var(--paper); border: 1px solid var(--rule-soft); margin-bottom: 22px; }
+.register-card { background: white; border: 1px solid var(--rule-soft); padding: 22px 26px; max-width: 760px; }
+.register-card-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px solid var(--rule-soft); margin-bottom: 14px; }
+.register-card-source { display: flex; align-items: center; gap: 6px; }
+.register-card-source-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); letter-spacing: 0.04em; }
+.register-card-vintage { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); letter-spacing: 0.05em; }
+.register-card-title { font-family: var(--font-serif); margin: 0 0 16px; display: flex; align-items: baseline; gap: 10px; line-height: 1.2; }
+.register-card-count { font-size: 32px; font-weight: 600; color: var(--ink); }
+.register-card-type { font-size: 16px; font-weight: 400; color: var(--ink-secondary); }
+.register-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.register-table thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-tertiary); padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--rule-soft); }
+.register-row { border-bottom: 1px solid #ECE8DD; cursor: pointer; transition: background 0.12s; }
+.register-row:hover { background: #FBF8EF; }
+.register-row.is-open { background: #F4EFE5; }
+.register-row td { padding: 10px 8px; vertical-align: middle; }
+.register-row-glyph { display: flex; align-items: center; gap: 4px; }
+.register-row-name { font-family: var(--font-sans); font-weight: 500; color: var(--ink); }
+.register-yes { color: var(--tier-empirical); font-weight: 600; }
+.register-no { color: var(--ink-tertiary); }
+.register-detail td { padding: 0 8px 14px; background: #F4EFE5; border-bottom: 1px solid var(--rule-soft); }
+.register-detail-grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; padding: 14px 0; }
+.register-detail-grid > div { display: flex; flex-direction: column; gap: 4px; }
+.register-detail-grid p { font-size: 12px; line-height: 1.45; color: var(--ink-secondary); margin: 0; }
+.register-card-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; margin-top: 14px; border-top: 1px dashed var(--rule-soft); }
+.register-foot-note { font-size: 12px; color: var(--ink-tertiary); font-style: italic; max-width: 50ch; }
+
+.register-rules { padding: 18px 22px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--tier-empirical); }
+.register-rules ul { margin: 8px 0 0 18px; }
+.register-rules li { font-size: 13px; line-height: 1.6; margin-bottom: 4px; color: var(--ink-secondary); }
+
+/* §16 caveats */
+.caveat-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
+.caveat-list li { padding: 14px 18px; background: white; border: 1px solid var(--rule-soft); border-bottom: none; font-size: 14px; line-height: 1.55; color: var(--ink-secondary); }
+.caveat-list li:last-child { border-bottom: 1px solid var(--rule-soft); }
+.caveat-list strong { color: var(--ink); font-weight: 600; }
+
+/* §17 dark mode */
+.darkmode-rules { padding: 18px 22px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--tier-proxy); }
+.darkmode-rules ul { margin: 8px 0 0 18px; }
+.darkmode-rules li { font-size: 13px; line-height: 1.6; margin-bottom: 4px; color: var(--ink-secondary); }
+
+/* §18 print */
+.print-css-block { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--ink); background: #FBF8EF; padding: 18px 22px; border: 1px solid var(--rule-soft); white-space: pre; overflow-x: auto; }
+
+/* §19 changelog */
+.spec-section-changelog .changelog-list { list-style: none; padding: 0; margin: 0; }
+.changelog-row { display: grid; grid-template-columns: 60px 1fr 90px; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--rule-soft); font-size: 13px; align-items: center; }
+.changelog-row:last-child { border-bottom: none; }
+.changelog-n { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.06em; }
+.changelog-label { color: var(--ink); }
+.changelog-status { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tier-empirical); text-align: right; }
+
+/* ════════════════════════════════════════════════════════════════════
+   v0.4.3 ,  The Five Stones UI
+   §20 taxonomy · §21 trace rework · §22 cold-start · §23 methodology
+   §24 reusability · §25 a11y · §26 CSS deltas · §27 rationale
+   ════════════════════════════════════════════════════════════════════ */
+
+/* New tokens (Stones-band + warning status) */
+:root {
+  --status-warning:        var(--accent-graphical);
+  --status-warning-soft:   rgba(209, 124, 0, 0.10);
+  --status-error:          #B8620A;
+  --status-error-soft:     rgba(184, 98, 10, 0.08);
+  --stone-band-rule:       var(--ink);
+  --stone-band-bg:         #FBF8EF;
+  --stone-band-bg-active:  #F4EFE5;
+}
+
+/* §20 Banner + Stone strip */
+.v043-banner-frame { padding: 0 0 32px; border-top: 1px solid var(--rule-soft); }
+.v043-banner { background: linear-gradient(180deg, #F4EFE5 0%, var(--paper) 100%); border: 1px solid var(--rule-soft); padding: 36px 32px; display: grid; grid-template-columns: 1.1fr 1.4fr; gap: 36px; align-items: start; }
+.v043-banner-title { font-family: var(--font-serif); font-size: 30px; font-weight: 600; line-height: 1.18; margin: 8px 0 12px; letter-spacing: -0.01em; }
+.v043-banner-deck { font-size: 15px; line-height: 1.62; color: var(--ink-secondary); max-width: 60ch; }
+.v043-banner-deck em { font-family: var(--font-serif); font-style: italic; color: var(--ink); }
+
+.v043-stones-strip { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--rule-soft); background: white; counter-reset: stone; }
+.v043-stones-strip li:nth-child(5) { grid-column: span 2; }
+.v043-stone-chip { padding: 14px 16px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); display: flex; flex-direction: column; gap: 3px; counter-increment: stone; position: relative; }
+.v043-stone-chip:nth-child(2n) { border-right: none; }
+.v043-stone-chip:nth-last-child(-n+1) { border-bottom: none; }
+.v043-stone-chip::before { content: counter(stone, decimal-leading-zero); position: absolute; top: 12px; right: 16px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); letter-spacing: 0.06em; }
+.v043-stone-name { font-family: var(--font-sans); font-size: 16px; font-weight: 600; color: var(--ink); }
+.v043-stone-role { font-family: var(--font-sans); font-size: 12px; color: var(--ink-secondary); letter-spacing: 0.01em; }
+.v043-stone-tag { font-family: var(--font-serif); font-style: italic; font-size: 13px; color: var(--ink-tertiary); }
+
+.v043-toc { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid var(--rule-soft); margin-bottom: 36px; }
+.v043-toc-item { display: flex; gap: 10px; padding: 10px 14px; border-right: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); font-size: 13px; color: var(--ink); text-decoration: none; align-items: baseline; background: white; }
+.v043-toc-item:nth-child(4n) { border-right: none; }
+.v043-toc-item:nth-last-child(-n+4):nth-child(n+5) { border-bottom: none; }
+.v043-toc-item:hover { background: #F8F4EA; }
+.v043-toc-n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); letter-spacing: 0.06em; min-width: 28px; }
+
+/* §20 Stones taxonomy table */
+.stones-table { width: 100%; border-collapse: collapse; font-size: 13px; background: white; border: 1px solid var(--rule-soft); }
+.stones-table thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-tertiary); padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rule-soft); background: #FBF8EF; }
+.stones-row td { padding: 14px 12px; vertical-align: top; border-bottom: 1px solid #ECE8DD; }
+.stones-row:last-child td { border-bottom: none; }
+.stones-row-stone { display: block; font-family: var(--font-sans); font-size: 15px; font-weight: 600; color: var(--ink); }
+.stones-row-tag { display: block; font-family: var(--font-serif); font-style: italic; font-size: 12px; color: var(--ink-tertiary); margin-top: 2px; }
+.stones-row-role { font-family: var(--font-sans); color: var(--ink-secondary); white-space: nowrap; }
+.stones-row-posture { line-height: 1.55; color: var(--ink); }
+.stones-row-count { white-space: nowrap; }
+.stones-row-num { font-family: var(--font-serif); font-size: 22px; font-weight: 600; color: var(--ink); margin-right: 6px; }
+.stones-row-numlabel { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.stones-row-reuse { font-size: 12px; color: var(--ink-secondary); line-height: 1.5; max-width: 28ch; }
+.stones-row-reuse-muted { color: var(--ink-tertiary); font-style: italic; }
+
+.stones-pullquote { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 1.45; color: var(--ink); padding: 28px 32px; margin: 28px 0 0; border-left: 3px solid var(--ink); background: #FBF8EF; max-width: 64ch; }
+
+/* §21 Treatment tabs */
+.treatment-tabs { display: flex; border: 1px solid var(--rule-soft); margin-bottom: 0; }
+.treatment-tab { font-family: var(--font-sans); font-size: 12px; font-weight: 500; padding: 12px 18px; background: white; border: none; border-right: 1px solid var(--rule-soft); cursor: pointer; flex: 1; color: var(--ink-secondary); letter-spacing: 0.02em; text-align: left; }
+.treatment-tab:last-child { border-right: none; }
+.treatment-tab.is-active { background: var(--ink); color: var(--paper); }
+.treatment-tab:hover:not(.is-active) { background: #F8F4EA; color: var(--ink); }
+
+.treatment-frame { background: white; border: 1px solid var(--rule-soft); padding: 28px 32px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: start; }
+.treatment-frame-stacked { grid-template-columns: 1fr; gap: 24px; margin-bottom: 18px; }
+.treatment-meta { display: flex; flex-direction: column; gap: 12px; }
+.treatment-deck { font-size: 14px; line-height: 1.6; color: var(--ink-secondary); }
+.treatment-deck code { font-family: var(--font-mono); font-size: 12px; background: #FBF8EF; padding: 1px 4px; border: 1px solid var(--rule-soft); }
+.treatment-tradeoffs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.55; }
+.treatment-tradeoffs li { color: var(--ink-secondary); padding-left: 18px; position: relative; }
+.treatment-tradeoffs strong { position: absolute; left: 0; font-family: var(--font-mono); color: var(--ink); }
+
+.treatment-rec { background: white; border: 1px solid var(--rule-soft); padding: 32px 36px; }
+.treatment-rec-title { font-family: var(--font-serif); font-size: 26px; font-weight: 600; margin: 8px 0 14px; }
+.treatment-rec p { font-family: var(--font-serif); font-size: 15px; line-height: 1.6; color: var(--ink); max-width: 64ch; margin: 0 0 12px; }
+.treatment-rec p code { font-family: var(--font-mono); font-size: 12px; background: #FBF8EF; padding: 1px 5px; border: 1px solid var(--rule-soft); font-weight: 500; }
+.treatment-rec p em { font-family: var(--font-serif); font-style: italic; color: var(--ink-secondary); }
+.treatment-rec-rules { list-style: none; padding: 16px 20px; margin: 16px 0 0; background: #FBF8EF; border-left: 3px solid var(--ink); display: flex; flex-direction: column; gap: 8px; max-width: 64ch; }
+.treatment-rec-rules li { font-size: 13px; line-height: 1.55; color: var(--ink-secondary); }
+
+/* §21 Stone band (Treatment A) */
+.trace-ui-v43-a { background: var(--paper); border: 1px solid var(--rule-soft); }
+.trace-ui-v43-a .trace-head { padding: 14px 18px; border-bottom: 1px solid var(--rule-soft); display: flex; justify-content: space-between; align-items: center; }
+.trace-head-grouping { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.06em; }
+.trace-head-warning { color: var(--status-warning); }
+.trace-head-error { color: var(--status-error); }
+
+.stone-band { border-top: 1.5px solid var(--stone-band-rule); background: white; }
+.stone-band:first-of-type { border-top: none; }
+.stone-band-head { display: grid; grid-template-columns: 18px minmax(180px, auto) 1fr auto; gap: 14px; padding: 14px 18px; background: var(--stone-band-bg); font-family: var(--font-sans); border: none; width: 100%; text-align: left; cursor: pointer; align-items: baseline; }
+.stone-band.is-open .stone-band-head { background: var(--stone-band-bg-active); }
+.stone-band-head:hover { background: #EFE9DA; }
+.stone-band-toggle { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); }
+.stone-band-name { display: flex; align-items: baseline; gap: 4px; }
+.stone-band-stone { font-weight: 600; font-size: 15px; color: var(--ink); }
+.stone-band-role { color: var(--ink-secondary); font-size: 13px; }
+.stone-band-tag { font-family: var(--font-serif); font-style: italic; color: var(--ink-tertiary); font-size: 13px; }
+.stone-band-agg { font-family: var(--font-mono); font-size: 11px; color: var(--ink-secondary); letter-spacing: 0.04em; white-space: nowrap; }
+.stone-agg-fired  { color: var(--ink); }
+.stone-agg-silent { color: var(--ink-tertiary); }
+.stone-agg-warn   { color: var(--status-warning); font-weight: 600; }
+.stone-agg-error  { color: var(--status-error); font-weight: 600; }
+.stone-agg-ms     { color: var(--ink-tertiary); }
+.stone-agg-sep    { color: var(--ink-tertiary); margin: 0 6px; }
+.stone-band-body { padding: 8px 0 14px; }
+.stone-band-body .trace-row { padding-top: 6px; padding-bottom: 6px; }
+
+/* shared specialist row in v0.4.3 */
+.trace-ui-v43-a .trace-row, .trace-ui-v43-b .trace-row {
+  display: grid; grid-template-columns: 16px 16px 1fr auto auto; gap: 10px; align-items: baseline;
+  font-family: var(--font-sans); font-size: 13px;
+}
+.trace-ui-v43-a .trace-row .trace-name, .trace-ui-v43-b .trace-row .trace-name {
+  font-family: var(--font-mono); font-size: 12px; color: var(--ink);
+}
+.trace-row-warning { background: var(--status-warning-soft); border-left: 2px solid var(--status-warning); }
+.trace-row-error { background: var(--status-error-soft); border-left: 2px solid var(--status-error); }
+.trace-warning-tag { color: var(--status-warning); font-weight: 600; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
+.trace-error-tag { color: var(--status-error); font-weight: 600; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; }
+.trace-warning-summary { color: var(--status-warning); font-style: italic; font-family: var(--font-sans); font-size: 12px; }
+.trace-error-summary { color: var(--status-error); font-style: italic; font-family: var(--font-sans); font-size: 12px; }
+.trace-error-trace { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--status-error); background: var(--status-error-soft); padding: 12px 16px; margin: 4px 18px 8px; border-left: 2px solid var(--status-error); white-space: pre; overflow-x: auto; }
+
+.trace-ttm-group { padding: 6px 0; }
+.trace-ttm-group > summary { display: grid; grid-template-columns: 16px 16px 1fr auto; gap: 10px; align-items: baseline; cursor: pointer; padding: 4px 0; list-style: none; }
+.trace-ttm-group > summary::-webkit-details-marker { display: none; }
+.trace-ttm-group > summary .trace-name { font-family: var(--font-mono); font-size: 12px; }
+
+/* §21 Treatment B ,  rule-marked groups */
+.trace-ui-v43-b .trace-body-flat { padding: 14px 18px; }
+.trace-ui-v43-b .trace-col-heads { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 6px 0 8px; border-bottom: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 10px; color: var(--ink-tertiary); letter-spacing: 0.06em; }
+.stone-rule-group { border-top: 2px solid var(--ink); padding-top: 10px; margin-top: 14px; }
+.stone-rule-group:first-of-type { border-top: 1px solid var(--rule-soft); margin-top: 6px; padding-top: 8px; }
+.stone-rule-marker { display: flex; align-items: baseline; gap: 10px; padding: 4px 0 8px; flex-wrap: wrap; }
+.stone-rule-name { font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink); }
+.stone-rule-role { font-family: var(--font-serif); font-style: italic; color: var(--ink-tertiary); font-size: 12px; }
+.stone-rule-agg { font-family: var(--font-mono); font-size: 10px; color: var(--ink-secondary); letter-spacing: 0.04em; margin-left: auto; }
+
+/* §22 cold-start (in-app) thesis line */
+.cold-start-thesis { font-family: var(--font-sans); font-size: 15px; line-height: 1.55; color: var(--ink); margin: 6px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--rule-soft); }
+.cold-start-thesis strong { font-weight: 600; }
+
+/* §22 cold-start v43 spec mock */
+.cold-v43-frame { padding: 28px; background: var(--paper); border: 1px solid var(--rule-soft); margin-bottom: 18px; }
+.cold-v43-mock { background: white; border: 1px solid var(--rule-soft); padding: 24px 28px; max-width: 600px; }
+.cold-v43-thesis { font-family: var(--font-sans); font-size: 16px; line-height: 1.55; color: var(--ink); margin: 8px 0 14px; padding: 14px 0; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
+.cold-v43-thesis strong { font-weight: 600; }
+.cold-v43-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
+.cold-v43-list li { font-size: 13px; line-height: 1.55; color: var(--ink-secondary); padding-left: 14px; position: relative; }
+.cold-v43-list li::before { content: "·"; position: absolute; left: 0; color: var(--ink); font-weight: 700; }
+.cold-v43-list a { color: var(--accent-graphical); text-decoration: none; border-bottom: 1px solid var(--accent-graphical); }
+.cold-v43-rules { padding: 18px 22px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--tier-empirical); }
+.cold-v43-rules ul { margin: 8px 0 0 18px; }
+.cold-v43-rules li { font-size: 13px; line-height: 1.6; margin-bottom: 4px; color: var(--ink-secondary); }
+
+/* §23 methodology + 5×4 matrix */
+.methodology-toc { list-style: none; padding: 0; margin: 0 0 36px; counter-reset: section; }
+.methodology-toc li { padding: 12px 16px; background: white; border: 1px solid var(--rule-soft); border-bottom: none; font-size: 14px; line-height: 1.55; color: var(--ink-secondary); }
+.methodology-toc li:last-child { border-bottom: 1px solid var(--rule-soft); }
+.methodology-toc strong { color: var(--ink); }
+
+.tier-stone-matrix { background: white; border: 1px solid var(--rule-soft); padding: 24px 28px; margin: 0; }
+.tier-stone-matrix table { width: 100%; border-collapse: collapse; }
+.tier-stone-matrix thead th { font-family: var(--font-mono); font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-tertiary); padding: 12px 8px; text-align: center; border-bottom: 1px solid var(--ink); }
+.tier-stone-matrix thead th:first-child { text-align: left; }
+.tier-stone-matrix tbody th { text-align: left; padding: 14px 12px; border-bottom: 1px solid #ECE8DD; vertical-align: top; }
+.matrix-stone-name { display: block; font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--ink); }
+.matrix-stone-role { display: block; font-family: var(--font-serif); font-style: italic; font-size: 11px; color: var(--ink-tertiary); margin-top: 2px; }
+.matrix-cell { text-align: center; padding: 14px 8px; border-bottom: 1px solid #ECE8DD; vertical-align: middle; }
+.matrix-cell-mark { display: flex; align-items: center; justify-content: center; min-height: 18px; }
+.matrix-cell-label { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--ink-tertiary); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
+.matrix-cell-empty .matrix-cell-label { color: #C9C5B6; }
+.matrix-cell-passthrough { background: #FBF8EF; }
+.matrix-empty { font-family: var(--font-serif); font-size: 16px; color: #C9C5B6; }
+.matrix-passthrough { font-family: var(--font-mono); font-size: 14px; color: var(--ink-tertiary); }
+.tier-stone-matrix-cap { font-family: var(--font-serif); font-size: 13px; line-height: 1.55; color: var(--ink-secondary); padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--rule-soft); max-width: 80ch; }
+
+/* §24 reusability */
+.reuse-statement { font-family: var(--font-serif); font-style: italic; font-size: 18px; line-height: 1.55; color: var(--ink); padding: 24px 28px; margin: 0 0 18px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); max-width: 70ch; }
+.reuse-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.reuse-rules li { padding: 12px 16px; background: white; border: 1px solid var(--rule-soft); font-size: 13px; line-height: 1.55; color: var(--ink-secondary); }
+.reuse-rules strong { color: var(--ink); }
+
+/* §25 a11y */
+.a11y-v43-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
+.a11y-v43-list li { padding: 14px 18px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--tier-empirical); font-size: 13px; line-height: 1.6; color: var(--ink-secondary); }
+.a11y-v43-list strong { color: var(--ink); }
+.a11y-v43-list code { font-family: var(--font-mono); font-size: 11px; background: #FBF8EF; padding: 1px 4px; border: 1px solid var(--rule-soft); }
+.a11y-v43-list em { font-family: var(--font-serif); font-style: italic; color: var(--ink); }
+
+/* §26 css deltas */
+.css-delta-block { font-family: var(--font-mono); font-size: 11px; line-height: 1.55; color: var(--ink); background: #FBF8EF; padding: 18px 22px; border: 1px solid var(--rule-soft); white-space: pre; overflow-x: auto; }
+
+/* §27 rationale (reuses existing if present, else light variant) */
+.spec-section-rationale .rationale-quote { font-family: var(--font-serif); font-size: 16px; line-height: 1.65; color: var(--ink); padding: 28px 32px; background: white; border: 1px solid var(--rule-soft); border-left: 3px solid var(--ink); margin: 0 0 12px; max-width: 70ch; }
+.spec-section-rationale .rationale-quote p { margin: 0 0 14px; }
+.spec-section-rationale .rationale-quote p:last-child { margin: 0; }
+.spec-section-rationale .rationale-cite { font-family: var(--font-mono); font-size: 11px; color: var(--ink-tertiary); letter-spacing: 0.04em; }
+
+/* PDF artifact link ,  pre-rendered, not a client export action */
+.app-header-pdf {
+  display: inline-flex; align-items: baseline; gap: 6px;
+  font-family: var(--font-mono); font-size: 11px;
+  color: var(--ink); padding: 4px 10px;
+  border: 1px solid var(--rule-soft); background: white;
+  letter-spacing: 0.02em;
+}
+.app-header-pdf-icon { font-size: 12px; color: var(--accent-graphical); }
+.app-header-pdf-meta { font-size: 9px; color: var(--ink-tertiary); letter-spacing: 0.06em; text-transform: uppercase; }
+
+/* Mobile brief title fallback */
+@media (max-width: 720px) {
+  .brief-h1 { grid-template-columns: 1fr; }
+  .brief-h1-meta { grid-column: 1; grid-row: 3; text-align: left; align-items: flex-start; }
+  .brief-h1-meta-row { justify-content: flex-start; }
+  .brief-h1-addr { font-size: 24px; }
+}
+  .v043-stones-strip { grid-template-columns: 1fr; }
+  .v043-stones-strip li:nth-child(5) { grid-column: span 1; }
+  .v043-stone-chip:nth-child(2n) { border-right: none; border-bottom: 1px solid var(--rule-soft); }
+  .v043-toc { grid-template-columns: 1fr 1fr; }
+  .stones-table thead { display: none; }
+  .stones-table tbody td { display: block; padding: 6px 12px; }
+  .stones-row td { border-bottom: none; }
+  .stones-row { display: block; padding: 14px 0; border-bottom: 1px solid #ECE8DD; }
+  .treatment-tabs { flex-direction: column; }
+  .treatment-tab { border-right: none; border-bottom: 1px solid var(--rule-soft); }
+  .treatment-frame { grid-template-columns: 1fr; padding: 18px; }
+  .stone-band-head { grid-template-columns: 16px 1fr; gap: 8px; }
+  .stone-band-tag { grid-column: 2; }
+  .stone-band-agg { grid-column: 2; }
+  .tier-stone-matrix { padding: 16px; }
+  .tier-stone-matrix thead th { font-size: 9px; padding: 6px 4px; }
+  .tier-stone-matrix tbody th { padding: 10px 6px; }
+  .matrix-cell { padding: 10px 4px; }
+  .matrix-stone-name { font-size: 12px; }
+  .stones-pullquote { font-size: 17px; padding: 18px 20px; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stone-band, .stone-band-head, .treatment-tab { transition: none; }
+}
+
+/* ─────────── original v0.4.2 mobile rules ────────── */
+@media (max-width: 720px) {
+  .app-header-inner { grid-template-columns: 1fr; gap: 8px; }
+  .app-header-mid, .app-header-right { justify-content: flex-start; }
+  .app-header-query { min-width: 0; width: 100%; }
+  .hero-band-inner { padding: 20px 16px 32px; }
+  .spec-band-inner { padding: 40px 16px 60px; }
+  .spec-band-title { font-size: 28px; }
+  .spec-section-title { font-size: 24px; }
+  .brief-h1 { font-size: 26px; }
+  .map-legend { width: calc(100% - 24px); }
+  .palette-row { grid-template-columns: 48px 1fr; gap: 12px; row-gap: 4px; }
+  .palette-row > *:nth-child(n+3) { grid-column: 2; }
+  .a11y-row { grid-template-columns: 1fr; gap: 4px; }
+
+  /* v0.4.2 mobile */
+  .v042-banner-inner { grid-template-columns: 1fr; gap: 24px; }
+  .v042-toc { grid-template-columns: 1fr; }
+  .v042-toc-item { border-right: none !important; }
+  .v042-banner-title { font-size: 24px; }
+  .loading-grid { grid-template-columns: 1fr; }
+  .error-grid { grid-template-columns: 1fr; }
+  .stripe-grid { grid-template-columns: 1fr; }
+  .guardian-tabs { flex-direction: column; }
+  .guardian-tab { border-right: none !important; border-bottom: 1px solid var(--rule); flex: none; }
+  .guardian-tab:last-child { border-bottom: none; }
+  .guardian-card { padding: 24px 22px; }
+  .guardian-title { font-size: 20px; }
+  .register-card { padding: 18px; }
+  .register-table { font-size: 11px; }
+  .register-table thead th { padding: 4px; font-size: 9px; }
+  .register-row td { padding: 8px 4px; }
+  .register-detail-grid { grid-template-columns: 1fr 1fr; }
+  .register-card-count { font-size: 26px; }
+  .changelog-row { grid-template-columns: 50px 1fr; }
+  .changelog-status { grid-column: 2; text-align: left; padding-top: 2px; }
+}

docs/design_handoff/design_files/tokens.css

@@ -0,0 +1,151 @@
+/* Riprap design tokens
+   Civic-tech-clean. SIL OFL / Apache fonts only. WCAG 2.2 AA verified.
+*/
+
+:root {
+  /* ── Epistemic tier colors ─────────────────────────────────────────
+     Refined from starter palette to meet 4.5:1 against white for body
+     text where the tier color is also used as inline citation/label color.
+     Originals: #3D85C6 = 3.04:1 (fail body), #999999 = 2.85:1 (fail).
+     Refined values verified via WebAIM contrast checker, deutan/protan/
+     tritan colorblind-safe (tier is also encoded by glyph + label).
+  */
+  --tier-empirical:        #0B5394; /* 8.59:1 vs white  ✓ AAA  */
+  --tier-empirical-fill:   rgba(11, 83, 148, 0.40);
+  --tier-empirical-line:   #0B5394;
+
+  --tier-modeled:          #2A6FA8; /* 5.41:1 vs white  ✓ AA   was #3D85C6 (3.04:1 fail) */
+  --tier-modeled-fill:     rgba(42, 111, 168, 0.25);
+  --tier-modeled-line:     #2A6FA8;
+
+  --tier-proxy:            #6B6B6B; /* 5.74:1 vs white  ✓ AA   was #999999 (2.85:1 fail) */
+  --tier-proxy-fill:       transparent;
+  --tier-proxy-line:       #6B6B6B;
+
+  --tier-synthetic:        #2A6FA8; /* same hue as modeled ,  pattern carries the difference */
+  --tier-synthetic-fill:   rgba(42, 111, 168, 0.25);
+  --tier-synthetic-line:   #2A6FA8;
+
+  /* ── Reference + accent ── */
+  --reference-bg:          #E8E8E6;
+  --reference-line:        #C9C9C5;
+  --accent:                #B8620A; /* 4.93:1 vs white  ✓ AA   adjusted from #D17C00 (3.36:1) */
+  --accent-graphical:      #D17C00; /* keep original for graphical use only (3.36:1 ≥ 3:1) */
+
+  /* ── Neutrals (paper register) ── */
+  --paper:                 #FAFAF7; /* warm near-white, USGS report register */
+  --paper-deep:            #F2F2EE;
+  --ink:                   #1A1A1A; /* 18.5:1 ✓ AAA */
+  --ink-secondary:         #4A4A4A; /* 9.7:1  ✓ AAA */
+  --ink-tertiary:          #6B6B6B; /* 5.74:1 ✓ AA  */
+  --rule:                  #1A1A1A;
+  --rule-soft:             #C9C9C5;
+
+  /* ── Type ── */
+  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
+  --font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
+
+  /* ── Scale ── */
+  --measure: 70ch;
+  --leading-prose: 1.55;
+  --leading-tight: 1.25;
+
+  /* ── Spacing ── */
+  --s-1: 4px;
+  --s-2: 8px;
+  --s-3: 12px;
+  --s-4: 16px;
+  --s-5: 24px;
+  --s-6: 32px;
+  --s-7: 48px;
+  --s-8: 64px;
+  --s-9: 96px;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0;
+  padding: 0;
+  background: var(--paper);
+  color: var(--ink);
+  font-family: var(--font-sans);
+  font-size: 16px;
+  line-height: var(--leading-prose);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* High-contrast focus rings, brief-spec'd */
+:focus-visible {
+  outline: 3px solid var(--accent-graphical);
+  outline-offset: 2px;
+  border-radius: 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+/* ── Wordmark ─────────────────────────────────────────────────────── */
+.riprap-wordmark {
+  font-family: var(--font-mono);
+  font-weight: 600;
+  font-size: 14px;
+  letter-spacing: 0.06em;
+  text-transform: lowercase;
+  color: var(--ink);
+  display: inline-flex;
+  align-items: baseline;
+  gap: 0;
+}
+.riprap-wordmark::before {
+  content: "▌";
+  color: var(--accent-graphical);
+  margin-right: 4px;
+  font-size: 0.85em;
+  position: relative;
+  top: 1px;
+}
+
+/* ── Skip link ── */
+.skip-link {
+  position: absolute;
+  left: -9999px;
+  top: 8px;
+  padding: 8px 12px;
+  background: var(--ink);
+  color: var(--paper);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  z-index: 1000;
+}
+.skip-link:focus {
+  left: 8px;
+}
+
+/* ── Generic section labels ── */
+.section-label {
+  font-family: var(--font-mono);
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--ink-tertiary);
+}
+
+.rule-thin {
+  border: 0;
+  border-top: 1px solid var(--rule-soft);
+  margin: 0;
+}
+.rule-heavy {
+  border: 0;
+  border-top: 2px solid var(--ink);
+  margin: 0;
+}

docs/design_handoff/design_files/trace.jsx

@@ -0,0 +1,166 @@
+/* Trace UI: <details>-based tree of the Burr FSM run.
+   Three columns: action name · elapsed ms · epistemic-tier badge.
+   Parallel branches shown as sibling rows under a "fan-out" parent;
+   convergence step shown as a "merge" node. Reference: Postgres
+   EXPLAIN ANALYZE viewers, Apache Airflow DAG.
+*/
+
+const TRACE = {
+  id: "root",
+  name: "briefing.run",
+  status: "ok",
+  ms: 14820,
+  tier: null,
+  children: [
+    { id: "n1", name: "geocode.address", status: "ok", ms: 142, tier: null,
+      output: { lat: 40.6776, lon: -74.0096, bbl: "3005970030" } },
+    { id: "n2", name: "fan_out.stones", status: "fan", ms: 0, tier: null,
+      note: "5 Stones engaged in parallel",
+      children: [
+        { id: "s1", name: "sandy_inundation.lookup", status: "ok", ms: 380, tier: "empirical",
+          claims: 2, output: "polygon: contains; nearest HWM 0.4mi" },
+        { id: "s2", name: "floodnet.history", status: "ok", ms: 1240, tier: "empirical",
+          claims: 1, output: "BK-RH-002: 7 events, peak 14.3cm" },
+        { id: "s3", name: "usgs.high_water_marks", status: "ok", ms: 612, tier: "empirical",
+          claims: 1, output: "9 marks within 500ft" },
+        { id: "s4", name: "fema.firm.preliminary", status: "ok", ms: 488, tier: "modeled",
+          claims: 1, output: "Zone AE, BFE 11ft NAVD88" },
+        { id: "s5", name: "dep.stormwater.scenario", status: "ok", ms: 2104, tier: "modeled",
+          claims: 1, output: "moderate: ponding ≥4in W half" },
+        { id: "s6", name: "npcc4.slr.projection", status: "ok", ms: 320, tier: "modeled",
+          claims: 1, output: "2050 90th: +30in" },
+        { id: "s7", name: "nyc311.flood_complaints", status: "ok", ms: 980, tier: "proxy",
+          claims: 1, output: "89 calls / tract / 2019–25" },
+        { id: "s8", name: "nfip.claims_aggregate", status: "ok", ms: 540, tier: "proxy",
+          claims: 1, output: "$4.1M / 47 paid losses" },
+        { id: "s9", name: "terramind.synthetic_sar", status: "ok", ms: 6840, tier: "synthetic",
+          claims: 1, output: "synthesis confidence 0.71" },
+        { id: "s10", name: "tidal_gauge.range", status: "silent", ms: 18, tier: null,
+          claims: 0, output: "out of range: nearest gauge >2mi" },
+        { id: "s11", name: "wrp.coastal_risk_area", status: "ok", ms: 210, tier: "modeled",
+          claims: 1, output: "within Coastal Risk Area" },
+      ]
+    },
+    { id: "n3", name: "merge.evidence", status: "merge", ms: 92, tier: null,
+      note: "10 cards · 1 silent · 0 errors" },
+    { id: "n4", name: "compose.briefing", status: "ok", ms: 1380, tier: null,
+      output: "4 sections · 11 claims · 10 citations" },
+    { id: "n5", name: "stream.sse", status: "ok", ms: 4940, tier: null,
+      output: "1812 tokens · 11 sentence chunks" },
+  ]
+};
+
+const StatusGlyph = ({ status }) => {
+  const map = {
+    ok: { fill: "#0B5394", char: "" },
+    silent: { fill: "transparent", stroke: "#6B6B6B", char: "" },
+    error: { fill: "#B8620A", char: "!" },
+    fan: { char: "⤳" },
+    merge: { char: "⤺" },
+  };
+  const m = map[status];
+  if (status === "fan" || status === "merge") {
+    return <span className="trace-status-glyph" aria-label={status}>{m.char}</span>;
+  }
+  return (
+    <svg width="9" height="9" viewBox="0 0 9 9" aria-label={status}>
+      <rect x="0.75" y="0.75" width="7.5" height="7.5" fill={m.fill} stroke={m.stroke || m.fill} strokeWidth="1.5"/>
+    </svg>
+  );
+};
+
+const TraceRow = ({ node, depth = 0, defaultOpen = false }) => {
+  const hasChildren = node.children && node.children.length > 0;
+  const [open, setOpen] = useState(defaultOpen);
+  const indent = depth * 16;
+
+  return (
+    <>
+      <div className={`trace-row trace-row-${node.status}`} style={{ paddingLeft: indent + 12 }}>
+        <button
+          type="button"
+          className="trace-row-toggle"
+          onClick={() => hasChildren && setOpen(!open)}
+          aria-expanded={hasChildren ? open : undefined}
+          aria-label={`${node.name}, ${node.ms}ms, ${node.status}`}
+          disabled={!hasChildren}
+        >
+          <span className="trace-tree-glyph" aria-hidden="true">
+            {hasChildren ? (open ? "▾" : "▸") : "·"}
+          </span>
+          <span className="trace-status-col">
+            <StatusGlyph status={node.status} />
+          </span>
+          <span className="trace-name-col">
+            <span className="trace-name">{node.name}</span>
+            {node.note && <span className="trace-note"> · {node.note}</span>}
+          </span>
+          <span className="trace-ms-col">{node.ms}ms</span>
+          <span className="trace-tier-col">
+            {node.tier && <TierBadge tier={node.tier} compact />}
+            {node.status === "silent" && (
+              <span className="trace-silent-tag">silent</span>
+            )}
+          </span>
+        </button>
+        {open && node.output && (
+          <div className="trace-output" style={{ paddingLeft: indent + 44 }}>
+            <span className="trace-output-prefix">→</span>
+            <span className="trace-output-text">
+              {typeof node.output === "string" ? node.output : JSON.stringify(node.output)}
+            </span>
+            {node.claims != null && (
+              <span className="trace-output-claims">{node.claims} claim{node.claims === 1 ? "" : "s"} cited</span>
+            )}
+          </div>
+        )}
+      </div>
+      {open && hasChildren && node.children.map((c) => (
+        <TraceRow key={c.id} node={c} depth={depth + 1} defaultOpen={c.status === "fan"} />
+      ))}
+    </>
+  );
+};
+
+const TraceUI = ({ collapsed, onToggleCollapsed }) => {
+  return (
+    <section className={`trace-ui ${collapsed ? "is-collapsed" : ""}`} aria-label="Run trace">
+      <header className="trace-head">
+        <div className="trace-head-left">
+          <span className="section-label">Run trace</span>
+          <span className="trace-head-meta">
+            <span className="trace-head-stat">14.82s total</span>
+            <span className="trace-head-sep">·</span>
+            <span className="trace-head-stat">10 fired</span>
+            <span className="trace-head-sep">·</span>
+            <span className="trace-head-stat trace-head-silent">1 silent</span>
+            <span className="trace-head-sep">·</span>
+            <span className="trace-head-stat">0 errors</span>
+          </span>
+        </div>
+        <button
+          type="button"
+          className="trace-collapse-btn"
+          onClick={onToggleCollapsed}
+          aria-expanded={!collapsed}
+        >
+          {collapsed ? "Expand ▾" : "Collapse ▴"}
+        </button>
+      </header>
+      {!collapsed && (
+        <div className="trace-body">
+          <div className="trace-col-heads">
+            <span className="trace-col-head trace-col-head-name">action</span>
+            <span className="trace-col-head trace-col-head-ms">elapsed</span>
+            <span className="trace-col-head trace-col-head-tier">tier</span>
+          </div>
+          <div className="trace-tree" role="tree">
+            <TraceRow node={TRACE} defaultOpen={true} />
+          </div>
+        </div>
+      )}
+    </section>
+  );
+};
+
+Object.assign(window, { TraceUI });

docs/design_handoff/design_files/tweaks-panel.jsx

@@ -0,0 +1,425 @@
+
+// tweaks-panel.jsx
+// Reusable Tweaks shell + form-control helpers.
+//
+// Owns the host protocol (listens for __activate_edit_mode / __deactivate_edit_mode,
+// posts __edit_mode_available / __edit_mode_set_keys / __edit_mode_dismissed) so
+// individual prototypes don't re-roll it. Ships a consistent set of controls so you
+// don't hand-draw <input type="range">, segmented radios, steppers, etc.
+//
+// Usage (in an HTML file that loads React + Babel):
+//
+//   const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
+//     "primaryColor": "#D97757",
+//     "fontSize": 16,
+//     "density": "regular",
+//     "dark": false
+//   }/*EDITMODE-END*/;
+//
+//   function App() {
+//     const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
+//     return (
+//       <div style={{ fontSize: t.fontSize, color: t.primaryColor }}>
+//         Hello
+//         <TweaksPanel>
+//           <TweakSection label="Typography" />
+//           <TweakSlider label="Font size" value={t.fontSize} min={10} max={32} unit="px"
+//                        onChange={(v) => setTweak('fontSize', v)} />
+//           <TweakRadio  label="Density" value={t.density}
+//                        options={['compact', 'regular', 'comfy']}
+//                        onChange={(v) => setTweak('density', v)} />
+//           <TweakSection label="Theme" />
+//           <TweakColor  label="Primary" value={t.primaryColor}
+//                        onChange={(v) => setTweak('primaryColor', v)} />
+//           <TweakToggle label="Dark mode" value={t.dark}
+//                        onChange={(v) => setTweak('dark', v)} />
+//         </TweaksPanel>
+//       </div>
+//     );
+//   }
+//
+// ─────────────────────────────────────────────────────────────────────────────
+
+const __TWEAKS_STYLE = `
+  .twk-panel{position:fixed;right:16px;bottom:16px;z-index:2147483646;width:280px;
+    max-height:calc(100vh - 32px);display:flex;flex-direction:column;
+    background:rgba(250,249,247,.78);color:#29261b;
+    -webkit-backdrop-filter:blur(24px) saturate(160%);backdrop-filter:blur(24px) saturate(160%);
+    border:.5px solid rgba(255,255,255,.6);border-radius:14px;
+    box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 12px 40px rgba(0,0,0,.18);
+    font:11.5px/1.4 ui-sans-serif,system-ui,-apple-system,sans-serif;overflow:hidden}
+  .twk-hd{display:flex;align-items:center;justify-content:space-between;
+    padding:10px 8px 10px 14px;cursor:move;user-select:none}
+  .twk-hd b{font-size:12px;font-weight:600;letter-spacing:.01em}
+  .twk-x{appearance:none;border:0;background:transparent;color:rgba(41,38,27,.55);
+    width:22px;height:22px;border-radius:6px;cursor:default;font-size:13px;line-height:1}
+  .twk-x:hover{background:rgba(0,0,0,.06);color:#29261b}
+  .twk-body{padding:2px 14px 14px;display:flex;flex-direction:column;gap:10px;
+    overflow-y:auto;overflow-x:hidden;min-height:0;
+    scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.15) transparent}
+  .twk-body::-webkit-scrollbar{width:8px}
+  .twk-body::-webkit-scrollbar-track{background:transparent;margin:2px}
+  .twk-body::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;
+    border:2px solid transparent;background-clip:content-box}
+  .twk-body::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);
+    border:2px solid transparent;background-clip:content-box}
+  .twk-row{display:flex;flex-direction:column;gap:5px}
+  .twk-row-h{flex-direction:row;align-items:center;justify-content:space-between;gap:10px}
+  .twk-lbl{display:flex;justify-content:space-between;align-items:baseline;
+    color:rgba(41,38,27,.72)}
+  .twk-lbl>span:first-child{font-weight:500}
+  .twk-val{color:rgba(41,38,27,.5);font-variant-numeric:tabular-nums}
+
+  .twk-sect{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
+    color:rgba(41,38,27,.45);padding:10px 0 0}
+  .twk-sect:first-child{padding-top:0}
+
+  .twk-field{appearance:none;width:100%;height:26px;padding:0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;
+    background:rgba(255,255,255,.6);color:inherit;font:inherit;outline:none}
+  .twk-field:focus{border-color:rgba(0,0,0,.25);background:rgba(255,255,255,.85)}
+  select.twk-field{padding-right:22px;
+    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='rgba(0,0,0,.5)' d='M0 0h10L5 6z'/></svg>");
+    background-repeat:no-repeat;background-position:right 8px center}
+
+  .twk-slider{appearance:none;-webkit-appearance:none;width:100%;height:4px;margin:6px 0;
+    border-radius:999px;background:rgba(0,0,0,.12);outline:none}
+  .twk-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
+    width:14px;height:14px;border-radius:50%;background:#fff;
+    border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+  .twk-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;
+    background:#fff;border:.5px solid rgba(0,0,0,.12);box-shadow:0 1px 3px rgba(0,0,0,.2);cursor:default}
+
+  .twk-seg{position:relative;display:flex;padding:2px;border-radius:8px;
+    background:rgba(0,0,0,.06);user-select:none}
+  .twk-seg-thumb{position:absolute;top:2px;bottom:2px;border-radius:6px;
+    background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.12);
+    transition:left .15s cubic-bezier(.3,.7,.4,1),width .15s}
+  .twk-seg.dragging .twk-seg-thumb{transition:none}
+  .twk-seg button{appearance:none;position:relative;z-index:1;flex:1;border:0;
+    background:transparent;color:inherit;font:inherit;font-weight:500;min-height:22px;
+    border-radius:6px;cursor:default;padding:4px 6px;line-height:1.2;
+    overflow-wrap:anywhere}
+
+  .twk-toggle{position:relative;width:32px;height:18px;border:0;border-radius:999px;
+    background:rgba(0,0,0,.15);transition:background .15s;cursor:default;padding:0}
+  .twk-toggle[data-on="1"]{background:#34c759}
+  .twk-toggle i{position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;
+    background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
+  .twk-toggle[data-on="1"] i{transform:translateX(14px)}
+
+  .twk-num{display:flex;align-items:center;height:26px;padding:0 0 0 8px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:7px;background:rgba(255,255,255,.6)}
+  .twk-num-lbl{font-weight:500;color:rgba(41,38,27,.6);cursor:ew-resize;
+    user-select:none;padding-right:8px}
+  .twk-num input{flex:1;min-width:0;height:100%;border:0;background:transparent;
+    font:inherit;font-variant-numeric:tabular-nums;text-align:right;padding:0 8px 0 0;
+    outline:none;color:inherit;-moz-appearance:textfield}
+  .twk-num input::-webkit-inner-spin-button,.twk-num input::-webkit-outer-spin-button{
+    -webkit-appearance:none;margin:0}
+  .twk-num-unit{padding-right:8px;color:rgba(41,38,27,.45)}
+
+  .twk-btn{appearance:none;height:26px;padding:0 12px;border:0;border-radius:7px;
+    background:rgba(0,0,0,.78);color:#fff;font:inherit;font-weight:500;cursor:default}
+  .twk-btn:hover{background:rgba(0,0,0,.88)}
+  .twk-btn.secondary{background:rgba(0,0,0,.06);color:inherit}
+  .twk-btn.secondary:hover{background:rgba(0,0,0,.1)}
+
+  .twk-swatch{appearance:none;-webkit-appearance:none;width:56px;height:22px;
+    border:.5px solid rgba(0,0,0,.1);border-radius:6px;padding:0;cursor:default;
+    background:transparent;flex-shrink:0}
+  .twk-swatch::-webkit-color-swatch-wrapper{padding:0}
+  .twk-swatch::-webkit-color-swatch{border:0;border-radius:5.5px}
+  .twk-swatch::-moz-color-swatch{border:0;border-radius:5.5px}
+`;
+
+// ── useTweaks ───────────────────────────────────────────────────────────────
+// Single source of truth for tweak values. setTweak persists via the host
+// (__edit_mode_set_keys → host rewrites the EDITMODE block on disk).
+function useTweaks(defaults) {
+  const [values, setValues] = React.useState(defaults);
+  // Accepts either setTweak('key', value) or setTweak({ key: value, ... }) so a
+  // useState-style call doesn't write a "[object Object]" key into the persisted
+  // JSON block.
+  const setTweak = React.useCallback((keyOrEdits, val) => {
+    const edits = typeof keyOrEdits === 'object' && keyOrEdits !== null
+      ? keyOrEdits : { [keyOrEdits]: val };
+    setValues((prev) => ({ ...prev, ...edits }));
+    window.parent.postMessage({ type: '__edit_mode_set_keys', edits }, '*');
+  }, []);
+  return [values, setTweak];
+}
+
+// ── TweaksPanel ─────────────────────────────────────────────────────────────
+// Floating shell. Registers the protocol listener BEFORE announcing
+// availability — if the announce ran first, the host's activate could land
+// before our handler exists and the toolbar toggle would silently no-op.
+// The close button posts __edit_mode_dismissed so the host's toolbar toggle
+// flips off in lockstep; the host echoes __deactivate_edit_mode back which
+// is what actually hides the panel.
+function TweaksPanel({ title = 'Tweaks', children }) {
+  const [open, setOpen] = React.useState(false);
+  const dragRef = React.useRef(null);
+  const offsetRef = React.useRef({ x: 16, y: 16 });
+  const PAD = 16;
+
+  const clampToViewport = React.useCallback(() => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const w = panel.offsetWidth, h = panel.offsetHeight;
+    const maxRight = Math.max(PAD, window.innerWidth - w - PAD);
+    const maxBottom = Math.max(PAD, window.innerHeight - h - PAD);
+    offsetRef.current = {
+      x: Math.min(maxRight, Math.max(PAD, offsetRef.current.x)),
+      y: Math.min(maxBottom, Math.max(PAD, offsetRef.current.y)),
+    };
+    panel.style.right = offsetRef.current.x + 'px';
+    panel.style.bottom = offsetRef.current.y + 'px';
+  }, []);
+
+  React.useEffect(() => {
+    if (!open) return;
+    clampToViewport();
+    if (typeof ResizeObserver === 'undefined') {
+      window.addEventListener('resize', clampToViewport);
+      return () => window.removeEventListener('resize', clampToViewport);
+    }
+    const ro = new ResizeObserver(clampToViewport);
+    ro.observe(document.documentElement);
+    return () => ro.disconnect();
+  }, [open, clampToViewport]);
+
+  React.useEffect(() => {
+    const onMsg = (e) => {
+      const t = e?.data?.type;
+      if (t === '__activate_edit_mode') setOpen(true);
+      else if (t === '__deactivate_edit_mode') setOpen(false);
+    };
+    window.addEventListener('message', onMsg);
+    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
+    return () => window.removeEventListener('message', onMsg);
+  }, []);
+
+  const dismiss = () => {
+    setOpen(false);
+    window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
+  };
+
+  const onDragStart = (e) => {
+    const panel = dragRef.current;
+    if (!panel) return;
+    const r = panel.getBoundingClientRect();
+    const sx = e.clientX, sy = e.clientY;
+    const startRight = window.innerWidth - r.right;
+    const startBottom = window.innerHeight - r.bottom;
+    const move = (ev) => {
+      offsetRef.current = {
+        x: startRight - (ev.clientX - sx),
+        y: startBottom - (ev.clientY - sy),
+      };
+      clampToViewport();
+    };
+    const up = () => {
+      window.removeEventListener('mousemove', move);
+      window.removeEventListener('mouseup', up);
+    };
+    window.addEventListener('mousemove', move);
+    window.addEventListener('mouseup', up);
+  };
+
+  if (!open) return null;
+  return (
+    <>
+      <style>{__TWEAKS_STYLE}</style>
+      <div ref={dragRef} className="twk-panel" data-noncommentable=""
+           style={{ right: offsetRef.current.x, bottom: offsetRef.current.y }}>
+        <div className="twk-hd" onMouseDown={onDragStart}>
+          <b>{title}</b>
+          <button className="twk-x" aria-label="Close tweaks"
+                  onMouseDown={(e) => e.stopPropagation()}
+                  onClick={dismiss}>✕</button>
+        </div>
+        <div className="twk-body">{children}</div>
+      </div>
+    </>
+  );
+}
+
+// ── Layout helpers ──────────────────────────────────────────────────────────
+
+function TweakSection({ label, children }) {
+  return (
+    <>
+      <div className="twk-sect">{label}</div>
+      {children}
+    </>
+  );
+}
+
+function TweakRow({ label, value, children, inline = false }) {
+  return (
+    <div className={inline ? 'twk-row twk-row-h' : 'twk-row'}>
+      <div className="twk-lbl">
+        <span>{label}</span>
+        {value != null && <span className="twk-val">{value}</span>}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// ── Controls ────────────────────────────────────────────────────────────────
+
+function TweakSlider({ label, value, min = 0, max = 100, step = 1, unit = '', onChange }) {
+  return (
+    <TweakRow label={label} value={`${value}${unit}`}>
+      <input type="range" className="twk-slider" min={min} max={max} step={step}
+             value={value} onChange={(e) => onChange(Number(e.target.value))} />
+    </TweakRow>
+  );
+}
+
+function TweakToggle({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <button type="button" className="twk-toggle" data-on={value ? '1' : '0'}
+              role="switch" aria-checked={!!value}
+              onClick={() => onChange(!value)}><i /></button>
+    </div>
+  );
+}
+
+function TweakRadio({ label, value, options, onChange }) {
+  const trackRef = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const opts = options.map((o) => (typeof o === 'object' ? o : { value: o, label: o }));
+  const idx = Math.max(0, opts.findIndex((o) => o.value === value));
+  const n = opts.length;
+
+  // The active value is read by pointer-move handlers attached for the lifetime
+  // of a drag — ref it so a stale closure doesn't fire onChange for every move.
+  const valueRef = React.useRef(value);
+  valueRef.current = value;
+
+  const segAt = (clientX) => {
+    const r = trackRef.current.getBoundingClientRect();
+    const inner = r.width - 4;
+    const i = Math.floor(((clientX - r.left - 2) / inner) * n);
+    return opts[Math.max(0, Math.min(n - 1, i))].value;
+  };
+
+  const onPointerDown = (e) => {
+    setDragging(true);
+    const v0 = segAt(e.clientX);
+    if (v0 !== valueRef.current) onChange(v0);
+    const move = (ev) => {
+      if (!trackRef.current) return;
+      const v = segAt(ev.clientX);
+      if (v !== valueRef.current) onChange(v);
+    };
+    const up = () => {
+      setDragging(false);
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+
+  return (
+    <TweakRow label={label}>
+      <div ref={trackRef} role="radiogroup" onPointerDown={onPointerDown}
+           className={dragging ? 'twk-seg dragging' : 'twk-seg'}>
+        <div className="twk-seg-thumb"
+             style={{ left: `calc(2px + ${idx} * (100% - 4px) / ${n})`,
+                      width: `calc((100% - 4px) / ${n})` }} />
+        {opts.map((o) => (
+          <button key={o.value} type="button" role="radio" aria-checked={o.value === value}>
+            {o.label}
+          </button>
+        ))}
+      </div>
+    </TweakRow>
+  );
+}
+
+function TweakSelect({ label, value, options, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <select className="twk-field" value={value} onChange={(e) => onChange(e.target.value)}>
+        {options.map((o) => {
+          const v = typeof o === 'object' ? o.value : o;
+          const l = typeof o === 'object' ? o.label : o;
+          return <option key={v} value={v}>{l}</option>;
+        })}
+      </select>
+    </TweakRow>
+  );
+}
+
+function TweakText({ label, value, placeholder, onChange }) {
+  return (
+    <TweakRow label={label}>
+      <input className="twk-field" type="text" value={value} placeholder={placeholder}
+             onChange={(e) => onChange(e.target.value)} />
+    </TweakRow>
+  );
+}
+
+function TweakNumber({ label, value, min, max, step = 1, unit = '', onChange }) {
+  const clamp = (n) => {
+    if (min != null && n < min) return min;
+    if (max != null && n > max) return max;
+    return n;
+  };
+  const startRef = React.useRef({ x: 0, val: 0 });
+  const onScrubStart = (e) => {
+    e.preventDefault();
+    startRef.current = { x: e.clientX, val: value };
+    const decimals = (String(step).split('.')[1] || '').length;
+    const move = (ev) => {
+      const dx = ev.clientX - startRef.current.x;
+      const raw = startRef.current.val + dx * step;
+      const snapped = Math.round(raw / step) * step;
+      onChange(clamp(Number(snapped.toFixed(decimals))));
+    };
+    const up = () => {
+      window.removeEventListener('pointermove', move);
+      window.removeEventListener('pointerup', up);
+    };
+    window.addEventListener('pointermove', move);
+    window.addEventListener('pointerup', up);
+  };
+  return (
+    <div className="twk-num">
+      <span className="twk-num-lbl" onPointerDown={onScrubStart}>{label}</span>
+      <input type="number" value={value} min={min} max={max} step={step}
+             onChange={(e) => onChange(clamp(Number(e.target.value)))} />
+      {unit && <span className="twk-num-unit">{unit}</span>}
+    </div>
+  );
+}
+
+function TweakColor({ label, value, onChange }) {
+  return (
+    <div className="twk-row twk-row-h">
+      <div className="twk-lbl"><span>{label}</span></div>
+      <input type="color" className="twk-swatch" value={value}
+             onChange={(e) => onChange(e.target.value)} />
+    </div>
+  );
+}
+
+function TweakButton({ label, onClick, secondary = false }) {
+  return (
+    <button type="button" className={secondary ? 'twk-btn secondary' : 'twk-btn'}
+            onClick={onClick}>{label}</button>
+  );
+}
+
+Object.assign(window, {
+  useTweaks, TweaksPanel, TweakSection, TweakRow,
+  TweakSlider, TweakToggle, TweakRadio, TweakSelect,
+  TweakText, TweakNumber, TweakColor, TweakButton,
+});