ux: build the Findings region (12 card variants + StoneRegion + run-health)

First substantial commit of the v0.4.4 design pass. Ports
docs/design_handoff/design_files/findings.jsx (the centerpiece of the
handoff) into idiomatic Svelte 5 — runes only, scoped styles, no React
or Tailwind.

lib/types/card.ts
Card schema mirroring the handoff's TypeScript-spec'd shape: 12
body variants, register rows, scalar cells, forecast bands,
comparison sides, meta rows, plus StoneTrace + StoneMember for
provenance.

lib/components/findings/cards/ (12 body variants)
HeadlineBody · TabularBody · ScalarsBody · SparkBody (covers spark
+ histogram) · TimeseriesBody · ForecastBody · RasterBody (+
RasterThumb hand-drawn SVGs for stormwater / stormwater-dry /
prithvi / lulc / buildings) · RegisterBody · ComparisonBody ·
MetaBody. CardBody.svelte dispatches by variant.

lib/components/findings/FindingCard.svelte
Chrome wrapper. Header (tier glyph + source · vintage), title,
body slot, footer (docId + tier badge + cite arrow). Synthetic /
illustrative / comparison cards get a 1px dashed top-rule.
Cards with mapLayer render as <button role=button> for keyboard
+ hover linking; others as <article>.

lib/components/findings/StoneRegion.svelte
Stone header (serif italic name + role · tag · run-tally chip),
smart-default provenance toggle (collapsed if all-ok, expanded on
warn/error/silent), 12-col card grid. Capstone uses a 6-col
capstone-rail variant.

lib/components/findings/StoneTally.svelte
Run-tally chip: card count, fired count, silent / warn / error
(when nonzero), heaviest-specialist runtime.

lib/components/findings/ProvenanceTrace.svelte
Indented specialist tree, recursive via self-import (Svelte 5
deprecates svelte:self). Status pip in tier-color or warn/error.

lib/components/findings/RunHealthStrip.svelte
Top-of-Findings status row: Stones · functions fired · cards ·
wall-clock · cache-hit (when supplied) · silent / warn / error.

lib/components/findings/CardGrammarReference.svelte
Dev-only catalog of all 12 card variants. Gated on caller-passed
showGrammar prop.

lib/components/findings/FindingsRegion.svelte
Composer: RunHealthStrip + 5 StoneRegions in canonical order
(cornerstone → keystone → touchstone → lodestone → capstone) +
optional CardGrammarReference. Lifts linkedKey through props so
the page route owns the cross-link state.

lib/data/findingsSample.ts
Red Hook sample fixture mirroring findings.jsx CARDS table.
Drives routes/q/sample so the design surface can be reviewed
without a running FSM.

Pre-existing type errors in Briefing.svelte / RipMap.svelte /
q/[queryId]/+page.svelte / TraceRow.svelte are unrelated to this
branch and not addressed here. Zero new errors / warnings introduced.

Wiring into the sample + live routes lands in the next commit.

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

web/sveltekit/src/lib/components/findings/CardGrammarReference.svelte

@@ -0,0 +1,223 @@
+<script lang="ts">
+  import type { Card, Density } from '$lib/types/card';
+  import FindingCard from './FindingCard.svelte';
+
+  /** Dev-only catalog of all 12 card variants. Gated on import.meta.env.DEV
+   *  + ?grammar=1 in the page URL. Useful for spot-checking visual fidelity
+   *  while iterating on the variant components. */
+  let { density = 'comfortable' as Density }: { density?: Density } = $props();
+
+  // One stub per variant. Mirrors findings.jsx GRAMMAR_STUBS.
+  const STUBS: Card[] = [
+    {
+      id: 'grm-headline', stone: 'cornerstone', tier: 'modeled', variant: 'headline',
+      source: 'FEMA', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-tabular', stone: 'cornerstone', tier: 'empirical', variant: 'tabular',
+      source: 'USGS', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-scalars', stone: 'touchstone', tier: 'empirical', variant: 'scalars',
+      source: 'NWS', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-spark', stone: 'touchstone', tier: 'empirical', variant: 'spark',
+      source: 'FloodNet', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-histogram', stone: 'touchstone', tier: 'proxy', variant: 'histogram',
+      source: 'NYC 311', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-timeseries', stone: 'lodestone', tier: 'modeled', variant: 'timeseries',
+      source: 'Granite TTM', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-forecast', stone: 'lodestone', tier: 'modeled', variant: 'forecast',
+      source: 'NPCC4', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-raster', stone: 'cornerstone', tier: 'modeled', variant: 'raster',
+      source: 'NYC DEP', agency: 'spec', vintage: 'spec',
+      title: 'Raster snapshot, mapped layer',
+      rasterKind: 'stormwater',
+      headline: 'ponding', subhead: 'scenario · pixel summary',
+      sub: 'Use for any 2D model output.',
+      docId: 'DS-RASTER',
+    },
+    {
+      id: 'grm-rasterpred', stone: 'touchstone', tier: 'modeled', variant: 'raster-pred',
+      source: 'Prithvi-NYC', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-register', stone: 'keystone', tier: 'empirical', variant: 'register',
+      source: 'NYC OpenData', agency: 'spec', vintage: 'spec',
+      title: 'Composite register list',
+      registers: [
+        { reg: 'MTA', tier: 'empirical', label: 'Station entrance', detail: '0.18 mi · 5', sourceId: 'MTA-X', note: null },
+        { reg: 'NYCHA', tier: 'empirical', label: 'Development', detail: '0.41 mi · 2,878 res.', sourceId: 'NYCHA-Y', note: null },
+        { reg: 'DOH', tier: 'empirical', label: null, detail: null, sourceId: null, note: 'no acute-care hospital within 1.0 mi' },
+      ],
+      sub: 'Use when many specialists join into one Stone.',
+      docId: 'DS-REGISTER',
+    },
+    {
+      id: 'grm-comparison', stone: 'keystone', tier: 'synthetic', variant: 'comparison',
+      source: 'EMP × SYN', agency: 'spec', vintage: 'spec',
+      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',
+    },
+    {
+      id: 'grm-meta', stone: 'capstone', tier: 'modeled', variant: 'meta',
+      source: 'Mellea', agency: 'spec', vintage: 'spec',
+      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',
+    },
+  ];
+</script>
+
+<section class="region region-grammar" aria-label="Card grammar reference">
+  <header class="region-head">
+    <div class="region-head-left">
+      <span class="region-num">SPEC</span>
+      <h3 class="region-name">Card grammar</h3>
+      <span class="region-role">· every body variant in the system</span>
+      <span class="region-tag">stubs, not findings</span>
+    </div>
+    <span class="grammar-count">{STUBS.length} variants</span>
+  </header>
+  <div class="rail">
+    {#each STUBS as stub (stub.id)}
+      <FindingCard card={stub} {density} />
+    {/each}
+  </div>
+</section>
+
+<style>
+  .region-grammar {
+    border-top: 2px solid var(--ink);
+    padding: var(--s-5) 0;
+  }
+  .region-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--s-3);
+    margin-bottom: var(--s-3);
+  }
+  .region-head-left {
+    display: flex;
+    align-items: baseline;
+    gap: var(--s-2);
+    flex-wrap: wrap;
+  }
+  .region-num {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.1em;
+  }
+  .region-name {
+    margin: 0;
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 22px;
+    font-weight: 500;
+  }
+  .region-role {
+    font-family: var(--font-sans);
+    font-size: 13px;
+    color: var(--ink-secondary);
+  }
+  .region-tag {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.05em;
+  }
+  .grammar-count {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+  }
+  .rail {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: var(--s-3);
+  }
+  .rail :global(> .fc) { grid-column: span 4; }
+  .rail :global(> .fc.fc-register),
+  .rail :global(> .fc.fc-timeseries),
+  .rail :global(> .fc.fc-forecast),
+  .rail :global(> .fc.fc-raster),
+  .rail :global(> .fc.fc-raster-pred),
+  .rail :global(> .fc.fc-comparison) {
+    grid-column: span 6;
+  }
+  @media (max-width: 920px) {
+    .rail { grid-template-columns: repeat(6, 1fr); }
+    .rail :global(> .fc) { grid-column: span 6; }
+  }
+</style>

web/sveltekit/src/lib/components/findings/FindingCard.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+  import type { Card, Density } from '$lib/types/card';
+  import { TIER_META } from '$lib/types/tier';
+  import TierGlyph from '$lib/components/glyphs/TierGlyph.svelte';
+  import CardBody from './cards/CardBody.svelte';
+
+  /** Findings card chrome: header (tier glyph + source + vintage), title,
+   *  body (variant dispatch), footer (docId + tier badge + cite arrow).
+   *
+   *  Synthetic-tier cards get a 1px dashed top-rule (telegraph "no
+   *  observed data here"), per the v0.4.4 spec. Comparison and
+   *  raster-pred always render synthetic.
+   *
+   *  Hover linking: card sets `linkedKey` to its `mapLayer` on
+   *  pointerenter / focus and clears on pointerleave / blur. The map
+   *  reads `linkedKey` and lights up the matching layer.
+   */
+  interface Props {
+    card: Card;
+    density?: Density;
+    linkedKey?: string | null;
+    onCite?: (citeId: string) => void;
+    onLink?: (key: string | null) => void;
+  }
+
+  let {
+    card,
+    density = 'comfortable',
+    linkedKey = null,
+    onCite,
+    onLink,
+  }: Props = $props();
+
+  let isLinked = $derived(linkedKey != null && card.mapLayer != null && card.mapLayer === linkedKey);
+  let tierShort = $derived(TIER_META[card.tier].short);
+
+  let interactive = $derived(card.mapLayer != null);
+
+  function handleEnter() { if (card.mapLayer) onLink?.(card.mapLayer); }
+  function handleLeave() { if (card.mapLayer) onLink?.(null); }
+  function handleCite(e: Event) {
+    e.stopPropagation();
+    if (card.citeId) onCite?.(card.citeId);
+  }
+  function handleKey(e: KeyboardEvent) {
+    if (!interactive) return;
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      onLink?.(card.mapLayer ?? null);
+    }
+  }
+</script>
+
+<svelte:element
+  this={interactive ? 'button' : 'article'}
+  type={interactive ? 'button' : undefined}
+  role={interactive ? 'button' : 'article'}
+  class="fc fc-{card.variant} fc-tier-{card.tier}"
+  class:is-compact={density === 'compact'}
+  class:is-linked={isLinked}
+  class:is-interactive={interactive}
+  class:has-illustrative={card.illustrative || card.tier === 'synthetic' || card.variant === 'comparison'}
+  aria-labelledby={`fc-${card.id}-title`}
+  aria-label={`${TIER_META[card.tier].label} card · ${card.title} · ${card.source}`}
+  onpointerenter={handleEnter}
+  onpointerleave={handleLeave}
+  onfocus={handleEnter}
+  onblur={handleLeave}
+  onkeydown={handleKey}
+>
+  <header class="fc-head">
+    <div class="fc-head-source">
+      <TierGlyph tier={card.tier} size={11} color="var(--tier-{card.tier})" />
+      <span class="fc-head-source-label" title={card.agency}>{card.source}</span>
+    </div>
+    <span class="fc-head-vintage">v. {card.vintage}</span>
+  </header>
+
+  <h4 id={`fc-${card.id}-title`} class="fc-title">{card.title}</h4>
+
+  <CardBody {card} />
+
+  <footer class="fc-foot">
+    {#if card.citeId}
+      <button
+        type="button"
+        class="fc-foot-cite"
+        onclick={handleCite}
+        title={`Open ${card.docId} in citation drawer`}
+      >
+        <span class="fc-foot-docid">{card.docId}</span>
+        <span class="fc-foot-arrow" aria-hidden="true">→</span>
+      </button>
+    {:else}
+      <span class="fc-foot-docid fc-foot-docid-mute">{card.docId}</span>
+    {/if}
+    <span class="fc-tier-badge fc-tier-badge-{card.tier}" aria-label={`epistemic tier ${tierShort}`}>
+      <TierGlyph tier={card.tier} size={9} color="var(--tier-{card.tier})" />
+      <span>{tierShort}</span>
+    </span>
+  </footer>
+</svelte:element>
+
+<style>
+  .fc {
+    background: var(--paper);
+    border: 1px solid var(--rule-soft);
+    display: flex;
+    flex-direction: column;
+    transition: background-color 200ms ease, border-color 200ms ease, outline-color 200ms ease;
+    outline: 0 solid transparent;
+    outline-offset: 0;
+    /* When the article is rendered as a button (interactive cards), strip
+       the default browser button chrome so it looks like the article. */
+    color: inherit;
+    text-align: left;
+    font: inherit;
+    padding: 0;
+    width: 100%;
+  }
+  .fc.is-interactive { cursor: pointer; }
+  .fc:hover { background: var(--paper-deep); }
+  .fc.is-linked {
+    outline: 2px solid var(--accent-graphical);
+    outline-offset: 0;
+  }
+
+  /* Synthetic + comparison + illustrative cards get a dashed top rule. */
+  .has-illustrative { border-top: 1px dashed var(--tier-synthetic-line); }
+  .fc-tier-synthetic { border-top: 1px dashed var(--tier-synthetic-line); }
+
+  .fc-head {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--s-2) var(--s-4);
+    border-bottom: 1px solid var(--rule-soft);
+    background: var(--paper-deep);
+  }
+  :global(.fc.is-compact) .fc-head { padding: 6px var(--s-3); }
+  .fc-head-source {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--s-2);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--ink);
+  }
+  .fc-head-source-label {
+    cursor: help;
+  }
+  .fc-head-vintage {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.05em;
+  }
+
+  .fc-title {
+    margin: 0;
+    padding: var(--s-3) var(--s-4) 0;
+    font-family: var(--font-sans);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.35;
+    color: var(--ink);
+  }
+  :global(.fc.is-compact) .fc-title { padding: var(--s-2) var(--s-3) 0; font-size: 13px; }
+
+  .fc-foot {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: var(--s-2) var(--s-4);
+    border-top: 1px solid var(--rule-soft);
+    background: var(--paper-deep);
+    gap: var(--s-3);
+    margin-top: auto;
+  }
+  :global(.fc.is-compact) .fc-foot { padding: 6px var(--s-3); }
+
+  .fc-foot-cite {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: transparent;
+    border: 0;
+    padding: 0;
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    letter-spacing: 0.05em;
+    color: var(--accent);
+  }
+  .fc-foot-cite:hover { color: var(--ink); }
+  .fc-foot-docid {
+    text-transform: uppercase;
+  }
+  .fc-foot-docid-mute {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
+  }
+  .fc-foot-arrow {
+    font-family: var(--font-mono);
+    font-size: 11px;
+  }
+
+  .fc-tier-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  .fc-tier-badge-empirical { color: var(--tier-empirical); }
+  .fc-tier-badge-modeled { color: var(--tier-modeled); }
+  .fc-tier-badge-proxy { color: var(--tier-proxy); }
+  .fc-tier-badge-synthetic { color: var(--tier-synthetic); }
+</style>

web/sveltekit/src/lib/components/findings/FindingsRegion.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+  import type {
+    Card, Density, FindingsData, ProvenanceMode, StoneKey, StoneTrace
+  } from '$lib/types/card';
+  import { STONE_ORDER } from '$lib/types/card';
+  import RunHealthStrip from './RunHealthStrip.svelte';
+  import StoneRegion from './StoneRegion.svelte';
+  import CardGrammarReference from './CardGrammarReference.svelte';
+
+  /** Findings region: 5 Stones in canonical order, top-banner run-health
+   *  strip, optional dev-only card-grammar catalog. linkedKey is owned by
+   *  the parent route (`q/[queryId]/+page.svelte` or `q/sample/+page.svelte`)
+   *  so the briefing's map can read it without a store. */
+  interface Props {
+    data: FindingsData;
+    density?: Density;
+    provenanceMode?: ProvenanceMode;
+    showGrammar?: boolean;
+    linkedKey?: string | null;
+    onCite?: (citeId: string) => void;
+    onLink?: (key: string | null) => void;
+  }
+
+  let {
+    data,
+    density = 'comfortable',
+    provenanceMode = 'smart',
+    showGrammar = false,
+    linkedKey = null,
+    onCite,
+    onLink,
+  }: Props = $props();
+
+  // Index cards by Stone, keep order from `data.cards`.
+  let cardsByStone = $derived.by<Record<StoneKey, Card[]>>(() => {
+    const out: Record<StoneKey, Card[]> = {
+      cornerstone: [], keystone: [], touchstone: [], lodestone: [], capstone: [],
+    };
+    for (const c of data.cards) out[c.stone].push(c);
+    return out;
+  });
+
+  // Index traces by Stone with safe defaults so a missing Stone still
+  // renders an empty region rather than crashing.
+  let tracesByStone = $derived.by<Record<StoneKey, StoneTrace>>(() => {
+    const out: Record<StoneKey, StoneTrace> = {
+      cornerstone: { key: 'cornerstone', members: [] },
+      keystone:    { key: 'keystone', members: [] },
+      touchstone:  { key: 'touchstone', members: [] },
+      lodestone:   { key: 'lodestone', members: [] },
+      capstone:    { key: 'capstone', members: [] },
+    };
+    for (const t of data.stones) out[t.key] = t;
+    return out;
+  });
+</script>
+
+<section class="findings" aria-label="Findings, grouped by Stone">
+  <header class="findings-head">
+    <h2 class="findings-h2">Findings · grouped by Stone</h2>
+    <span class="findings-tagline">cards = what each Stone found · provenance collapses below</span>
+  </header>
+
+  <RunHealthStrip
+    cards={data.cards}
+    stones={data.stones}
+    wallSeconds={data.wallSeconds}
+    cacheHit={data.cacheHit}
+  />
+
+  {#each STONE_ORDER as key (key)}
+    <StoneRegion
+      stone={key}
+      cards={cardsByStone[key]}
+      trace={tracesByStone[key]}
+      {density}
+      {provenanceMode}
+      {linkedKey}
+      {onCite}
+      {onLink}
+    />
+  {/each}
+
+  {#if showGrammar}
+    <CardGrammarReference {density} />
+  {/if}
+</section>
+
+<style>
+  .findings {
+    background: var(--paper);
+    color: var(--ink);
+  }
+  .findings-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    gap: var(--s-3);
+    padding: var(--s-3) 0 var(--s-2);
+  }
+  .findings-h2 {
+    margin: 0;
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 22px;
+    font-weight: 500;
+    color: var(--ink);
+  }
+  .findings-tagline {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.05em;
+  }
+</style>

web/sveltekit/src/lib/components/findings/ProvenanceTrace.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+  import type { StoneMember } from '$lib/types/card';
+  import TierGlyph from '$lib/components/glyphs/TierGlyph.svelte';
+  import Self from './ProvenanceTrace.svelte';
+
+  /** Indented specialist tree. Each row: status pip · mono id · italic-
+   *  serif name · note. Recursive via self-import (svelte:self is
+   *  deprecated in Svelte 5). */
+  let { members, depth = 0 }: { members: StoneMember[]; depth?: number } = $props();
+
+  function pip(status: StoneMember['status']): string {
+    return ({ ok: '●', warn: '▲', error: '■', silent: '○' } as const)[status];
+  }
+  function pipColorVar(m: StoneMember): string {
+    if (m.status === 'warn') return '#B7791F';
+    if (m.status === 'error') return '#B91C1C';
+    if (m.status === 'silent') return 'var(--ink-tertiary)';
+    if (m.tier) return `var(--tier-${m.tier})`;
+    return 'var(--ink)';
+  }
+</script>
+
+<ul class="prov-tree" style="--depth: {depth};">
+  {#each members as m (m.id)}
+    <li class="prov-row prov-status-{m.status}">
+      <span class="prov-pip" style="color: {pipColorVar(m)};" aria-hidden="true">{pip(m.status)}</span>
+      <span class="prov-id">{m.id}</span>
+      {#if m.tier}
+        <span class="prov-tier">
+          <TierGlyph tier={m.tier} size={9} color={`var(--tier-${m.tier})`} />
+        </span>
+      {/if}
+      <span class="prov-name">{m.name}</span>
+      {#if m.note}<span class="prov-note">— {m.note}</span>{/if}
+      {#if m.ms != null}<span class="prov-ms">{m.ms < 1000 ? `${m.ms}ms` : `${(m.ms / 1000).toFixed(1)}s`}</span>{/if}
+    </li>
+    {#if m.children?.length}
+      <li class="prov-children">
+        <Self members={m.children} depth={depth + 1} />
+      </li>
+    {/if}
+  {/each}
+</ul>
+
+<style>
+  .prov-tree {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    padding-left: calc(var(--depth, 0) * 16px);
+  }
+  .prov-row {
+    display: grid;
+    grid-template-columns: 14px max-content max-content 1fr auto;
+    gap: var(--s-2);
+    align-items: baseline;
+    padding: 3px 0;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    border-bottom: 1px dotted var(--rule-soft);
+  }
+  .prov-row:last-child { border-bottom: 0; }
+  .prov-pip {
+    text-align: center;
+    font-size: 10px;
+    line-height: 1;
+  }
+  .prov-id {
+    color: var(--ink);
+    letter-spacing: 0.04em;
+    text-transform: lowercase;
+  }
+  .prov-tier {
+    display: inline-flex;
+    align-items: center;
+  }
+  .prov-name {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 13px;
+    color: var(--ink);
+  }
+  .prov-note {
+    font-family: var(--font-sans);
+    font-size: 12px;
+    color: var(--ink-tertiary);
+  }
+  .prov-ms {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--ink-tertiary);
+  }
+  .prov-status-silent .prov-name { color: var(--ink-tertiary); }
+  .prov-status-warn .prov-name { color: #B7791F; }
+  .prov-status-error .prov-name { color: #B91C1C; }
+  .prov-children { padding: 0; }
+</style>

web/sveltekit/src/lib/components/findings/RunHealthStrip.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import type { Card, StoneTrace } from '$lib/types/card';
+
+  /** Top-of-Findings status row. Mirrors findings.jsx RunHealth44:
+   *  Stones · functions fired · evidence cards · wall-clock · silent /
+   *  warn / error chips when nonzero. */
+  interface Props {
+    cards: Card[];
+    stones: StoneTrace[];
+    wallSeconds?: number;
+    cacheHit?: number;
+  }
+
+  let { cards, stones, wallSeconds, cacheHit }: Props = $props();
+
+  function flatten(ms: StoneTrace['members']): StoneTrace['members'] {
+    return ms.flatMap((m) => (m.children ? [m, ...flatten(m.children)] : [m]));
+  }
+  let allMembers = $derived(stones.flatMap((s) => flatten(s.members)));
+  let total = $derived(allMembers.length);
+  let fired = $derived(allMembers.filter((m) => m.status === 'ok').length);
+  let silent = $derived(allMembers.filter((m) => m.status === 'silent').length);
+  let warn = $derived(allMembers.filter((m) => m.status === 'warn').length);
+  let err = $derived(allMembers.filter((m) => m.status === 'error').length);
+
+  let wall = $derived(wallSeconds == null
+    ? '—'
+    : wallSeconds < 1 ? `${Math.round(wallSeconds * 1000)}ms` : `${wallSeconds.toFixed(1)}s`);
+</script>
+
+<div class="rh">
+  <span class="rh-item"><strong>{stones.length}</strong> Stones</span>
+  <span class="rh-sep">·</span>
+  <span class="rh-item"><strong>{fired}/{total}</strong> functions fired</span>
+  <span class="rh-sep">·</span>
+  <span class="rh-item"><strong>{cards.length}</strong> evidence card{cards.length === 1 ? '' : 's'}</span>
+  <span class="rh-sep">·</span>
+  <span class="rh-item"><strong>{wall}</strong> wall-clock</span>
+  {#if cacheHit != null}
+    <span class="rh-sep">·</span>
+    <span class="rh-item"><strong>{Math.round(cacheHit * 100)}%</strong> cache</span>
+  {/if}
+  {#if silent > 0}
+    <span class="rh-sep">·</span>
+    <span class="rh-item rh-silent">{silent} silent</span>
+  {/if}
+  {#if warn > 0}
+    <span class="rh-sep">·</span>
+    <span class="rh-item rh-warn">{warn} warn</span>
+  {/if}
+  {#if err > 0}
+    <span class="rh-sep">·</span>
+    <span class="rh-item rh-err">{err} error</span>
+  {/if}
+</div>
+
+<style>
+  .rh {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--s-2);
+    padding: var(--s-2) var(--s-4);
+    background: var(--paper-deep);
+    border-top: 1px solid var(--rule-soft);
+    border-bottom: 1px solid var(--rule-soft);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.04em;
+  }
+  .rh-item strong {
+    font-weight: 600;
+    color: var(--ink);
+    margin-right: 2px;
+  }
+  .rh-sep { opacity: 0.5; }
+  .rh-silent { color: var(--ink-tertiary); }
+  .rh-warn { color: #B7791F; }
+  .rh-err { color: #B91C1C; }
+</style>

web/sveltekit/src/lib/components/findings/StoneRegion.svelte

@@ -0,0 +1,233 @@
+<script lang="ts">
+  import type { Card, Density, ProvenanceMode, StoneKey, StoneTrace } from '$lib/types/card';
+  import { STONE_META, STONE_ORDER } from '$lib/types/card';
+  import FindingCard from './FindingCard.svelte';
+  import StoneTally from './StoneTally.svelte';
+  import ProvenanceTrace from './ProvenanceTrace.svelte';
+
+  /** A Stone group: header (serif italic name + role · tag · run-tally),
+   *  card grid, smart provenance toggle. */
+  interface Props {
+    stone: StoneKey;
+    cards: Card[];
+    trace: StoneTrace;
+    density?: Density;
+    provenanceMode?: ProvenanceMode;
+    linkedKey?: string | null;
+    onCite?: (citeId: string) => void;
+    onLink?: (key: string | null) => void;
+  }
+
+  let {
+    stone,
+    cards,
+    trace,
+    density = 'comfortable',
+    provenanceMode = 'smart',
+    linkedKey = null,
+    onCite,
+    onLink,
+  }: Props = $props();
+
+  let meta = $derived(STONE_META[stone]);
+  let stoneNum = $derived(`${STONE_ORDER.indexOf(stone) + 1}`.padStart(2, '0'));
+  let isCapstone = $derived(stone === 'capstone');
+
+  function flatten(ms: StoneTrace['members']): StoneTrace['members'] {
+    return ms.flatMap((m) => (m.children ? [m, ...flatten(m.children)] : [m]));
+  }
+  let flat = $derived(flatten(trace.members));
+  let traceCount = $derived(flat.length);
+  let hasAnomaly = $derived(
+    flat.some((m) => m.status === 'warn' || m.status === 'error' || m.status === 'silent')
+  );
+  let smartOpen = $derived(
+    provenanceMode === 'all-expanded' ? true :
+    provenanceMode === 'all-collapsed' ? false :
+    hasAnomaly
+  );
+
+  let userOpen = $state<boolean | null>(null);
+  let traceOpen = $derived(userOpen ?? smartOpen);
+
+  // Reset user override when the mode changes.
+  $effect(() => {
+    provenanceMode;
+    userOpen = null;
+  });
+</script>
+
+<section class="region region-{stone}" aria-labelledby={`region-h-${stone}`} data-stone={stone}>
+  <header class="region-head">
+    <div class="region-head-left">
+      <span class="region-num">{stoneNum}</span>
+      <h3 id={`region-h-${stone}`} class="region-name">{meta.name}</h3>
+      <span class="region-role">· {meta.role}</span>
+      <span class="region-tag">{meta.tag}</span>
+    </div>
+    <StoneTally cardCount={cards.length} members={trace.members} />
+  </header>
+
+  {#if cards.length === 0}
+    <div class="silent">
+      <span class="silent-tag">silent</span>
+      <p class="silent-prose">
+        {#if stone === 'lodestone'}
+          No projection cards landed for this query. Atomic functions still ran (see provenance) and returned silence rather than confabulation.
+        {:else}
+          No cards for this Stone on this query.
+        {/if}
+      </p>
+    </div>
+  {:else}
+    <div class="rail" class:rail-capstone={isCapstone}>
+      {#each cards as card (card.id)}
+        <FindingCard
+          {card}
+          {density}
+          {linkedKey}
+          {onCite}
+          {onLink}
+        />
+      {/each}
+    </div>
+  {/if}
+
+  <div class="prov">
+    <button
+      type="button"
+      class="prov-toggle"
+      aria-expanded={traceOpen}
+      aria-controls={`prov-body-${stone}`}
+      onclick={() => (userOpen = !traceOpen)}
+    >
+      <span class="prov-caret" aria-hidden="true">{traceOpen ? '▾' : '▸'}</span>
+      <span class="prov-label">{traceOpen ? 'Hide' : 'Show'} provenance</span>
+      <span class="prov-meta">
+        · {traceCount} function{traceCount === 1 ? '' : 's'}{hasAnomaly ? ' · anomaly' : ''}
+      </span>
+    </button>
+    {#if traceOpen}
+      <div id={`prov-body-${stone}`} class="prov-body">
+        <ProvenanceTrace members={trace.members} />
+      </div>
+    {/if}
+  </div>
+</section>
+
+<style>
+  .region {
+    border-top: 1px solid var(--rule-soft);
+    padding: var(--s-5) 0 var(--s-5);
+    background: transparent;
+  }
+  .region:first-of-type { border-top: 0; }
+  .region-head {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: var(--s-4);
+    margin-bottom: var(--s-3);
+    flex-wrap: wrap;
+  }
+  .region-head-left {
+    display: flex;
+    align-items: baseline;
+    gap: var(--s-2);
+    flex-wrap: wrap;
+  }
+  .region-num {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.1em;
+  }
+  .region-name {
+    margin: 0;
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 26px;
+    font-weight: 500;
+    color: var(--ink);
+    letter-spacing: -0.005em;
+    line-height: 1.1;
+  }
+  .region-role {
+    font-family: var(--font-sans);
+    font-size: 14px;
+    color: var(--ink-secondary);
+  }
+  .region-tag {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.05em;
+    margin-left: var(--s-2);
+  }
+  .rail {
+    display: grid;
+    grid-template-columns: repeat(12, 1fr);
+    gap: var(--s-3);
+  }
+  .rail :global(> .fc) { grid-column: span 4; }
+  .rail :global(> .fc.fc-register),
+  .rail :global(> .fc.fc-timeseries),
+  .rail :global(> .fc.fc-forecast),
+  .rail :global(> .fc.fc-raster),
+  .rail :global(> .fc.fc-raster-pred),
+  .rail :global(> .fc.fc-comparison) {
+    grid-column: span 6;
+  }
+  .rail-capstone :global(> .fc) { grid-column: span 6; }
+  @media (max-width: 920px) {
+    .rail { grid-template-columns: repeat(6, 1fr); }
+    .rail :global(> .fc) { grid-column: span 6; }
+  }
+
+  .silent {
+    border: 1px dashed var(--rule-soft);
+    padding: var(--s-4);
+    display: flex;
+    flex-direction: column;
+    gap: var(--s-2);
+    background: var(--paper-deep);
+  }
+  .silent-tag {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+  }
+  .silent-prose {
+    margin: 0;
+    font-size: 13px;
+    color: var(--ink-secondary);
+    line-height: 1.5;
+    max-width: var(--measure);
+  }
+
+  .prov { margin-top: var(--s-3); }
+  .prov-toggle {
+    background: transparent;
+    border: 0;
+    padding: 4px 0;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: baseline;
+    gap: var(--s-1);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-secondary);
+    letter-spacing: 0.05em;
+  }
+  .prov-toggle:hover { color: var(--ink); }
+  .prov-caret { font-size: 10px; color: var(--ink-tertiary); }
+  .prov-meta { color: var(--ink-tertiary); }
+  .prov-body {
+    margin-top: var(--s-2);
+    padding: var(--s-2) 0;
+    border-top: 1px solid var(--rule-soft);
+    border-bottom: 1px solid var(--rule-soft);
+  }
+</style>

web/sveltekit/src/lib/components/findings/StoneTally.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { StoneMember } from '$lib/types/card';
+
+  /** Run-tally chip in the Stone-region header. Mirrors findings.jsx
+   *  StoneTally44: shows card count, fired count, silent / warn / error
+   *  counts (when nonzero), and the heaviest-specialist runtime. */
+  interface Props {
+    cardCount: number;
+    members: StoneMember[];
+  }
+
+  let { cardCount, members }: Props = $props();
+
+  function flatten(ms: StoneMember[]): StoneMember[] {
+    return ms.flatMap((m) => (m.children ? [m, ...flatten(m.children)] : [m]));
+  }
+  let flat = $derived(flatten(members));
+  let fired = $derived(flat.filter((m) => m.status === 'ok').length);
+  let silent = $derived(flat.filter((m) => m.status === 'silent').length);
+  let warn = $derived(flat.filter((m) => m.status === 'warn').length);
+  let err = $derived(flat.filter((m) => m.status === 'error').length);
+  let ms = $derived(members.reduce((a, m) => Math.max(a, m.ms ?? 0), 0));
+
+  function fmtMs(x: number): string {
+    if (x === 0) return '—';
+    if (x < 1000) return `${x}ms`;
+    return `${(x / 1000).toFixed(1)}s`;
+  }
+</script>
+
+<span class="tally">
+  <span class="cards">{cardCount} card{cardCount === 1 ? '' : 's'}</span>
+  <span class="sep">·</span>
+  <span class="fired"><strong>{fired}</strong> fired</span>
+  {#if silent > 0}
+    <span class="sep">·</span>
+    <span class="silent"><strong>{silent}</strong> silent</span>
+  {/if}
+  {#if warn > 0}
+    <span class="sep">·</span>
+    <span class="warn"><strong>{warn}</strong> warn</span>
+  {/if}
+  {#if err > 0}
+    <span class="sep">·</span>
+    <span class="err"><strong>{err}</strong> error</span>
+  {/if}
+  <span class="sep">·</span>
+  <span class="ms"><strong>{fmtMs(ms)}</strong></span>
+</span>
+
+<style>
+  .tally {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.04em;
+    flex-wrap: wrap;
+  }
+  strong {
+    font-weight: 600;
+    color: var(--ink);
+  }
+  .silent strong { color: var(--ink-tertiary); }
+  .warn strong { color: #B7791F; }
+  .err strong { color: #B91C1C; }
+  .sep { color: var(--ink-tertiary); opacity: 0.6; }
+</style>

web/sveltekit/src/lib/components/findings/cards/CardBody.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  import HeadlineBody from './HeadlineBody.svelte';
+  import TabularBody from './TabularBody.svelte';
+  import ScalarsBody from './ScalarsBody.svelte';
+  import SparkBody from './SparkBody.svelte';
+  import TimeseriesBody from './TimeseriesBody.svelte';
+  import ForecastBody from './ForecastBody.svelte';
+  import RasterBody from './RasterBody.svelte';
+  import RegisterBody from './RegisterBody.svelte';
+  import ComparisonBody from './ComparisonBody.svelte';
+  import MetaBody from './MetaBody.svelte';
+
+  /** Dispatcher: picks the body component for a card variant.
+   *  Spark + histogram share SparkBody (same shape, different source field).
+   *  Raster + raster-pred share RasterBody (synthetic chrome carries the
+   *  illustrative tag + dashed top-rule from the parent FindingCard). */
+  let { card }: { card: Card } = $props();
+</script>
+
+{#if card.variant === 'headline'}
+  <HeadlineBody {card} />
+{:else if card.variant === 'tabular'}
+  <TabularBody {card} />
+{:else if card.variant === 'scalars'}
+  <ScalarsBody {card} />
+{:else if card.variant === 'spark' || card.variant === 'histogram'}
+  <SparkBody {card} />
+{:else if card.variant === 'timeseries'}
+  <TimeseriesBody {card} />
+{:else if card.variant === 'forecast'}
+  <ForecastBody {card} />
+{:else if card.variant === 'raster' || card.variant === 'raster-pred'}
+  <RasterBody {card} />
+{:else if card.variant === 'register'}
+  <RegisterBody {card} />
+{:else if card.variant === 'comparison'}
+  <ComparisonBody {card} />
+{:else if card.variant === 'meta'}
+  <MetaBody {card} />
+{:else}
+  <div class="unknown">unknown variant: {card.variant}</div>
+{/if}
+
+<style>
+  .unknown {
+    padding: var(--s-3) var(--s-4);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/ComparisonBody.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  import TierGlyph from '$lib/components/glyphs/TierGlyph.svelte';
+  let { card }: { card: Card } = $props();
+</script>
+
+<div class="body body-comparison">
+  <div class="cmp-grid">
+    {#if card.left}
+      <div class="cell">
+        <div class="cell-tier">
+          <TierGlyph tier={card.left.tier} size={10} color="var(--tier-{card.left.tier})" />
+          <span class="cell-label">{card.left.label}</span>
+        </div>
+        <div class="cell-value" style="color: var(--tier-{card.left.tier});">{card.left.value}</div>
+        {#if card.left.aux}<div class="cell-aux">{card.left.aux}</div>{/if}
+      </div>
+    {/if}
+    <div class="divider" aria-hidden="true">vs</div>
+    {#if card.right}
+      <div class="cell">
+        <div class="cell-tier">
+          <TierGlyph tier={card.right.tier} size={10} color="var(--tier-{card.right.tier})" />
+          <span class="cell-label">{card.right.label}</span>
+        </div>
+        <div class="cell-value" style="color: var(--tier-{card.right.tier});">{card.right.value}</div>
+        {#if card.right.aux}<div class="cell-aux">{card.right.aux}</div>{/if}
+      </div>
+    {/if}
+  </div>
+  {#if card.delta}<div class="cmp-delta">{card.delta}</div>{/if}
+  {#if card.sub}<div class="body-sub">{card.sub}</div>{/if}
+</div>
+
+<style>
+  .body-comparison {
+    padding: var(--s-3) var(--s-4) var(--s-3);
+    display: flex;
+    flex-direction: column;
+    gap: var(--s-2);
+  }
+  :global(.fc.is-compact) .body-comparison { padding: var(--s-2) var(--s-3); }
+  .cmp-grid {
+    display: grid;
+    grid-template-columns: 1fr auto 1fr;
+    gap: var(--s-3);
+    align-items: stretch;
+  }
+  .cell { display: flex; flex-direction: column; gap: 4px; }
+  .cell-tier {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.05em;
+    text-transform: lowercase;
+  }
+  .cell-value {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 22px;
+    font-weight: 500;
+  }
+  .cell-aux {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--ink-tertiary);
+  }
+  .divider {
+    align-self: center;
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 14px;
+    color: var(--ink-tertiary);
+    padding-top: 18px;
+  }
+  .cmp-delta {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink);
+    border-top: 1px solid var(--rule-soft);
+    padding-top: var(--s-2);
+  }
+  .body-sub {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/ForecastBody.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+  import type { Card, ForecastBand } from '$lib/types/card';
+  let { card }: { card: Card } = $props();
+
+  const W = 240, H = 88, PAD = 6;
+
+  let data = $derived<ForecastBand[]>(card.forecast ?? []);
+  let xs = $derived(data.map((_, i) => PAD + (i / Math.max(data.length - 1, 1)) * (W - PAD * 2)));
+  let max = $derived(Math.max(...data.map((d) => d.high), 1));
+
+  function y(v: number): number {
+    return H - PAD - (v / max) * (H - PAD * 2 - 12);
+  }
+
+  let midD = $derived(xs.map((x, i) => `${i ? 'L' : 'M'} ${x} ${y(data[i].mid)}`).join(' '));
+
+  let areaD = $derived.by(() => {
+    if (!data.length) return '';
+    const lows = xs.map((x, i) => `${x} ${y(data[i].low)}`).join(' L ');
+    const highs = [...xs].reverse()
+      .map((x, idx) => `${x} ${y(data[data.length - 1 - idx].high)}`)
+      .join(' L ');
+    return `M ${lows} L ${highs} Z`;
+  });
+</script>
+
+<div class="body body-forecast">
+  <svg viewBox="0 0 {W} {H}" width="100%" height={H} aria-hidden="true">
+    <path d={areaD} fill="var(--tier-{card.tier})" fill-opacity="0.18" />
+    <path d={midD} fill="none" stroke="var(--tier-{card.tier})" stroke-width="1.5" />
+    {#each data as d, i}
+      <circle cx={xs[i]} cy={y(d.mid)} r="2.2" fill="var(--tier-{card.tier})" />
+      <text x={xs[i]} y={H - 1} font-size="9" font-family="IBM Plex Mono"
+            text-anchor="middle" fill="#6B6B6B">{d.year}</text>
+    {/each}
+  </svg>
+  {#if card.sub}<div class="body-sub">{card.sub}</div>{/if}
+</div>
+
+<style>
+  .body-forecast { padding: var(--s-3) var(--s-4) var(--s-3); }
+  :global(.fc.is-compact) .body-forecast { padding: var(--s-2) var(--s-3); }
+  svg { display: block; }
+  .body-sub {
+    margin-top: var(--s-2);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/HeadlineBody.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  let { card }: { card: Card } = $props();
+</script>
+
+<div class="body body-headline">
+  <div class="headline" style="color: var(--tier-{card.tier});">{card.headline ?? ''}</div>
+  {#if card.subhead}<div class="subhead">{card.subhead}</div>{/if}
+  {#if card.body}<p class="body-prose">{card.body}</p>{/if}
+</div>
+
+<style>
+  .body-headline {
+    padding: var(--s-3) var(--s-4) var(--s-2);
+    display: flex;
+    flex-direction: column;
+    gap: var(--s-1);
+  }
+  :global(.fc.is-compact) .body-headline { padding: var(--s-2) var(--s-3); }
+  .headline {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 28px;
+    font-weight: 500;
+    line-height: 1.1;
+    letter-spacing: -0.01em;
+  }
+  :global(.fc.is-compact) .headline { font-size: 22px; }
+  .subhead {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.04em;
+  }
+  .body-prose {
+    margin: var(--s-2) 0 0;
+    font-size: 13px;
+    line-height: 1.45;
+    color: var(--ink-secondary);
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/MetaBody.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  let { card }: { card: Card } = $props();
+</script>
+
+<div class="body body-meta">
+  <dl class="meta-list">
+    {#each card.metaRows ?? [] as r}
+      <div class="meta-row">
+        <dt>{r.k}</dt>
+        <dd>{r.v}</dd>
+      </div>
+    {/each}
+  </dl>
+  {#if card.sub}<div class="body-sub">{card.sub}</div>{/if}
+</div>
+
+<style>
+  .body-meta { padding: var(--s-2) var(--s-4) var(--s-3); }
+  :global(.fc.is-compact) .body-meta { padding: var(--s-2) var(--s-3); }
+  .meta-list {
+    margin: 0;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 4px;
+  }
+  .meta-row {
+    display: grid;
+    grid-template-columns: minmax(110px, max-content) 1fr;
+    gap: var(--s-3);
+    padding: 3px 0;
+    border-bottom: 1px solid var(--rule-soft);
+    align-items: baseline;
+  }
+  .meta-row:last-child { border-bottom: 0; }
+  dt {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    text-transform: lowercase;
+    letter-spacing: 0.04em;
+  }
+  dd {
+    margin: 0;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink);
+  }
+  .body-sub {
+    margin-top: var(--s-2);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/RasterBody.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  import RasterThumb from './RasterThumb.svelte';
+  let { card }: { card: Card } = $props();
+</script>
+
+<div class="body body-raster">
+  <div class="frame">
+    <RasterThumb kind={card.rasterKind} />
+    {#if card.illustrative || card.tier === 'synthetic'}
+      <span class="illustrative" title="Illustrative rendering, not source pixels">illustrative</span>
+    {/if}
+  </div>
+  {#if card.headline}
+    <div class="raster-headline">
+      <span style="color: var(--tier-{card.tier});">{card.headline}</span>
+      {#if card.subhead}<span> · {card.subhead}</span>{/if}
+    </div>
+  {/if}
+  {#if card.sub}<div class="body-sub">{card.sub}</div>{/if}
+</div>
+
+<style>
+  .body-raster { padding: var(--s-2) var(--s-4) var(--s-3); display: flex; flex-direction: column; gap: var(--s-2); }
+  :global(.fc.is-compact) .body-raster { padding: var(--s-2) var(--s-3); }
+  .frame { position: relative; border: 1px solid var(--rule-soft); }
+  .illustrative {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+    background: rgba(26, 26, 26, 0.7);
+    color: var(--paper);
+    font-family: var(--font-mono);
+    font-size: 9px;
+    padding: 2px 6px;
+    letter-spacing: 0.05em;
+    text-transform: lowercase;
+  }
+  .raster-headline {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--ink);
+  }
+  .raster-headline span:first-child {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 18px;
+    font-weight: 500;
+  }
+  .body-sub {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/RasterThumb.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+  import type { RasterKind } from '$lib/types/card';
+
+  /** Hand-drawn SVG approximations of each raster layer's conventional
+   *  palette. Replace with real MapLibre tile snapshots when the tile
+   *  pipeline is wired up. Mirrors findings.jsx → RasterThumb exactly. */
+  let { kind }: { kind?: RasterKind } = $props();
+
+  const W = 240, H = 120;
+</script>
+
+{#if kind === 'stormwater'}
+  <svg viewBox="0 0 {W} {H}" width="100%" height={H} aria-hidden="true">
+    <rect width={W} height={H} fill="#F2F2EE" />
+    <g stroke="#D9D6CC" stroke-width="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="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" stroke-width="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" stroke-width="0.6" />
+    <circle cx="120" cy="74" r="3.2" fill="#D17C00" stroke="#FAFAF7" stroke-width="1.3" />
+    <text x={W - 6} y={H - 5} font-size="8" font-family="IBM Plex Mono" text-anchor="end" fill="#6B6B6B">2.13 in/hr · MOD</text>
+  </svg>
+{:else if kind === 'stormwater-dry'}
+  <svg viewBox="0 0 {W} {H}" width="100%" height={H} aria-hidden="true">
+    <rect width={W} height={H} fill="#F2F2EE" />
+    <g stroke="#D9D6CC" stroke-width="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" stroke-width="0.5" stroke-dasharray="2 2" />
+    <circle cx="120" cy="60" r="3.2" fill="#D17C00" stroke="#FAFAF7" stroke-width="1.3" />
+    <text x={W - 6} y={H - 5} font-size="8" font-family="IBM Plex Mono" text-anchor="end" fill="#6B6B6B">no ponding · MOD</text>
+  </svg>
+{:else if kind === 'prithvi'}
+  <svg viewBox="0 0 {W} {H}" width="100%" height={H} aria-hidden="true">
+    <defs>
+      <pattern id="rt-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(#rt-s2-rgb)" />
+    <rect x="0" y="55" width={W} height="6" fill="#A8A496" />
+    <rect x="115" y="0" width="8" height={H} fill="#A8A496" />
+    <ellipse cx="50" cy="92" rx="6" ry="3" fill="#2A6FA8" fill-opacity="0.65" />
+    <text x="6" y="14" font-size="9" font-family="IBM Plex Mono" fill="#FAFAF7">PRITHVI · 0.3%</text>
+    <text x={W - 6} y={H - 5} font-size="8" font-family="IBM Plex Mono" text-anchor="end" fill="#FAFAF7">scene 2026-05-02</text>
+  </svg>
+{:else if kind === 'lulc'}
+  <svg viewBox="0 0 {W} {H}" width="100%" height={H} aria-hidden="true">
+    <rect width={W} height={H} fill="#F2F2EE" />
+    <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" />
+    <rect x="140" y="38" width="100" height="22" fill="#5B7FB4" />
+    <rect x="0" y="60" width="100" height="60" fill="#C66" />
+    <rect x="100" y="60" width="50" height="40" fill="#5B8A4A" />
+    <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" font-size="9" font-family="IBM Plex Mono" fill="#FAFAF7">LULC · TerraMind</text>
+    <text x={W - 6} y={H - 5} font-size="8" font-family="IBM Plex Mono" text-anchor="end" fill="#FAFAF7">scene 2026-05-02</text>
+  </svg>
+{:else if kind === 'buildings'}
+  <svg viewBox="0 0 {W} {H}" width="100%" height={H} aria-hidden="true">
+    <rect width={W} height={H} fill="#3A3A38" />
+    {#each [
+      [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]
+    ] as r}
+      <rect x={r[0]} y={r[1]} width={r[2]} height={r[3]}
+            fill="rgba(42,111,168,0.55)" stroke="#2A6FA8" stroke-width="0.4" />
+    {/each}
+    <text x="6" y="14" font-size="9" font-family="IBM Plex Mono" fill="#FAFAF7">BLDG · TerraMind</text>
+    <text x={W - 6} y={H - 5} font-size="8" font-family="IBM Plex Mono" text-anchor="end" fill="#FAFAF7">36.2% built</text>
+  </svg>
+{:else}
+  <div class="thumb-placeholder">raster preview</div>
+{/if}
+
+<style>
+  svg { display: block; }
+  .thumb-placeholder {
+    height: 120px;
+    background: var(--paper-deep);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--ink-tertiary);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    border: 1px dashed var(--rule-soft);
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/RegisterBody.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  import TierGlyph from '$lib/components/glyphs/TierGlyph.svelte';
+  let { card }: { card: Card } = $props();
+</script>
+
+<div class="body body-register">
+  <ul class="reg-list">
+    {#each card.registers ?? [] as r}
+      <li class="reg-row" class:silent={!r.label}>
+        <span class="reg-tag" title={r.tier}>
+          <TierGlyph tier={r.tier} size={9} color="var(--tier-{r.tier})" />
+          <span>{r.reg}</span>
+        </span>
+        {#if r.label}
+          <span class="reg-label" title={r.detail ? `${r.label} — ${r.detail}` : r.label}>{r.label}</span>
+          <span class="reg-source">{r.sourceId ?? ''}</span>
+        {:else}
+          <span class="reg-silent">{r.note}</span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+  {#if card.sub}<div class="body-sub">{card.sub}</div>{/if}
+</div>
+
+<style>
+  .body-register { padding: var(--s-2) var(--s-4) var(--s-3); }
+  :global(.fc.is-compact) .body-register { padding: var(--s-2) var(--s-3); }
+  .reg-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+  }
+  .reg-row {
+    display: grid;
+    grid-template-columns: 70px 1fr auto;
+    gap: var(--s-2);
+    align-items: baseline;
+    padding: 5px 0;
+    border-bottom: 1px solid var(--rule-soft);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    line-height: 1.4;
+  }
+  .reg-row:last-child { border-bottom: 0; }
+  :global(.fc.is-compact) .reg-row { padding: 3px 0; font-size: 11px; }
+  .reg-tag {
+    display: inline-flex;
+    gap: 4px;
+    align-items: center;
+    color: var(--ink-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+  }
+  .reg-label {
+    color: var(--ink);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .reg-source {
+    color: var(--ink-tertiary);
+    font-size: 10px;
+    letter-spacing: 0.05em;
+  }
+  .reg-silent {
+    grid-column: 2 / span 2;
+    color: var(--ink-tertiary);
+    font-style: italic;
+  }
+  .reg-row.silent { opacity: 0.65; }
+  .body-sub {
+    margin-top: var(--s-2);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/ScalarsBody.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  let { card }: { card: Card } = $props();
+</script>
+
+<div class="body body-scalars">
+  <div class="row">
+    {#each card.scalars ?? [] as s}
+      <div class="cell">
+        <div class="value" style="color: var(--tier-{card.tier});">{s.value}</div>
+        <div class="label">{s.label}</div>
+      </div>
+    {/each}
+  </div>
+  {#if card.sub}<div class="body-sub">{card.sub}</div>{/if}
+</div>
+
+<style>
+  .body-scalars { padding: var(--s-3) var(--s-4) var(--s-3); }
+  :global(.fc.is-compact) .body-scalars { padding: var(--s-2) var(--s-3); }
+  .row {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
+    gap: var(--s-3);
+  }
+  .cell { display: flex; flex-direction: column; gap: 2px; }
+  .value {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 22px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+  .label {
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.06em;
+    text-transform: lowercase;
+  }
+  .body-sub {
+    margin-top: var(--s-3);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/SparkBody.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  let { card }: { card: Card } = $props();
+
+  /** spark + histogram both render the same shape — bars filling 240×38. */
+  const W = 240, H = 38;
+  let data = $derived(card.spark ?? card.histogram ?? []);
+  let max = $derived(Math.max(...data, 1));
+  let n = $derived(data.length);
+  let barW = $derived(Math.max(2, W / Math.max(n, 1) - 1.5));
+</script>
+
+<div class="body body-spark">
+  {#if card.headline}
+    <div class="headline" style="color: var(--tier-{card.tier});">{card.headline}</div>
+  {/if}
+  {#if card.subhead}<div class="subhead">{card.subhead}</div>{/if}
+  <svg viewBox="0 0 {W} {H}" width="100%" height={H} preserveAspectRatio="none" aria-hidden="true">
+    {#each data as v, i}
+      <rect
+        x={(i / n) * W + 0.5}
+        y={H - (v / max) * H}
+        width={barW}
+        height={(v / max) * H}
+        fill="var(--tier-{card.tier})"
+      />
+    {/each}
+  </svg>
+  {#if card.sparkSub}<div class="body-sub">{card.sparkSub}</div>{/if}
+  {#if !card.sparkSub && card.sub}<div class="body-sub">{card.sub}</div>{/if}
+</div>
+
+<style>
+  .body-spark {
+    padding: var(--s-3) var(--s-4) var(--s-3);
+    display: flex;
+    flex-direction: column;
+    gap: var(--s-1);
+  }
+  :global(.fc.is-compact) .body-spark { padding: var(--s-2) var(--s-3); }
+  .headline {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 22px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+  .subhead {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.04em;
+    margin-bottom: var(--s-1);
+  }
+  svg { display: block; }
+  .body-sub {
+    margin-top: var(--s-2);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/TabularBody.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  let { card }: { card: Card } = $props();
+</script>
+
+<div class="body body-tabular">
+  <table class="t">
+    <thead>
+      <tr>
+        {#each card.columns ?? [] as h}<th>{h}</th>{/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#each card.rows ?? [] as row}
+        <tr>{#each row as cell}<td>{cell}</td>{/each}</tr>
+      {/each}
+    </tbody>
+  </table>
+  {#if card.sub}<div class="body-sub">{card.sub}</div>{/if}
+</div>
+
+<style>
+  .body-tabular { padding: var(--s-2) var(--s-4) var(--s-3); }
+  :global(.fc.is-compact) .body-tabular { padding: var(--s-2) var(--s-3); }
+  .t {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: var(--font-mono);
+    font-size: 12px;
+  }
+  .t th {
+    text-align: left;
+    font-weight: 500;
+    color: var(--ink-tertiary);
+    padding: 4px 8px 4px 0;
+    border-bottom: 1px solid var(--rule-soft);
+    text-transform: lowercase;
+    letter-spacing: 0.04em;
+  }
+  .t td {
+    padding: 4px 8px 4px 0;
+    border-bottom: 1px solid var(--rule-soft);
+    color: var(--ink);
+  }
+  .t tr:last-child td { border-bottom: 0; }
+  :global(.fc.is-compact) .t th,
+  :global(.fc.is-compact) .t td { padding: 2px 6px 2px 0; font-size: 11px; }
+  .body-sub {
+    margin-top: var(--s-2);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+  }
+</style>

web/sveltekit/src/lib/components/findings/cards/TimeseriesBody.svelte

@@ -0,0 +1,108 @@
+<script lang="ts">
+  import type { Card } from '$lib/types/card';
+  let { card }: { card: Card } = $props();
+
+  const W = 240, H = 84, PAD = 6;
+
+  // Synthetic surge curve: harmonic baseline + storm pulse around peak.
+  // Mirrors findings.jsx exactly so the visual matches the prototype.
+  const ts = $derived(card.timeseries ?? { hours: 96, peak: { x: 38, y: 47 }, peakLabel: '' });
+  const points = $derived(buildPoints(ts));
+  const yScale = $derived(buildScale(points, ts));
+  const pathD = $derived(buildPath(points, yScale));
+
+  type Pt = { x: number; y: number };
+
+  function buildPoints(t: { hours: number; peak: { x: number; y: number } }): Pt[] {
+    const out: Pt[] = [];
+    for (let i = 0; i <= t.hours; i++) {
+      const harmonic = 6 * Math.sin((i / 12.42) * Math.PI * 2);
+      const pulse = 38 * Math.exp(-Math.pow((i - t.peak.x) / 12, 2));
+      out.push({ x: i, y: harmonic + pulse + 4 });
+    }
+    return out;
+  }
+
+  function buildScale(pts: Pt[], t: { hours: number; peak: { x: number; y: number } }) {
+    const maxY = Math.max(...pts.map(p => p.y), t.peak.y);
+    const minY = Math.min(...pts.map(p => p.y), -10);
+    return {
+      sx: (i: number) => PAD + (i / t.hours) * (W - PAD * 2),
+      sy: (v: number) => H - PAD - 14 - ((v - minY) / (maxY - minY)) * (H - PAD * 2 - 14),
+    };
+  }
+
+  function buildPath(pts: Pt[], s: { sx: (i: number) => number; sy: (v: number) => number }): string {
+    return pts.map((p, i) => `${i ? 'L' : 'M'} ${s.sx(p.x)} ${s.sy(p.y)}`).join(' ');
+  }
+</script>
+
+<div class="body body-timeseries">
+  <div class="ts-header">
+    {#if card.headline}
+      <span class="headline" style="color: var(--tier-{card.tier});">{card.headline}</span>
+    {/if}
+    {#if card.subhead}<span class="subhead">{card.subhead}</span>{/if}
+  </div>
+  <svg viewBox="0 0 {W} {H}" width="100%" height={H} aria-hidden="true">
+    <line x1={PAD} y1={yScale.sy(0)} x2={W - PAD} y2={yScale.sy(0)}
+          stroke="#C9C9C5" stroke-width="0.5" stroke-dasharray="2 2" />
+    <path d={pathD} fill="none" stroke="var(--tier-{card.tier})" stroke-width="1.4" />
+    <circle cx={yScale.sx(ts.peak.x)} cy={yScale.sy(ts.peak.y)} r="3" fill="var(--tier-{card.tier})" />
+    <text x={yScale.sx(ts.peak.x)} y={yScale.sy(ts.peak.y) - 6}
+          font-size="9" font-family="IBM Plex Mono"
+          text-anchor="middle" fill="var(--tier-{card.tier})">{ts.peakLabel}</text>
+    <text x={PAD} y={H - 2} font-size="8" font-family="IBM Plex Mono" fill="#6B6B6B">now</text>
+    <text x={W - PAD} y={H - 2} font-size="8" font-family="IBM Plex Mono"
+          text-anchor="end" fill="#6B6B6B">+{ts.hours}h</text>
+  </svg>
+  {#if card.spatialNote || card.sub}
+    <div class="body-sub">
+      {#if card.spatialNote}<span class="spatial-note">{card.spatialNote}</span>{/if}
+      {#if card.sub}<span>{card.sub}</span>{/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .body-timeseries {
+    padding: var(--s-3) var(--s-4) var(--s-3);
+    display: flex;
+    flex-direction: column;
+    gap: var(--s-2);
+  }
+  :global(.fc.is-compact) .body-timeseries { padding: var(--s-2) var(--s-3); }
+  .ts-header {
+    display: flex;
+    align-items: baseline;
+    flex-wrap: wrap;
+    gap: var(--s-2);
+  }
+  .headline {
+    font-family: var(--font-serif);
+    font-style: italic;
+    font-size: 22px;
+    font-weight: 500;
+    line-height: 1.1;
+  }
+  .subhead {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    letter-spacing: 0.04em;
+  }
+  svg { display: block; }
+  .body-sub {
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--ink-tertiary);
+    line-height: 1.5;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .spatial-note {
+    color: var(--accent);
+    font-style: italic;
+  }
+</style>

web/sveltekit/src/lib/data/findingsSample.ts

@@ -0,0 +1,235 @@
+/**
+ * Findings v0.4.4 sample data — Red Hook query.
+ *
+ * Mirrors the CARDS / CARDS_BY_QUERY tables in
+ * docs/design_handoff/design_files/findings.jsx so the SvelteKit Findings
+ * region can be rendered without a live FSM. Use as fixture for
+ * `routes/q/sample/+page.svelte` and Playwright snapshots.
+ *
+ * Stone-trace member ids match the FSM step names where possible so the
+ * adapter can replace this with live data without changing card copy.
+ */
+import type { FindingsData } from '$lib/types/card';
+
+export const SAMPLE_FINDINGS: FindingsData = {
+  wallSeconds: 14.0,
+  cacheHit: 0.92,
+  cards: [
+    /* ── Cornerstone ── */
+    {
+      id: 'fc-fema',
+      stone: 'cornerstone', tier: 'modeled', variant: 'headline',
+      source: 'FEMA', agency: 'Federal Emergency Management Agency',
+      vintage: '2024-09',
+      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', citeId: 'c4',
+      mapLayer: 'fema-ae',
+    },
+    {
+      id: 'fc-hwm',
+      stone: 'cornerstone', tier: 'empirical', variant: 'tabular',
+      source: 'USGS', agency: 'U.S. Geological Survey',
+      vintage: '2013-05',
+      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', citeId: 'c1',
+      mapLayer: 'hwm',
+    },
+    {
+      id: 'fc-stormwater',
+      stone: 'cornerstone', tier: 'modeled', variant: 'raster',
+      source: 'NYC DEP', agency: 'NYC Dept. of Environmental Protection',
+      vintage: '2024-06',
+      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', citeId: 'c5',
+      mapLayer: 'stormwater',
+    },
+
+    /* ── Keystone ── */
+    {
+      id: 'fc-register-rh',
+      stone: 'keystone', tier: 'empirical', variant: 'register',
+      source: 'NYC OpenData', agency: 'NYC OpenData · multi-agency join',
+      vintage: '2026-05',
+      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', citeId: 'c-reg-rh',
+      mapLayer: 'registers',
+    },
+
+    /* ── Touchstone ── */
+    {
+      id: 'fc-floodnet',
+      stone: 'touchstone', tier: 'empirical', variant: 'spark',
+      source: 'FloodNet', agency: 'FloodNet NYC sensor network',
+      vintage: '2026-04',
+      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', citeId: 'c3',
+      mapLayer: 'floodnet',
+    },
+    {
+      id: 'fc-311',
+      stone: 'touchstone', tier: 'proxy', variant: 'histogram',
+      source: 'NYC 311', agency: 'NYC 311 service requests',
+      vintage: '2025-12',
+      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', citeId: 'c7',
+      mapLayer: 'complaints',
+    },
+    {
+      id: 'fc-prithvi',
+      stone: 'touchstone', tier: 'modeled', variant: 'raster-pred',
+      source: 'Prithvi-NYC', agency: 'Prithvi-NYC-Pluvial v2 · IBM/NASA × Riprap',
+      vintage: '2026-05-02',
+      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', citeId: 'c-prithvi',
+      illustrative: true,
+      mapLayer: 'prithvi',
+    },
+    {
+      id: 'fc-nws',
+      stone: 'touchstone', tier: 'empirical', variant: 'scalars',
+      source: 'NWS KNYC', agency: 'NOAA · National Weather Service',
+      vintage: '2026-05-05',
+      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', citeId: 'c-nws',
+      mapLayer: 'nws',
+    },
+
+    /* ── Lodestone ── */
+    {
+      id: 'fc-ttm-surge',
+      stone: 'lodestone', tier: 'modeled', variant: 'timeseries',
+      source: 'Granite TTM r2', agency: 'IBM Granite-TimeSeries · Riprap fine-tune',
+      vintage: '2026-05-05 12:00 ET',
+      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.',
+      spatialNote: 'regional · The Battery, not point-of-query',
+      docId: 'ttm_battery_surge_v2', citeId: 'c-ttm',
+      mapLayer: null,
+    },
+    {
+      id: 'fc-npcc4',
+      stone: 'lodestone', tier: 'modeled', variant: 'forecast',
+      source: 'NPCC4', agency: 'NYC Panel on Climate Change, 4th Assessment',
+      vintage: '2024-03',
+      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', citeId: 'c6',
+      mapLayer: null,
+    },
+
+    /* ── Capstone ── */
+    {
+      id: 'fc-mellea-meta',
+      stone: 'capstone', tier: 'modeled', variant: 'meta',
+      source: 'Mellea', agency: 'Capstone synthesis · grounding check',
+      vintage: '2026-05-05 14:22 ET',
+      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', citeId: null,
+      mapLayer: null,
+    },
+  ],
+
+  stones: [
+    {
+      key: 'cornerstone',
+      members: [
+        { id: 'CORN-001', name: 'pull FEMA NFHL panel 36047C0207G', status: 'ok',     tier: 'modeled',   ms: 412 },
+        { id: 'CORN-002', name: 'parse panel index for AE / VE bands', status: 'ok',  tier: 'modeled',   ms: 88 },
+        { id: 'CORN-003', name: 'USGS STN: post-Sandy HWM survey within 500 ft', status: 'ok', tier: 'empirical', ms: 612 },
+        { id: 'CORN-004', name: 'NYC DEP stormwater flood map 2024', status: 'ok',    tier: 'modeled',   ms: 980 },
+        { id: 'CORN-005', name: 'microtopo: 3DEP DEM + HAND + TWI', status: 'ok',     tier: 'proxy',     ms: 1240 },
+      ],
+    },
+    {
+      key: 'keystone',
+      members: [
+        { id: 'KEY-001', name: 'MTA subway entrance proximity', status: 'ok',         tier: 'empirical', ms: 220 },
+        { id: 'KEY-002', name: 'NYCHA developments in 1 mi',   status: 'ok',         tier: 'empirical', ms: 410 },
+        { id: 'KEY-003', name: 'DOE schools in 1 mi',           status: 'ok',         tier: 'empirical', ms: 360 },
+        { id: 'KEY-004', name: 'NYS DOH hospitals in 1 mi',    status: 'silent', tier: 'empirical', ms: 95, note: 'no acute-care within 1 mi' },
+        { id: 'KEY-005', name: 'PLUTO BBL fetch',               status: 'ok',         tier: 'empirical', ms: 130 },
+      ],
+    },
+    {
+      key: 'touchstone',
+      members: [
+        { id: 'TCH-001', name: 'FloodNet sensor lookup',        status: 'ok',         tier: 'empirical', ms: 285 },
+        { id: 'TCH-002', name: 'NYC 311 flood complaints',      status: 'ok',         tier: 'proxy',     ms: 410 },
+        { id: 'TCH-003', name: 'NWS station KNYC observation',  status: 'ok',         tier: 'empirical', ms: 240 },
+        { id: 'TCH-004', name: 'NOAA tide gauge water level',   status: 'ok',         tier: 'empirical', ms: 196 },
+        { id: 'TCH-005', name: 'Prithvi-EO 2.0 NYC-Pluvial v2', status: 'ok',         tier: 'modeled',   ms: 4920 },
+      ],
+    },
+    {
+      key: 'lodestone',
+      members: [
+        { id: 'LOD-001', name: 'Granite TTM r2 surge fine-tune', status: 'ok',         tier: 'modeled',   ms: 1820 },
+        { id: 'LOD-002', name: 'NPCC4 SLR projection table',     status: 'ok',         tier: 'modeled',   ms: 38 },
+        { id: 'LOD-003', name: 'NWS active flood alerts',        status: 'silent', tier: 'modeled',   ms: 110 },
+      ],
+    },
+    {
+      key: 'capstone',
+      members: [
+        { id: 'CAP-001', name: 'Granite Embedding RAG retrieval', status: 'ok',         tier: 'proxy',     ms: 410 },
+        { id: 'CAP-002', name: 'GLiNER typed extraction',         status: 'ok',         tier: 'proxy',     ms: 280 },
+        { id: 'CAP-003', name: 'Granite 4.1 reconcile (Mellea)',  status: 'ok',         tier: 'modeled',   ms: 6240 },
+      ],
+    },
+  ],
+};

web/sveltekit/src/lib/types/card.ts

@@ -0,0 +1,201 @@
+/**
+ * Findings card schema — v0.4.4.
+ *
+ * The Findings region renders a stack of cards grouped by Stone. Each card
+ * is one specialist's structured output, with explicit epistemic tiering
+ * and a citation fan-out that ties back into the briefing prose.
+ *
+ * Schema mirrors `docs/design_handoff/design_files/findings.jsx` exactly.
+ * Body fields are variant-specific — only the fields a given variant
+ * needs are populated. The renderer dispatches on `variant`.
+ */
+import type { Tier } from './tier';
+
+/** Stone keys, fixed order. Mirrors `app/stones/__init__.py`. */
+export type StoneKey =
+  | 'cornerstone'
+  | 'keystone'
+  | 'touchstone'
+  | 'lodestone'
+  | 'capstone';
+
+export const STONE_ORDER: StoneKey[] = [
+  'cornerstone', 'keystone', 'touchstone', 'lodestone', 'capstone',
+];
+
+export type StoneMeta = { name: string; role: string; tag: string };
+
+export const STONE_META: Record<StoneKey, StoneMeta> = {
+  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' },
+};
+
+/** 12 card body variants — one renderer per shape. */
+export type CardVariant =
+  | 'headline'
+  | 'tabular'
+  | 'scalars'
+  | 'spark'
+  | 'histogram'
+  | 'timeseries'
+  | 'forecast'
+  | 'raster'
+  | 'raster-pred'
+  | 'register'
+  | 'comparison'
+  | 'meta';
+
+export type Citation = { id: string; label: string; href?: string };
+
+export type RegisterRow = {
+  reg: string;        // "MTA" | "NYCHA" | "DOE" | "DOH" | "PLUTO" | ...
+  tier: Tier;
+  /** When `label` is null the row renders as a silent — register fired but
+      had no hits. The note carries the silent reason. */
+  label: string | null;
+  detail: string | null;
+  sourceId: string | null;
+  vintage?: string | null;
+  note?: string | null;
+};
+
+export type ScalarCell = { value: string; label: string; unit?: string };
+
+export type ForecastBand = {
+  year: number;
+  low: number;
+  mid: number;
+  high: number;
+};
+
+export type ComparisonSide = {
+  tier: Tier;
+  label: string;
+  value: string;
+  aux?: string;
+};
+
+export type MetaRow = { k: string; v: string };
+
+export type RasterKind =
+  | 'stormwater'
+  | 'stormwater-dry'
+  | 'fema-ae'
+  | 'hwm'
+  | 'prithvi'
+  | 'lulc'
+  | 'buildings'
+  | 'floodnet-density';
+
+/** A single Findings card. Most fields are variant-specific. */
+export type Card = {
+  /** Stable id used as Svelte key + linkedKey target. */
+  id: string;
+  stone: StoneKey;
+  tier: Tier;
+  variant: CardVariant;
+
+  /** Header chrome — always shown. */
+  source: string;       // short label, e.g. "FEMA"
+  agency: string;       // long form, e.g. "Federal Emergency Management Agency"
+  vintage: string;      // e.g. "2024-09" or "2024-Q3"
+
+  /** Title row. */
+  title: string;
+
+  /** Footer chrome — always shown. */
+  docId: string;
+  citeId?: string | null;
+  cites?: Citation[];
+
+  /** Map cross-link key. Hovering this card lights up the matching map
+   *  layer; hovering the layer outlines this card. */
+  mapLayer?: string | null;
+
+  /** Marks the card visually as illustrative (dashed top-rule on synthetic
+   *  / preview cards). Always implied true for tier=synthetic. */
+  illustrative?: boolean;
+
+  /** Optional spatial-index callout (e.g. "regional · The Battery, not
+   *  point-of-query") rendered next to the body sub. */
+  spatialNote?: string;
+
+  /** Variant-specific body fields. Only the relevant ones are populated. */
+  headline?: string;
+  subhead?: string;
+  body?: string;
+  sub?: string;
+  sparkSub?: string;
+
+  // tabular
+  columns?: string[];
+  rows?: (string | number)[][];
+
+  // scalars
+  scalars?: ScalarCell[];
+
+  // spark / histogram
+  spark?: number[];
+  histogram?: number[];
+
+  // timeseries
+  timeseries?: {
+    hours: number;
+    peak: { x: number; y: number };
+    peakLabel: string;
+  };
+
+  // forecast
+  forecast?: ForecastBand[];
+
+  // raster / raster-pred
+  rasterKind?: RasterKind;
+
+  // register
+  registers?: RegisterRow[];
+
+  // comparison (always synthetic-tier)
+  left?: ComparisonSide;
+  right?: ComparisonSide;
+  delta?: string;
+
+  // meta
+  metaRows?: MetaRow[];
+};
+
+/** Per-Stone provenance member (specialist) summary used by the trace. */
+export type StoneMember = {
+  id: string;
+  name: string;
+  status: 'ok' | 'warn' | 'error' | 'silent';
+  tier?: Tier | null;
+  ms?: number;
+  note?: string;
+  children?: StoneMember[];
+};
+
+/** A Stone's provenance + counts, fed by the FSM trace. */
+export type StoneTrace = {
+  key: StoneKey;
+  members: StoneMember[];
+};
+
+/** What the page loader hands the FindingsRegion. */
+export type FindingsData = {
+  cards: Card[];
+  stones: StoneTrace[];
+  /** Wall-clock seconds for the run; surfaced in RunHealthStrip. */
+  wallSeconds?: number;
+  /** Optional cache-hit ratio, dev-mode surfaced. */
+  cacheHit?: number;
+};
+
+/** Density toggle — affects card padding + register row height. */
+export type Density = 'comfortable' | 'compact';
+
+/** Provenance-trace expansion mode. Smart = collapsed if all-ok, expanded
+ *  if any specialist warned / errored / went silent. */
+export type ProvenanceMode = 'smart' | 'all-expanded' | 'all-collapsed';