FastAPI primary UI + NYCO design system vendor drop

web/main.py wires the address-mode endpoint at /, dispatches to the
Burr FSM, and returns the reconciled paragraph + per-step trace as
JSON for the front-end to render. /compare and /register/{class}
routes are stubbed for the next slot.

The static UI follows NYC Planning Labs' civic-assessment idiom
(ZoLa, Capital Planning Explorer): clean two-column layout, IBM
Plex Sans throughout, MapLibre for the map, vanilla JS event flow
with no framework. NYCO design-system CSS + fonts ship as a vendor
drop so the build stays Node-free.

web/main.py

@@ -0,0 +1,254 @@
+"""HeliOS-NYC web UI — FastAPI + SSE streaming of the Burr FSM trace.
+
+Run: uvicorn web.main:app --reload --port 8000
+"""
+from __future__ import annotations
+
+import json
+import warnings
+from pathlib import Path
+
+warnings.filterwarnings("ignore")
+
+from fastapi import FastAPI, Request  # noqa: E402
+from fastapi.responses import FileResponse, StreamingResponse  # noqa: E402
+from fastapi.staticfiles import StaticFiles  # noqa: E402
+
+from app.context import floodnet  # noqa: E402
+from app.flood_layers import dep_stormwater, sandy_inundation  # noqa: E402
+from app.fsm import iter_steps  # noqa: E402
+
+ROOT = Path(__file__).resolve().parent
+STATIC = ROOT / "static"
+
+app = FastAPI(title="Riprap")
+app.mount("/static", StaticFiles(directory=STATIC), name="static")
+
+import json as _json  # noqa: E402
+
+import geopandas as _gpd  # noqa: E402
+from fastapi.responses import JSONResponse, Response  # noqa: E402
+
+_LAYER_CACHE: dict = {}
+
+
+def _clip_simplify(gdf, lat: float, lon: float, radius_m: float = 1500,
+                   simplify_ft: float = 8, props_keep=None):
+    """Clip a NYC-wide layer to a small bbox around a point and simplify.
+
+    Uses shapely's clip_by_rect (much faster than gpd.overlay on dense
+    polygons) and a pre-bbox-filter via .cx so we never touch geometries
+    outside the AOI.
+    """
+    import shapely.geometry as sg
+
+    pt = _gpd.GeoSeries([sg.Point(lon, lat)], crs="EPSG:4326").to_crs("EPSG:2263")[0]
+    half = radius_m * 3.281
+    minx, miny, maxx, maxy = pt.x - half, pt.y - half, pt.x + half, pt.y + half
+
+    sub = gdf.cx[minx:maxx, miny:maxy]
+    if sub.empty:
+        return {"type": "FeatureCollection", "features": []}
+
+    clipped = sub.copy()
+    clipped["geometry"] = sub.geometry.clip_by_rect(minx, miny, maxx, maxy)
+    clipped = clipped[~clipped.geometry.is_empty & clipped.geometry.notna()]
+    if clipped.empty:
+        return {"type": "FeatureCollection", "features": []}
+
+    clipped["geometry"] = clipped.geometry.simplify(simplify_ft, preserve_topology=True)
+    g = clipped.to_crs("EPSG:4326")
+    if props_keep is not None:
+        g = g[[c for c in g.columns if c in props_keep or c == "geometry"]]
+    else:
+        g = g[["geometry"]]
+    return _json.loads(g.to_json())
+
+
+@app.on_event("startup")
+def _warm_caches():
+    """Prime slow loads so the first user query doesn't pay the cold-cost penalty."""
+    print("[startup] warming flood layers...", flush=True)
+    sandy_inundation.load()
+    for scen in ["dep_extreme_2080", "dep_moderate_2050", "dep_moderate_current"]:
+        dep_stormwater.load(scen)
+    print("[startup] flood layers ready", flush=True)
+    print("[startup] warming RAG (Granite Embedding 278M + 5 PDFs)...", flush=True)
+    from app import rag
+    rag.warm()
+    print("[startup] RAG ready", flush=True)
+
+
+@app.get("/")
+def index():
+    return FileResponse(STATIC / "index.html")
+
+
+@app.get("/compare")
+def compare_page():
+    return FileResponse(STATIC / "compare.html")
+
+
+@app.get("/register/{asset_class}")
+def register_page(asset_class: str):
+    if asset_class not in ("schools", "nycha", "mta_entrances"):
+        return JSONResponse({"error": f"unknown asset class {asset_class!r}"}, status_code=404)
+    return FileResponse(STATIC / "register.html")
+
+
+@app.get("/api/register/{asset_class}")
+def api_register(asset_class: str):
+    """Return a pre-computed asset-class register."""
+    if asset_class not in ("schools", "nycha", "mta_entrances"):
+        return JSONResponse({"error": f"unknown asset class {asset_class!r}"},
+                            status_code=404)
+    f = ROOT.parent / "data" / "registers" / f"{asset_class}.json"
+    if not f.exists():
+        script = f"scripts/build_{asset_class}_register.py"
+        return JSONResponse(
+            {"error": f"register not built — run python {script}",
+             "rows": []},
+            status_code=503,
+        )
+    return JSONResponse(_json.loads(f.read_text()),
+                        headers={"Cache-Control": "public, max-age=300"})
+
+
+@app.get("/api/compare")
+async def compare_stream(a: str, b: str, request: Request):
+    """Two parallel FSM runs, results returned as a single SSE stream.
+    Each event is tagged with side="a" or side="b" so the client can
+    route updates to the correct panel."""
+    import asyncio
+    import queue
+    from app.fsm import iter_steps
+
+    def gen_for_side(side: str, q_text: str, out_q):
+        try:
+            for ev in iter_steps(q_text):
+                ev["side"] = side
+                out_q.put(ev)
+        except Exception as e:
+            out_q.put({"side": side, "kind": "error", "err": str(e)})
+        out_q.put({"side": side, "kind": "_done"})
+
+    out_q: "queue.Queue[dict]" = queue.Queue()
+
+    def kick():
+        # run both sides in parallel threads — each Burr Application owns
+        # its own state so this is safe, and Ollama with NUM_PARALLEL=2
+        # serves both reconcile calls concurrently.
+        loop = asyncio.get_event_loop()
+        loop.run_in_executor(None, gen_for_side, "a", a, out_q)
+        loop.run_in_executor(None, gen_for_side, "b", b, out_q)
+
+    async def event_stream():
+        kick()
+        yield f"event: hello\ndata: {json.dumps({'a': a, 'b': b})}\n\n"
+        done = 0
+        while done < 2:
+            try:
+                ev = await asyncio.to_thread(out_q.get, True, 1.0)
+            except Exception:
+                continue
+            if ev.get("kind") == "_done":
+                done += 1
+                continue
+            if ev.get("kind") == "step":
+                yield f"event: step\ndata: {json.dumps(ev, default=str)}\n\n"
+            elif ev.get("kind") == "final":
+                yield f"event: final\ndata: {json.dumps(ev, default=str)}\n\n"
+            elif ev.get("kind") == "error":
+                yield f"event: error\ndata: {json.dumps(ev)}\n\n"
+        yield "event: done\ndata: {}\n\n"
+
+    return StreamingResponse(event_stream(), media_type="text/event-stream",
+                             headers={"Cache-Control": "no-cache",
+                                      "X-Accel-Buffering": "no"})
+
+
+@app.get("/api/stream")
+async def stream(q: str, request: Request):
+    """Server-sent-events stream: each FSM action yields one event."""
+    def gen():
+        try:
+            yield f"event: hello\ndata: {json.dumps({'query': q})}\n\n"
+            for ev in iter_steps(q):
+                if ev["kind"] == "step":
+                    yield f"event: step\ndata: {json.dumps(ev, default=str)}\n\n"
+                else:
+                    yield f"event: final\ndata: {json.dumps(ev, default=str)}\n\n"
+            yield "event: done\ndata: {}\n\n"
+        except Exception as e:
+            yield f"event: error\ndata: {json.dumps({'err': str(e)})}\n\n"
+
+    return StreamingResponse(gen(), media_type="text/event-stream",
+                             headers={"Cache-Control": "no-cache",
+                                      "X-Accel-Buffering": "no"})
+
+
+@app.get("/api/layers/sandy")
+def layer_sandy(lat: float, lon: float, r: float = 1500):
+    key = ("sandy", round(lat, 4), round(lon, 4), int(r))
+    if key not in _LAYER_CACHE:
+        _LAYER_CACHE[key] = _clip_simplify(sandy_inundation.load(), lat, lon, r)
+    return JSONResponse(_LAYER_CACHE[key],
+                        headers={"Cache-Control": "public, max-age=3600"})
+
+
+@app.get("/api/layers/dep_extreme_2080")
+def layer_dep_2080(lat: float, lon: float, r: float = 1500):
+    key = ("dep2080", round(lat, 4), round(lon, 4), int(r))
+    if key not in _LAYER_CACHE:
+        _LAYER_CACHE[key] = _clip_simplify(
+            dep_stormwater.load("dep_extreme_2080"),
+            lat, lon, r, props_keep={"Flooding_Category"})
+    return JSONResponse(_LAYER_CACHE[key],
+                        headers={"Cache-Control": "public, max-age=3600"})
+
+
+@app.get("/api/layers/prithvi_water")
+def layer_prithvi_water(lat: float, lon: float, r: float = 1500):
+    """Prithvi-EO 2.0 (Sen1Floods11) satellite water mask, clipped to a
+    bbox around the address for performance."""
+    key = ("prithvi", round(lat, 4), round(lon, 4), int(r))
+    if key not in _LAYER_CACHE:
+        from app.flood_layers import prithvi_water as pw
+        gdf, _meta = pw._load()
+        if gdf is None:
+            return JSONResponse({"type": "FeatureCollection", "features": []})
+        _LAYER_CACHE[key] = _clip_simplify(gdf, lat, lon, r,
+                                            props_keep=set(),
+                                            simplify_ft=4)
+    return JSONResponse(_LAYER_CACHE[key],
+                        headers={"Cache-Control": "public, max-age=3600"})
+
+
+@app.get("/api/floodnet_near")
+def floodnet_near(lat: float, lon: float, r: float = 1000):
+    sensors = floodnet.sensors_near(lat, lon, r)
+    ids = [s.deployment_id for s in sensors]
+    events = floodnet.flood_events_for(ids)
+    by_dep: dict = {}
+    for e in events:
+        by_dep.setdefault(e.deployment_id, []).append(e)
+
+    features = []
+    for s in sensors:
+        if s.lat is None or s.lon is None:
+            continue
+        evs = by_dep.get(s.deployment_id, [])
+        peak = max((e.max_depth_mm or 0 for e in evs), default=0)
+        features.append({
+            "type": "Feature",
+            "geometry": {"type": "Point", "coordinates": [s.lon, s.lat]},
+            "properties": {
+                "deployment_id": s.deployment_id,
+                "name": s.name,
+                "street": s.street,
+                "borough": s.borough,
+                "n_events_3y": len(evs),
+                "peak_depth_mm": peak,
+            },
+        })
+    return JSONResponse({"type": "FeatureCollection", "features": features})

web/static/app.js

@@ -0,0 +1,682 @@
+// HeliOS-NYC web client. Subscribes to SSE, lights up FSM steps.
+
+const STEP_LABELS = {
+  geocode:                ["Geocode (DCP Geosearch)",          "address → lat/lon, BBL"],
+  sandy_inundation:       ["Sandy Inundation (NYC OD)",        "empirical 2012 extent"],
+  dep_stormwater:         ["DEP Stormwater Maps",              "pluvial scenarios + 2080 SLR"],
+  floodnet:               ["FloodNet sensor network",          "live ultrasonic depth sensors"],
+  nyc311:                 ["NYC 311 archive",                  "flood complaints in buffer"],
+  microtopo_lidar:        ["LiDAR terrain (DEM + TWI + HAND)", "USGS 3DEP DEM + whitebox-workflows hydrology"],
+  ida_hwm_2021:           ["Ida 2021 high-water marks",        "USGS empirical post-event extent"],
+  prithvi_eo_v2:          ["Prithvi-EO 2.0 (300M, NASA/IBM)",  "Sen1Floods11 satellite water segmentation"],
+  rag_granite_embedding:  ["Granite Embedding 278M (RAG)",     "policy corpus retrieval"],
+  reconcile_granite41:    ["Granite 4.1 reconcile (local)",    "document-grounded synthesis"],
+};
+
+const STEPS_ORDER = [
+  "geocode", "sandy_inundation", "dep_stormwater", "floodnet", "nyc311",
+  "microtopo_lidar", "ida_hwm_2021", "prithvi_eo_v2",
+  "rag_granite_embedding", "reconcile_granite41",
+];
+
+const $ = (s) => document.querySelector(s);
+
+let evtSrc = null;
+let map = null;
+let mapInit = false;
+
+const MAP_STYLE = {
+  version: 8,
+  sources: {
+    carto: {
+      type: "raster",
+      tiles: ["https://a.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"],
+      tileSize: 256,
+      attribution: "© OpenStreetMap contributors © CARTO",
+    },
+  },
+  layers: [
+    { id: "bg", type: "background", paint: { "background-color": "#fafbfd" } },
+    { id: "carto", type: "raster", source: "carto" },
+  ],
+};
+
+function ensureMap() {
+  if (mapInit) return;
+  mapInit = true;
+  map = new maplibregl.Map({
+    container: "map",
+    style: MAP_STYLE,
+    center: [-74.0, 40.72],
+    zoom: 10,
+    attributionControl: { compact: true },
+  });
+  map.addControl(new maplibregl.NavigationControl({ visualizePitch: false }), "top-right");
+
+  map.on("load", async () => {
+    // Sandy + DEP layers — empty until first query (we clip per-address)
+    map.addSource("sandy", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+    map.addLayer({
+      id: "sandy-fill", type: "fill", source: "sandy",
+      paint: { "fill-color": "#fc5d52", "fill-opacity": 0.28 },
+    });
+    map.addLayer({
+      id: "sandy-line", type: "line", source: "sandy",
+      paint: { "line-color": "#fc5d52", "line-width": 0.6, "line-opacity": 0.6 },
+    });
+
+    map.addSource("dep", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+    map.addLayer({
+      id: "dep-fill", type: "fill", source: "dep",
+      paint: {
+        "fill-color": [
+          "match", ["get", "Flooding_Category"],
+          1, "#568adf", 2, "#1642DF", 3, "#031553", "#568adf",
+        ],
+        "fill-opacity": 0.32,
+      },
+    });
+
+    // Prithvi-EO 2.0 satellite water polygons. Visually distinct from the
+    // modeled DEP/Sandy layers — teal outline + low fill says "what the
+    // satellite saw" not "what FEMA/DEP modeled".
+    map.addSource("prithvi", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+    map.addLayer({
+      id: "prithvi-fill", type: "fill", source: "prithvi",
+      paint: { "fill-color": "#0d9488", "fill-opacity": 0.18 },
+    });
+    map.addLayer({
+      id: "prithvi-line", type: "line", source: "prithvi",
+      paint: { "line-color": "#0d9488", "line-width": 1.2, "line-opacity": 0.85 },
+    });
+
+    // empty floodnet + addr sources, populated per query
+    map.addSource("floodnet", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+    map.addLayer({
+      id: "floodnet-circles", type: "circle", source: "floodnet",
+      paint: {
+        "circle-radius": 6,
+        "circle-color": ["case", [">", ["get", "n_events_3y"], 0], "#fc5d52", "#1a8754"],
+        "circle-stroke-color": "#ffffff",
+        "circle-stroke-width": 1.8,
+      },
+    });
+    map.on("click", "floodnet-circles", (e) => {
+      const f = e.features[0];
+      const p = f.properties;
+      new maplibregl.Popup()
+        .setLngLat(f.geometry.coordinates)
+        .setHTML(`<b>${p.name}</b><br>${p.street}<br>events 3y: ${p.n_events_3y}<br>peak: ${p.peak_depth_mm} mm`)
+        .addTo(map);
+    });
+
+    map.addSource("addr", { type: "geojson", data: { type: "FeatureCollection", features: [] } });
+    map.addLayer({
+      id: "addr-marker", type: "circle", source: "addr",
+      paint: {
+        "circle-radius": 9,
+        "circle-color": "#1642DF",
+        "circle-stroke-color": "#ffffff",
+        "circle-stroke-width": 2.5,
+      },
+    });
+  });
+}
+
+async function updateMapForResult(geo) {
+  ensureMap();
+  if (!map.loaded()) {
+    await new Promise(res => map.once("load", res));
+  }
+  // address marker
+  map.getSource("addr").setData({
+    type: "FeatureCollection",
+    features: [{
+      type: "Feature",
+      geometry: { type: "Point", coordinates: [geo.lon, geo.lat] },
+      properties: { address: geo.address },
+    }],
+  });
+  // load all per-address layers in parallel
+  const url = (p) => `${p}?lat=${geo.lat}&lon=${geo.lon}&r=1500`;
+  const [sandy, dep, prithvi, fn] = await Promise.all([
+    fetch(url("/api/layers/sandy")).then(r => r.json()).catch(() => null),
+    fetch(url("/api/layers/dep_extreme_2080")).then(r => r.json()).catch(() => null),
+    fetch(url("/api/layers/prithvi_water")).then(r => r.json()).catch(() => null),
+    fetch(`/api/floodnet_near?lat=${geo.lat}&lon=${geo.lon}&r=1000`).then(r => r.json()).catch(() => null),
+  ]);
+  if (sandy)   map.getSource("sandy").setData(sandy);
+  if (dep)     map.getSource("dep").setData(dep);
+  if (prithvi) map.getSource("prithvi").setData(prithvi);
+  if (fn)      map.getSource("floodnet").setData(fn);
+
+  // Hide the Prithvi legend item when no polygons render here. The
+  // model only marks satellite-observed water bodies — for landlocked
+  // addresses there's nothing to draw, and an empty legend entry would
+  // confuse rather than inform.
+  const prithviLegend = document.querySelector(".legend .sw.prithvi");
+  if (prithviLegend) {
+    const hasPrithvi = prithvi && (prithvi.features || []).length > 0;
+    prithviLegend.parentElement.style.display = hasPrithvi ? "" : "none";
+  }
+
+  map.flyTo({ center: [geo.lon, geo.lat], zoom: 14, speed: 1.2 });
+}
+
+function resetUI(query) {
+  $("#trace").classList.remove("hidden");
+  $("#report").classList.add("hidden");
+  $("#meta").classList.add("hidden");
+  $("#paragraph").innerHTML = "";
+  const kf = $("#keyFindings"); if (kf) kf.innerHTML = "";
+  const ec = $("#evidenceCards"); if (ec) ec.innerHTML = "";
+  const pl = $("#policyList"); if (pl) pl.innerHTML = "";
+  const ps = $("#policySection"); if (ps) ps.classList.add("hidden");
+  const s = $("#sources"); if (s) s.innerHTML = "";
+  $("#addr").innerHTML = "";
+  CITE_INDEX = {};
+
+  const ul = $("#steps");
+  ul.innerHTML = "";
+  for (const sid of STEPS_ORDER) {
+    const [lbl, hint] = STEP_LABELS[sid] || [sid, ""];
+    const li = document.createElement("li");
+    li.id = "step-" + sid;
+    li.className = "pending";
+    li.innerHTML = `
+      <span class="icon">○</span>
+      <div>
+        <div class="label">${lbl}</div>
+        <div class="meta">${hint}</div>
+      </div>
+      <span class="meta time"></span>`;
+    ul.appendChild(li);
+  }
+  // mark first one running
+  $("#step-" + STEPS_ORDER[0]).classList.replace("pending", "running");
+}
+
+function markStep(stepId, ev) {
+  const li = document.getElementById("step-" + stepId);
+  if (!li) return;
+  li.className = ev.ok ? "ok" : "err";
+  li.querySelector(".icon").textContent = ev.ok ? "✓" : "✗";
+  if (ev.elapsed_s != null) {
+    li.querySelector(".time").textContent = ev.elapsed_s.toFixed(2) + "s";
+  }
+  if (ev.result) {
+    let div = li.querySelector(".result");
+    if (!div) {
+      div = document.createElement("div");
+      div.className = "result";
+      li.appendChild(div);
+    }
+    div.textContent = formatResult(ev.result);
+  } else if (ev.err) {
+    let div = li.querySelector(".result");
+    if (!div) {
+      div = document.createElement("div");
+      div.className = "result";
+      li.appendChild(div);
+    }
+    div.textContent = "error: " + ev.err;
+  }
+
+  // mark next pending step running
+  const idx = STEPS_ORDER.indexOf(stepId);
+  if (idx >= 0 && idx + 1 < STEPS_ORDER.length) {
+    const next = document.getElementById("step-" + STEPS_ORDER[idx + 1]);
+    if (next && next.classList.contains("pending")) {
+      next.classList.replace("pending", "running");
+    }
+  }
+}
+
+function formatResult(r) {
+  if (typeof r !== "object") return String(r);
+  return Object.entries(r)
+    .map(([k, v]) => `${k}: ${typeof v === "object" ? JSON.stringify(v) : v}`)
+    .join(" · ");
+}
+
+// Map doc_id -> footnote number for the current report; built fresh each query
+let CITE_INDEX = {};
+
+function rewriteCitations(text) {
+  // Replace [doc_id] with <span class="cite" title="...">N</span> using the
+  // CITE_INDEX. doc_ids not in the index get their first appearance assigned.
+  return text.replace(/\[([a-z0-9_]+)\]/gi, (_, d) => {
+    const norm = d.toLowerCase();
+    if (CITE_INDEX[norm] == null) {
+      CITE_INDEX[norm] = Object.keys(CITE_INDEX).length + 1;
+    }
+    const n = CITE_INDEX[norm];
+    return `<span class="cite" title="source ${n} — ${SOURCE_LABELS[norm] || norm}">${n}</span>`;
+  });
+}
+
+function renderParagraph(text) {
+  $("#paragraph").innerHTML = rewriteCitations(text);
+}
+
+const SOURCE_LABELS = {
+  geocode:                "NYC DCP Geosearch",
+  sandy:                  "NYC OpenData 5xsi-dfpx — Sandy 2012 inundation",
+  dep_extreme_2080:       "NYC DEP Stormwater — Extreme 3.66 in/hr + 2080 SLR",
+  dep_moderate_2050:      "NYC DEP Stormwater — Moderate 2.13 in/hr + 2050 SLR",
+  dep_moderate_current:   "NYC DEP Stormwater — Moderate 2.13 in/hr current",
+  floodnet:               "FloodNet NYC — live ultrasonic sensor network",
+  nyc311:                 "NYC 311 (Socrata erm2-nwe9) — flood descriptors",
+  microtopo:              "USGS 3DEP 30 m DEM via py3dep",
+  ida_hwm:                "USGS STN — Hurricane Ida 2021 HWMs (Event 312, NY)",
+  prithvi_water:          "Prithvi-EO 2.0 (300M, NASA/IBM) — Hurricane Ida 2021 pre/post HLS diff (Aug 25 vs Sep 2)",
+  rag_dep_2013:           "NYC DEP Wastewater Resiliency Plan (2013)",
+  rag_nycha:              "NYCHA — Flood Resilience: Lessons Learned",
+  rag_coned:              "Con Edison Climate Change Resilience Plan (Case 22-E-0222)",
+  rag_mta:                "MTA Climate Resilience Roadmap (Oct 2025)",
+  rag_comptroller:        "NYC Comptroller — \"Is NYC Ready for Rain?\" (2024)",
+};
+
+// ----------------------------------------------------------------------
+// CIVIC ASSESSMENT REPORT — header strip, tier badge, key findings,
+// evidence cards, policy quotes, methodology footer.
+// ----------------------------------------------------------------------
+
+function tierMeta(score) {
+  // Mirror app/score.py rubric: ≥6 = T1, 4-5 = T2, 2-3 = T3, 1 = T4, 0 = T0.
+  if (score >= 6)  return {tier: 1, label: "High exposure",       help: "Multiple positive flood signals — historical inundation and modeled scenarios both indicate substantial risk."};
+  if (score >= 4)  return {tier: 2, label: "Elevated exposure",   help: "Significant overlap with at least one empirical or modeled scenario."};
+  if (score >= 2)  return {tier: 3, label: "Moderate exposure",   help: "One or two positive signals; localised or scenario-specific risk."};
+  if (score >= 1)  return {tier: 4, label: "Limited exposure",    help: "A single contextual signal; no positive scenario hits."};
+  return            {tier: 0, label: "No flagged exposure",        help: "No positive flood signal across the assessed sources."};
+}
+
+function computeScore(ev) {
+  // Mirror server-side rubric so we render consistently.
+  let s = 0;
+  if (ev.sandy) s += 3;
+  const dep = ev.dep || {};
+  if ((dep.dep_extreme_2080?.depth_class || 0) > 0) s += 2;
+  if ((dep.dep_moderate_2050?.depth_class || 0) > 0) s += 2;
+  if ((dep.dep_moderate_current?.depth_class || 0) > 0) s += 1;
+  if ((ev.nyc311?.n || 0) >= 3) s += 1;
+  if ((ev.floodnet?.n_flood_events_3y || 0) > 0) s += 1;
+  if ((ev.rag || []).length) s += 1;
+  return s;
+}
+
+function renderHeader(ev) {
+  const geo = ev.geocode || {};
+  $("#reportAddr").textContent = geo.address || "(unresolved)";
+  $("#reportBoro").textContent = geo.borough || "—";
+  $("#reportBbl").textContent  = geo.bbl || "—";
+  $("#reportTs").textContent   = new Date().toISOString().slice(0,10);
+}
+
+function renderTier(ev) {
+  const score = computeScore(ev);
+  const m = tierMeta(score);
+  const badge = $("#tierBadge");
+  badge.className = "tier-badge t-" + m.tier;
+  $("#tierNum").textContent = m.tier;
+  $("#tierLabel").textContent = `Tier ${m.tier} — ${m.label}`;
+  $("#tierHelp").textContent  = m.help;
+}
+
+function renderKeyFindings(ev) {
+  const dl = $("#keyFindings");
+  dl.innerHTML = "";
+  const rows = [];
+
+  rows.push(["Sandy 2012 zone",
+    ev.sandy ? "INSIDE" : "outside",
+    ev.sandy ? "hit" : "miss"]);
+
+  const dep = ev.dep || {};
+  const dHit = Object.entries(dep).find(([_, v]) => (v.depth_class || 0) > 0);
+  if (dHit) {
+    const [scen, v] = dHit;
+    const lbl = scen.replace("dep_", "").replace(/_/g, " ").toUpperCase();
+    rows.push(["DEP scenario", `${lbl} — ${v.depth_label}`, "hit"]);
+  } else {
+    rows.push(["DEP scenarios", "outside all 3", "miss"]);
+  }
+
+  const mt = ev.microtopo;
+  if (mt) {
+    rows.push(["Elevation",
+      `${mt.point_elev_m} m above sea level`, ""]);
+    if (mt.hand_m != null) {
+      rows.push(["Height Above Drainage", `${mt.hand_m} m  (HAND)`, ""]);
+    }
+    if (mt.twi != null) {
+      rows.push(["Topographic Wetness Index",
+        `${mt.twi}  (${mt.twi >= 14 ? "very high" : mt.twi >= 10 ? "high" : mt.twi >= 6 ? "moderate" : "low"})`, ""]);
+    }
+  }
+
+  const fn = ev.floodnet;
+  if (fn && fn.n_sensors > 0) {
+    rows.push(["FloodNet (3 yr)",
+      `${fn.n_flood_events_3y} events across ${fn.n_sensors} sensors`,
+      fn.n_flood_events_3y > 0 ? "hit" : ""]);
+  }
+
+  const ida = ev.ida_hwm;
+  if (ida && ida.n_within_radius > 0) {
+    const ht = ida.max_height_above_gnd_ft != null
+      ? `, max ${ida.max_height_above_gnd_ft} ft above ground` : "";
+    rows.push(["Hurricane Ida 2021 HWMs",
+      `${ida.n_within_radius} within ${ida.radius_m} m${ht}`, "hit"]);
+  }
+
+  const pw = ev.prithvi_water;
+  if (pw && pw.nearest_distance_m != null) {
+    rows.push(["Prithvi-EO Ida 2021",
+      pw.inside_water_polygon
+        ? "INSIDE inundation polygon"
+        : `${pw.nearest_distance_m} m to nearest inundation polygon`,
+      pw.inside_water_polygon ? "hit" : ""]);
+  }
+
+  const c311 = ev.nyc311;
+  if (c311 && c311.n > 0) {
+    rows.push(["311 flood complaints",
+      `${c311.n} within ${c311.radius_m} m, last ${c311.years} yr`,
+      c311.n >= 5 ? "hit" : ""]);
+  }
+
+  dl.innerHTML = rows.map(([k, v, cls]) =>
+    `<dt>${k}</dt><dd${cls ? ` class="${cls}"` : ""}>${v}</dd>`
+  ).join("");
+}
+
+function evCard({key, title, flag, rows, sourceText, sourceUrl, vintage, collapsed}) {
+  // flag: "hit" | "note" | "miss"
+  const inner = rows.map(([k, v]) =>
+    `<dt>${k}</dt><dd>${v}</dd>`).join("");
+  const foot = sourceUrl
+    ? `<a href="${sourceUrl}" target="_blank">${sourceText}</a>${vintage ? " · " + vintage : ""}`
+    : `${sourceText}${vintage ? " · " + vintage : ""}`;
+  const cls = "ec" + (collapsed ? " collapsed" : "");
+  return `<div class="${cls}" data-key="${key}">
+    <div class="ec-head" onclick="this.parentElement.classList.toggle('collapsed')">
+      <div class="ec-title"><span class="ec-flag ${flag}"></span>${title}</div>
+      <div class="ec-toggle">▾</div>
+    </div>
+    <div class="ec-body"><dl>${inner}</dl></div>
+    <div class="ec-foot">${foot}</div>
+  </div>`;
+}
+
+function renderEvidence(ev) {
+  const cards = [];
+
+  if (ev.sandy != null) {
+    cards.push(evCard({
+      key: "sandy", title: "Sandy 2012 inundation",
+      flag: ev.sandy ? "hit" : "miss",
+      rows: [
+        ["Inside extent", ev.sandy ? "yes" : "no"],
+        ["Reference event", "Hurricane Sandy, 29-30 Oct 2012"],
+      ],
+      sourceText: "NYC OpenData 5xsi-dfpx",
+      sourceUrl: "https://data.cityofnewyork.us/Environment/Sandy-Inundation-Zone/uyj8-7rv5",
+      vintage: "empirical 2012 extent",
+      collapsed: !ev.sandy,
+    }));
+  }
+
+  const dep = ev.dep || {};
+  const depRows = [];
+  for (const [k, v] of Object.entries(dep)) {
+    const label = k.replace("dep_", "").replace(/_/g, " ");
+    depRows.push([label,
+      v.depth_class > 0 ? `${v.depth_label}` : "outside"]);
+  }
+  if (depRows.length) {
+    const anyHit = Object.values(dep).some(v => (v.depth_class || 0) > 0);
+    cards.push(evCard({
+      key: "dep", title: "DEP Stormwater scenarios",
+      flag: anyHit ? "hit" : "miss",
+      rows: depRows,
+      sourceText: "NYC DEP via NYC OpenData 9i7c-xyvv",
+      sourceUrl: "https://data.cityofnewyork.us/Environment/NYC-Stormwater-Flood-Maps/9i7c-xyvv",
+      vintage: "modeled, 2021 release",
+      collapsed: !anyHit,
+    }));
+  }
+
+  const fn = ev.floodnet;
+  if (fn && fn.n_sensors > 0) {
+    const peak = fn.peak_event;
+    const rows = [
+      ["Sensors within 600 m", String(fn.n_sensors)],
+      ["Flood events, last 3 yr", String(fn.n_flood_events_3y)],
+    ];
+    if (peak && peak.max_depth_mm) {
+      rows.push(["Peak event", `${peak.max_depth_mm} mm depth at ${peak.deployment_id}`]);
+      rows.push(["Peak date", (peak.start_time || "").slice(0, 10)]);
+    }
+    cards.push(evCard({
+      key: "floodnet", title: "FloodNet sensor network",
+      flag: fn.n_flood_events_3y > 0 ? "hit" : "note",
+      rows,
+      sourceText: "FloodNet NYC (NYU/CUNY/MOCEJ)",
+      sourceUrl: "https://www.floodnet.nyc/",
+      vintage: "live, queried per request",
+      collapsed: false,
+    }));
+  }
+
+  const ida = ev.ida_hwm;
+  if (ida && ida.n_within_radius > 0) {
+    const rows = [
+      ["HWMs within 800 m", String(ida.n_within_radius)],
+    ];
+    if (ida.max_height_above_gnd_ft != null)
+      rows.push(["Max above-ground height", `${ida.max_height_above_gnd_ft} ft`]);
+    if (ida.max_elev_ft != null)
+      rows.push(["Max HWM elevation", `${ida.max_elev_ft} ft`]);
+    if (ida.nearest_dist_m != null)
+      rows.push(["Nearest HWM site", `${ida.nearest_site || "—"} (${ida.nearest_dist_m} m)`]);
+    cards.push(evCard({
+      key: "ida_hwm", title: "Hurricane Ida 2021 high-water marks",
+      flag: "hit", rows,
+      sourceText: "USGS Short-Term Network, Event 312 (NY)",
+      sourceUrl: "https://stn.wim.usgs.gov/",
+      vintage: "post-event survey, Sep 2021",
+      collapsed: false,
+    }));
+  }
+
+  const mt = ev.microtopo;
+  if (mt) {
+    const rows = [
+      ["Elevation", `${mt.point_elev_m} m`],
+      ["Lower than (200 m)", `${mt.rel_elev_pct_200m}% of cells`],
+      ["Lower than (750 m)", `${mt.rel_elev_pct_750m}% of cells`],
+      ["Basin relief (750 m)", `${mt.basin_relief_m} m`],
+    ];
+    if (mt.hand_m != null) rows.push(["HAND", `${mt.hand_m} m`]);
+    if (mt.twi != null)    rows.push(["TWI", String(mt.twi)]);
+    cards.push(evCard({
+      key: "microtopo", title: "LiDAR-derived terrain (DEM + TWI + HAND)",
+      flag: "note", rows,
+      sourceText: "USGS 3DEP DEM via py3dep · whitebox-workflows hydrology",
+      sourceUrl: "https://www.usgs.gov/3d-elevation-program",
+      vintage: "DEM 30 m, hydro-conditioned",
+      collapsed: false,
+    }));
+  }
+
+  const pw = ev.prithvi_water;
+  if (pw && pw.nearest_distance_m != null) {
+    const rows = [
+      ["Inside Ida-attributable polygon", pw.inside_water_polygon ? "yes" : "no"],
+      ["Nearest inundation polygon", `${pw.nearest_distance_m} m`],
+      ["Inundation polygons within 500 m", String(pw.n_polygons_within_500m)],
+      ["Pre-event scene", "HLS T18TWK 2021-08-25 (3% cloud)"],
+      ["Post-event scene", "HLS T18TWK 2021-09-02 (1% cloud, ~12 h after Ida peak)"],
+    ];
+    cards.push(evCard({
+      key: "prithvi_water",
+      title: "Prithvi-EO 2.0 — Hurricane Ida flood inundation",
+      flag: pw.inside_water_polygon ? "hit" : "note", rows,
+      sourceText: "NASA / IBM Prithvi-EO-2.0-300M-TL-Sen1Floods11 (Apache-2.0, 300M params, run via TerraTorch on HLS Sentinel-2)",
+      sourceUrl: "https://huggingface.co/ibm-nasa-geospatial/Prithvi-EO-2.0-300M-TL-Sen1Floods11",
+      vintage: "Polygons = post-event water minus pre-event water. Sub-surface flooding (subway / basement) not visible to optical satellites.",
+      collapsed: false,
+    }));
+  }
+
+  const c311 = ev.nyc311;
+  if (c311 && c311.n > 0) {
+    const rows = [
+      ["Total complaints", String(c311.n)],
+      ["Buffer", `${c311.radius_m} m`],
+      ["Window", `${c311.years} years`],
+    ];
+    if (c311.by_descriptor) {
+      const top = Object.entries(c311.by_descriptor).slice(0, 3)
+        .map(([k, v]) => `${v}× ${k.replace(/\s*\(.+?\)\s*$/, "").replace(/\s*\(SA\d?\)?$/, "")}`)
+        .join("; ");
+      if (top) rows.push(["Top descriptors", top]);
+    }
+    if (c311.by_year) {
+      const yrs = Object.entries(c311.by_year).map(([y, n]) => `${y}: ${n}`).join(", ");
+      rows.push(["By year", yrs]);
+    }
+    cards.push(evCard({
+      key: "nyc311", title: "NYC 311 flood complaints",
+      flag: c311.n >= 5 ? "hit" : "note", rows,
+      sourceText: "NYC 311 (Socrata erm2-nwe9)",
+      sourceUrl: "https://data.cityofnewyork.us/Social-Services/311-Service-Requests-from-2010-to-Present/erm2-nwe9",
+      vintage: "live, last 5 years",
+      collapsed: false,
+    }));
+  }
+
+  $("#evidenceCards").innerHTML = cards.join("");
+}
+
+function renderPolicy(ev) {
+  const policy = $("#policySection");
+  const rag = ev.rag || [];
+  if (!rag.length) { policy.classList.add("hidden"); return; }
+  policy.classList.remove("hidden");
+  const items = rag.map(h => `<li>
+    <div class="policy-title">${h.title || h.doc_id}</div>
+    <div class="policy-quote">${(h.text || "").replace(/^"|"$/g, "").trim()}</div>
+    <div class="policy-cite">${h.citation || ""}${h.page ? " · p. " + h.page : ""}</div>
+  </li>`);
+  $("#policyList").innerHTML = items.join("");
+}
+
+function renderEnergy(ev) {
+  const en = ev.energy;
+  if (!en) return;
+  $("#energyLocal").textContent = `${en.local_mwh} mWh`;
+  $("#energyCloud").textContent = `~${en.cloud_mwh} mWh`;
+  $("#energyRatio").textContent = en.ratio_cloud_over_local
+    ? `${en.ratio_cloud_over_local}×`
+    : "—";
+}
+
+function renderEnergy(ev) {
+  const en = ev.energy;
+  if (!en) return;
+  const $$ = (id) => document.getElementById(id);
+  $$("energyLocal").textContent = `${en.local_mwh} mWh`;
+  $$("energyCloud").textContent = `~${en.cloud_mwh} mWh`;
+  $$("energyRatio").textContent = en.ratio_cloud_over_local
+    ? `${en.ratio_cloud_over_local}×`
+    : "—";
+  const m = en.method || {};
+  $$("energyMethod").innerHTML =
+    `Local: ${m.local} (q4_K_M, package power; ${m.local_source}). ` +
+    `Cloud: ${m.cloud} (${m.cloud_source}).`;
+}
+
+function renderNumberedSources() {
+  // Render the methodology footer's <ol> in CITE_INDEX order so the [n]
+  // superscripts in the lede paragraph match. CITE_INDEX is populated
+  // by rewriteCitations() during renderParagraph().
+  const ol = $("#sources");
+  if (!ol) return;
+  const entries = Object.entries(CITE_INDEX).sort((a, b) => a[1] - b[1]);
+  ol.innerHTML = entries.map(([doc_id, n]) =>
+    `<li value="${n}">${SOURCE_LABELS[doc_id] || doc_id} <code>[${doc_id}]</code></li>`
+  ).join("");
+}
+
+function renderAddress(g) {
+  const dl = $("#addr");
+  dl.innerHTML = "";
+  const rows = [
+    ["address", g.address],
+    ["borough", g.borough || ""],
+    ["lat / lon", `${g.lat.toFixed(5)}, ${g.lon.toFixed(5)}`],
+    ["BBL", g.bbl || ""],
+    ["BIN", g.bin || ""],
+  ];
+  for (const [k, v] of rows) {
+    if (!v) continue;
+    const dt = document.createElement("dt"); dt.textContent = k;
+    const dd = document.createElement("dd"); dd.textContent = v;
+    dl.appendChild(dt); dl.appendChild(dd);
+  }
+}
+
+// Suggested-address chips fill the input and submit
+document.querySelectorAll(".chip[data-q]").forEach((btn) => {
+  btn.addEventListener("click", (e) => {
+    e.preventDefault();
+    $("#q").value = btn.getAttribute("data-q");
+    $("#qform").requestSubmit();
+  });
+});
+
+$("#qform").addEventListener("submit", (e) => {
+  e.preventDefault();
+  const q = $("#q").value.trim();
+  if (!q) return;
+  if (evtSrc) evtSrc.close();
+  resetUI(q);
+  $("#go").disabled = true;
+  evtSrc = new EventSource("/api/stream?q=" + encodeURIComponent(q));
+
+  evtSrc.addEventListener("step", (msg) => {
+    const ev = JSON.parse(msg.data);
+    markStep(ev.step, ev);
+  });
+  evtSrc.addEventListener("final", (msg) => {
+    const ev = JSON.parse(msg.data);
+    $("#report").classList.remove("hidden");
+    $("#meta").classList.remove("hidden");
+    $("#map-card").classList.remove("hidden");
+    // Reset citation index for this query before any citation rewriting
+    CITE_INDEX = {};
+    if (ev.geocode) {
+      renderAddress(ev.geocode);
+      updateMapForResult(ev.geocode);
+    }
+    renderHeader(ev);
+    renderTier(ev);
+    if (ev.paragraph) renderParagraph(ev.paragraph);
+    renderKeyFindings(ev);
+    renderEvidence(ev);
+    renderPolicy(ev);
+    renderEnergy(ev);
+    renderNumberedSources();
+  });
+  evtSrc.addEventListener("done", () => {
+    $("#go").disabled = false;
+    evtSrc.close();
+  });
+  evtSrc.addEventListener("error", (msg) => {
+    console.error("SSE error", msg);
+    $("#go").disabled = false;
+    evtSrc.close();
+  });
+});

web/static/index.html

@@ -0,0 +1,200 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <title>Riprap — flood risk, NYC</title>
+  <link rel="stylesheet" href="/static/style.css">
+  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.css">
+  <script src="https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"></script>
+</head>
+<body>
+  <header class="topbar">
+    <div class="topbar-inner">
+      <div class="brand">
+        <span class="brand-name">Riprap</span>
+        <span class="brand-sep">·</span>
+        <span class="brand-tag">citation-grounded civic AI for NYC flood risk</span>
+      </div>
+      <div class="topbar-right">
+        <a href="/compare" class="modelink">compare</a>
+        <a href="/register/schools" class="modelink">register</a>
+        <span class="local-pill" title="Granite 4.1 inference runs on this machine. No vendor LLM is contacted.">
+          <span class="dot"></span>local · Granite 4.1 / Ollama
+        </span>
+      </div>
+    </div>
+  </header>
+
+  <div class="form-bar">
+    <form id="qform">
+      <input type="text" id="q" name="q" autocomplete="off"
+             placeholder='NYC address — e.g. "180 Beach 35 St, Queens"'
+             value="180 Beach 35 St, Queens"
+             required />
+      <button type="submit" id="go">Analyze</button>
+    </form>
+    <div class="suggest">
+      <span class="suggest-label">try:</span>
+      <button class="chip" data-q="180 Beach 35 St, Queens">Far Rockaway · Sandy zone</button>
+      <button class="chip" data-q="280 Broome St, Manhattan">LES · Lower Manhattan</button>
+      <button class="chip" data-q="153-09 90 Avenue, Jamaica, Queens">Jamaica · Ida basements</button>
+      <button class="chip" data-q="2950 W 25 St, Brooklyn">Coney Island · NYCHA</button>
+    </div>
+  </div>
+
+  <div class="workbench">
+
+    <!-- LEFT: trace + address details -->
+    <aside class="col-left">
+      <section id="trace" class="panel">
+        <h2>Specialist trace<span class="hint">Burr FSM · 8 nodes</span></h2>
+        <ul id="steps"></ul>
+      </section>
+
+      <section id="meta" class="panel hidden">
+        <h2>Address resolved</h2>
+        <dl id="addr"></dl>
+      </section>
+    </aside>
+
+    <!-- MIDDLE: map -->
+    <section class="col-mid">
+      <div id="map-card" class="panel panel-map hidden">
+        <h2>Map<span class="hint">Sandy 2012 · DEP extreme 2080 · Prithvi-EO Ida inundation · FloodNet</span></h2>
+        <div id="map"></div>
+        <div class="legend">
+          <span><i class="sw sandy"></i>Sandy 2012 zone</span>
+          <span><i class="sw dep"></i>DEP Extreme 2080</span>
+          <span><i class="sw prithvi"></i>Prithvi-EO Ida 2021 inundation</span>
+          <span><i class="sw fnDot"></i>FloodNet (no events)</span>
+          <span><i class="sw fnDotHot"></i>FloodNet w/ events</span>
+          <span><i class="sw addr"></i>Queried address</span>
+        </div>
+      </div>
+    </section>
+
+    <!-- RIGHT: structured cited assessment -->
+    <aside class="col-right">
+      <section id="report" class="report panel hidden">
+
+        <header class="report-head">
+          <div class="report-id">
+            <div class="report-eyebrow">Flood exposure assessment</div>
+            <div class="report-addr" id="reportAddr">—</div>
+            <div class="report-meta">
+              <span id="reportBoro">—</span>
+              <span class="sep">·</span>
+              <span class="report-meta-k">BBL</span>
+              <span class="report-meta-v" id="reportBbl">—</span>
+              <span class="sep">·</span>
+              <span class="report-meta-k">Assessed</span>
+              <span class="report-meta-v" id="reportTs">—</span>
+            </div>
+          </div>
+        </header>
+
+        <div class="tier-block">
+          <div class="tier-badge tier-pending" id="tierBadge">
+            <div class="tier-badge-num" id="tierNum">—</div>
+            <div class="tier-badge-of">of 4</div>
+          </div>
+          <div class="tier-text">
+            <div class="tier-label" id="tierLabel">Awaiting assessment</div>
+            <div class="tier-help" id="tierHelp">—</div>
+          </div>
+        </div>
+
+        <div class="summary-box">
+          <div class="report-section-h">Summary</div>
+          <p id="paragraph"></p>
+        </div>
+
+        <div class="key-findings">
+          <div class="report-section-h">Key findings</div>
+          <dl id="keyFindings"></dl>
+        </div>
+
+        <div class="evidence-stack">
+          <div class="report-section-h">Evidence by source</div>
+          <div id="evidenceCards"></div>
+        </div>
+
+        <div class="policy-stack hidden" id="policySection">
+          <div class="report-section-h">Policy context <span class="hint-inline">(retrieved verbatim from agency reports)</span></div>
+          <ol id="policyList"></ol>
+        </div>
+
+        <div class="energy-footer">
+          <span class="energy-num-inline" id="energyLocal">—</span> local
+          <span class="sep">·</span>
+          <span class="energy-num-inline" id="energyCloud">—</span> est. frontier cloud
+          <span class="sep">·</span>
+          <span class="energy-num-inline" id="energyRatio">—</span> ratio
+          <span class="sep">·</span>
+          <span class="report-meta-k">via</span> Granite 4.1, local Ollama
+        </div>
+
+        <details class="methodology">
+          <summary>Methodology &amp; sources</summary>
+          <div class="method-body">
+            <p>
+              <strong>Specialists.</strong> Riprap runs nine independent specialists per query: NYC DCP Geosearch, Sandy Inundation Zone (NYC OD), three DEP Stormwater scenarios, FloodNet sensor network, NYC 311, USGS 3DEP LiDAR-derived terrain (elevation percentile + TWI + HAND), USGS STN Hurricane Ida 2021 high-water marks, Prithvi-EO 2.0 satellite water segmentation, and Granite Embedding RAG over NYC resilience plans. A specialist that produces no grounded data emits no document.
+            </p>
+            <p>
+              <strong>Tier rubric.</strong> Sandy 2012 zone: +3. DEP Extreme 2080 footprint: +2. DEP Moderate 2050 footprint: +2. DEP Moderate current: +1. Three or more 311 flood complaints in 200&nbsp;m, last 5&nbsp;yr: +1. FloodNet sensor with ≥1 event in 400&nbsp;m: +1. RAG hit naming this asset class: +1. Tier 1 if score ≥ 6, Tier 2 if 4-5, Tier 3 if 2-3, Tier 4 if 1, Tier 0 if 0.
+            </p>
+            <p>
+              <strong>Hallucination guardrail.</strong> Every numerical token in the Granite-generated paragraph is verified to appear in the source documents; sentences with ungrounded numbers are dropped. The Granite output is grounded via the model's native <code>document</code>-role chat template (Granite 4.1 / Ollama).
+            </p>
+            <h4>Numbered sources for this assessment</h4>
+            <ol id="sources"></ol>
+          </div>
+        </details>
+      </section>
+    </aside>
+
+  </div>
+
+  <footer>
+    <div class="foot-inner">
+      <div class="foot-col">
+        <h3>Why local Granite</h3>
+        <p>
+          Inference runs on the machine Riprap is deployed on, not in a
+          vendor LLM. That keeps queries and source documents inside an
+          organization's data boundary — material for newsrooms,
+          agencies, and researchers under FOIL or IRB constraints. The
+          reconciler uses an open-weight model in the ~3-billion-parameter
+          range; on Apple Silicon a single grounded query draws roughly
+          0.03&nbsp;Wh, an estimated order of magnitude below the
+          ~0.3&nbsp;Wh-per-query figure
+          <a href="https://epoch.ai/gradient-updates/how-much-energy-does-chatgpt-use" target="_blank">Epoch&nbsp;AI</a>
+          publishes for typical frontier-cloud (GPT-4o-class) queries.
+          Public NYC and USGS data services receive the resolved
+          coordinates for sensor and complaint lookups.
+        </p>
+      </div>
+      <div class="foot-col">
+        <h3>Sources</h3>
+        <p>
+          <a href="https://data.cityofnewyork.us/" target="_blank">NYC Open Data</a> ·
+          <a href="https://api.floodnet.nyc/" target="_blank">FloodNet NYC</a> ·
+          <a href="https://geosearch.planninglabs.nyc/" target="_blank">NYC DCP Geosearch</a> ·
+          <a href="https://stn.wim.usgs.gov/" target="_blank">USGS STN</a> ·
+          <a href="https://www.usgs.gov/3d-elevation-program" target="_blank">USGS 3DEP</a>
+        </p>
+        <h3 style="margin-top: 14px;">Models</h3>
+        <p>
+          <a href="https://huggingface.co/ibm-granite" target="_blank">IBM Granite 4.1</a> &
+          <a href="https://huggingface.co/ibm-granite/granite-embedding-278m-multilingual" target="_blank">Granite Embedding 278M</a>
+          via <a href="https://ollama.com" target="_blank">Ollama</a> +
+          sentence-transformers
+        </p>
+      </div>
+    </div>
+  </footer>
+
+  <script src="/static/app.js"></script>
+</body>
+</html>

web/static/style.css

@@ -0,0 +1,1098 @@
+/* ===============================================================
+   Riprap — visual idiom adapted from NYC Planning Labs
+   (ZoLa, Capital Planning Explorer, Population FactFinder).
+   Goal: dense, professional analytical tool. Map-dominant.
+   No marketing chrome.
+   =============================================================== */
+
+@font-face {
+  font-family: "IBM Plex Sans";
+  src: url("/static/vendor/nyco/fonts/IBM-Plex-Sans/IBMPlexSans-Regular.woff2") format("woff2");
+  font-weight: 400; font-style: normal; font-display: swap;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  src: url("/static/vendor/nyco/fonts/IBM-Plex-Sans/IBMPlexSans-Italic.woff2") format("woff2");
+  font-weight: 400; font-style: italic; font-display: swap;
+}
+@font-face {
+  font-family: "IBM Plex Sans";
+  src: url("/static/vendor/nyco/fonts/IBM-Plex-Sans/IBMPlexSans-Bold.woff2") format("woff2");
+  font-weight: 700; font-style: normal; font-display: swap;
+}
+
+:root {
+  --nyc-blue:        #1642DF;
+  --nyc-blue-dark:   #031553;
+  --nyc-blue-soft:   #e8efff;
+  --nyc-scarlet:     #e63946;
+
+  --bg:              #ffffff;
+  --bg-soft:         #f6f8fb;
+  --panel:           #ffffff;
+  --line:            #dde2ea;
+  --line-strong:     #c5ccd6;
+
+  --text:            #14161a;
+  --text-muted:      #5b6470;
+  --text-faint:      #8b95a3;
+
+  --good:            #1a8754;
+  --warn:            #b97700;
+
+  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  --mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, monospace;
+
+  --topbar-h: 44px;
+  --formbar-h: auto;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+  margin: 0; padding: 0;
+  font: 14px/1.45 var(--sans);
+  color: var(--text);
+  background: var(--bg-soft);
+  min-height: 100vh;
+}
+
+a { color: var(--nyc-blue); text-decoration: none; }
+a:hover { text-decoration: underline; }
+
+/* ----- Topbar ----- */
+
+.topbar {
+  height: var(--topbar-h);
+  background: #fff;
+  border-bottom: 1px solid var(--line);
+  position: sticky; top: 0; z-index: 20;
+}
+
+.topbar-inner {
+  max-width: 1480px;
+  margin: 0 auto;
+  height: 100%;
+  padding: 0 20px;
+  display: flex; align-items: center; justify-content: space-between;
+  gap: 16px;
+}
+
+.brand {
+  display: inline-flex; align-items: baseline; gap: 8px;
+  font-size: 13.5px;
+}
+
+.brand-name {
+  font-weight: 700;
+  font-size: 16px;
+  color: var(--nyc-blue);
+  letter-spacing: -0.005em;
+}
+
+.brand-sep { color: var(--text-faint); }
+.brand-tag { color: var(--text-muted); }
+
+.topbar-right { display: flex; align-items: center; gap: 12px; }
+
+.local-pill {
+  display: inline-flex; align-items: center; gap: 8px;
+  padding: 4px 10px;
+  font-size: 11.5px;
+  font-family: var(--mono);
+  color: var(--good);
+  background: rgba(26, 135, 84, 0.08);
+  border: 1px solid rgba(26, 135, 84, 0.30);
+  border-radius: 999px;
+  cursor: help;
+}
+
+.local-pill .dot {
+  width: 7px; height: 7px; border-radius: 50%;
+  background: var(--good);
+  box-shadow: 0 0 6px rgba(26, 135, 84, 0.7);
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.45} }
+
+/* ----- Form bar ----- */
+
+.form-bar {
+  background: #fff;
+  border-bottom: 1px solid var(--line);
+  padding: 14px 20px 12px;
+}
+
+#qform {
+  max-width: 1480px;
+  margin: 0 auto;
+  display: flex; gap: 8px;
+}
+
+input[type="text"] {
+  flex: 1;
+  padding: 9px 12px;
+  font: inherit;
+  font-size: 14px;
+  color: var(--text);
+  background: #fff;
+  border: 1px solid var(--line-strong);
+  border-radius: 3px;
+  outline: none;
+  transition: border-color 0.12s, box-shadow 0.12s;
+}
+
+input[type="text"]:focus {
+  border-color: var(--nyc-blue);
+  box-shadow: 0 0 0 2px rgba(22, 66, 223, 0.16);
+}
+
+button {
+  padding: 9px 18px;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  background: var(--nyc-blue);
+  border: 1px solid var(--nyc-blue);
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background 0.12s;
+}
+
+button:hover:not(:disabled) { background: var(--nyc-blue-dark); border-color: var(--nyc-blue-dark); }
+button:disabled { opacity: 0.55; cursor: not-allowed; }
+
+.suggest {
+  max-width: 1480px;
+  margin: 8px auto 0;
+  display: flex; flex-wrap: wrap; gap: 6px;
+  align-items: center;
+}
+
+.suggest-label {
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+  margin-right: 4px;
+}
+
+button.chip {
+  padding: 3px 9px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-muted);
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 999px;
+  cursor: pointer;
+}
+
+button.chip:hover {
+  background: var(--nyc-blue-soft);
+  border-color: var(--nyc-blue);
+  color: var(--nyc-blue-dark);
+}
+
+/* ----- Workbench (3-column: trace | map | report) ----- */
+
+.workbench {
+  max-width: 1640px;
+  margin: 0 auto;
+  padding: 14px 20px;
+  display: grid;
+  grid-template-columns: 320px minmax(0, 1fr) 400px;
+  gap: 14px;
+  align-items: start;
+}
+
+.col-left {
+  display: flex; flex-direction: column; gap: 12px;
+  position: sticky; top: calc(var(--topbar-h) + 14px);
+}
+.col-mid {
+  display: flex; flex-direction: column; gap: 12px;
+  min-width: 0;
+}
+.col-right {
+  display: flex; flex-direction: column; gap: 12px;
+  position: sticky; top: calc(var(--topbar-h) + 14px);
+  max-height: calc(100vh - var(--topbar-h) - 28px);
+  overflow: auto;
+}
+
+/* ----- Panels ----- */
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.panel > h2,
+.panel-head h2 {
+  margin: 0;
+  padding: 9px 14px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  color: var(--text-muted);
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--line);
+  display: flex; align-items: baseline; gap: 10px;
+}
+
+.panel > h2 .hint,
+.panel-head h2 .hint {
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text-faint);
+  font-size: 10.5px;
+  margin-left: auto;
+}
+
+/* let panel sections style their own bodies */
+#trace, #meta, #report { padding: 0; }
+
+.panel-head {
+  border-bottom: 1px solid var(--line);
+  background: var(--bg-soft);
+}
+
+.hidden { display: none; }
+
+/* ----- Specialist trace ----- */
+
+#steps {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+  font-size: 12.5px;
+}
+
+#steps li {
+  display: grid;
+  grid-template-columns: 18px 1fr auto;
+  gap: 10px;
+  padding: 7px 14px;
+  border-bottom: 1px solid var(--line);
+  align-items: baseline;
+}
+
+#steps li:last-child { border-bottom: 0; }
+
+#steps .icon { font-weight: 700; font-size: 14px; line-height: 1; }
+#steps .pending .icon { color: var(--text-faint); }
+#steps .running .icon { color: var(--nyc-blue); }
+#steps .ok      .icon { color: var(--good); }
+#steps .err     .icon { color: var(--nyc-scarlet); }
+
+#steps .label  { color: var(--text); font-weight: 500; }
+#steps .meta   { color: var(--text-muted); font-size: 11px; }
+#steps .time   { font-family: var(--mono); color: var(--text-faint); font-size: 11.5px; }
+
+#steps .running { background: rgba(22, 66, 223, 0.04); }
+
+#steps .result {
+  grid-column: 2 / -1;
+  color: var(--text-muted);
+  font-size: 11px;
+  font-family: var(--mono);
+  margin-top: 3px;
+  word-break: break-word;
+  line-height: 1.4;
+}
+
+/* ----- Address resolved ----- */
+
+#addr {
+  margin: 0;
+  padding: 10px 14px;
+  display: grid;
+  grid-template-columns: max-content 1fr;
+  column-gap: 14px;
+  row-gap: 4px;
+  font-size: 12.5px;
+}
+
+#addr dt {
+  color: var(--text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-size: 10.5px;
+}
+
+#addr dd {
+  margin: 0;
+  font-family: var(--mono);
+  color: var(--text);
+  font-size: 12px;
+  word-break: break-word;
+}
+
+/* ----- Map ----- */
+
+.panel-map { padding: 0; }
+#map {
+  width: 100%;
+  height: 60vh;
+  min-height: 440px;
+  background: var(--bg-soft);
+}
+
+.legend {
+  display: flex; flex-wrap: wrap; gap: 14px;
+  padding: 8px 14px;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: var(--mono);
+  border-top: 1px solid var(--line);
+  align-items: center;
+}
+
+.legend i.sw {
+  display: inline-block;
+  width: 11px; height: 11px;
+  border-radius: 2px;
+  margin-right: 5px;
+  vertical-align: middle;
+  border: 1px solid rgba(0,0,0,0.12);
+}
+.legend i.sandy    { background: rgba(230, 57, 70, 0.45); }
+.legend i.dep      { background: rgba(22, 66, 223, 0.30); }
+.legend i.prithvi  { background: rgba(13, 148, 136, 0.20); border-color: #0d9488; }
+.legend i.fnDot    { border-radius: 50%; background: var(--good); }
+.legend i.fnDotHot { border-radius: 50%; background: var(--nyc-scarlet); }
+.legend i.addr     { border-radius: 50%; background: var(--nyc-blue); border-color: #fff; }
+
+/* ----- Civic-assessment report panel ----- */
+
+.report { padding: 0; }
+
+.report-head {
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--line);
+  background: linear-gradient(180deg, var(--bg-soft) 0%, #fff 100%);
+}
+
+.report-eyebrow {
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+  color: var(--nyc-blue);
+}
+
+.report-addr {
+  margin-top: 4px;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.25;
+  color: var(--text);
+}
+
+.report-meta {
+  margin-top: 4px;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text-muted);
+  display: flex; flex-wrap: wrap;
+  align-items: baseline;
+  gap: 4px;
+}
+.report-meta .sep { color: var(--text-faint); margin: 0 2px; }
+.report-meta-k {
+  text-transform: uppercase;
+  font-size: 10px;
+  letter-spacing: 0.05em;
+  color: var(--text-faint);
+}
+.report-meta-v { color: var(--text); }
+
+/* Tier block */
+.tier-block {
+  display: grid;
+  grid-template-columns: 64px 1fr;
+  gap: 14px;
+  align-items: center;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+  background: #fff;
+}
+
+.tier-badge {
+  width: 64px; height: 64px;
+  border-radius: 6px;
+  display: flex; flex-direction: column;
+  align-items: center; justify-content: center;
+  color: #fff;
+  font-family: var(--mono);
+  line-height: 1;
+}
+.tier-badge-num {
+  font-size: 30px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+.tier-badge-of {
+  font-size: 10px;
+  font-weight: 500;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  margin-top: 2px;
+  opacity: 0.9;
+}
+
+.tier-pending { background: var(--text-faint); }
+.tier-badge.t-1 { background: var(--nyc-scarlet); }
+.tier-badge.t-2 { background: #d97706; }
+.tier-badge.t-3 { background: #ca8a04; }
+.tier-badge.t-4 { background: var(--nyc-blue); }
+.tier-badge.t-0 { background: var(--good); }
+
+.tier-text { min-width: 0; }
+.tier-label {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--text);
+  line-height: 1.2;
+}
+.tier-help {
+  margin-top: 3px;
+  font-size: 12px;
+  color: var(--text-muted);
+  line-height: 1.35;
+}
+
+/* Section headings (small civic-style) */
+.report-section-h {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  color: var(--text-muted);
+  padding: 12px 16px 6px;
+  display: flex;
+  align-items: baseline;
+}
+.hint-inline {
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
+  color: var(--text-faint);
+  margin-left: 6px;
+  font-size: 11px;
+}
+
+/* Summary lede */
+.summary-box {
+  border-bottom: 1px solid var(--line);
+  background: var(--nyc-blue-soft);
+}
+.summary-box #paragraph {
+  margin: 0;
+  padding: 0 16px 14px;
+  font-size: 13.5px;
+  line-height: 1.55;
+  color: var(--text);
+}
+.summary-box #paragraph .cite {
+  display: inline-block;
+  vertical-align: super;
+  font-size: 9.5px;
+  line-height: 1;
+  font-family: var(--mono);
+  color: var(--nyc-blue);
+  background: #fff;
+  border: 1px solid rgba(22, 66, 223, 0.30);
+  padding: 1px 4px;
+  margin-left: 1px;
+  border-radius: 3px;
+  cursor: help;
+  font-weight: 500;
+}
+
+/* Key findings dl */
+.key-findings { border-bottom: 1px solid var(--line); }
+#keyFindings {
+  margin: 0;
+  padding: 0 16px 14px;
+  display: grid;
+  grid-template-columns: minmax(140px, max-content) 1fr;
+  column-gap: 14px;
+  row-gap: 6px;
+  font-size: 12.5px;
+}
+#keyFindings dt {
+  color: var(--text-muted);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  padding-top: 1px;
+}
+#keyFindings dd {
+  margin: 0;
+  color: var(--text);
+  font-family: var(--mono);
+  font-size: 12px;
+  word-break: break-word;
+}
+#keyFindings dd.hit  { color: var(--nyc-scarlet); font-weight: 600; }
+#keyFindings dd.miss { color: var(--text-faint); }
+
+/* Evidence cards */
+.evidence-stack { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
+#evidenceCards {
+  display: flex; flex-direction: column;
+  gap: 8px;
+  padding: 0 16px 4px;
+}
+
+.ec {
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  background: #fff;
+  overflow: hidden;
+}
+.ec-head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 7px 11px;
+  background: var(--bg-soft);
+  border-bottom: 1px solid var(--line);
+  cursor: pointer;
+  user-select: none;
+}
+.ec-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text);
+  display: flex; align-items: center; gap: 8px;
+}
+.ec-title .ec-flag {
+  width: 8px; height: 8px; border-radius: 50%;
+  display: inline-block;
+}
+.ec-flag.hit  { background: var(--nyc-scarlet); }
+.ec-flag.note { background: var(--nyc-blue); }
+.ec-flag.miss { background: var(--text-faint); }
+
+.ec-tag {
+  font-family: var(--mono);
+  font-size: 9.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+.ec-body { display: block; padding: 8px 11px 10px; font-size: 12px; }
+.ec-body dl {
+  margin: 0;
+  display: grid;
+  grid-template-columns: minmax(120px, max-content) 1fr;
+  column-gap: 12px;
+  row-gap: 4px;
+}
+.ec-body dt {
+  color: var(--text-muted);
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.ec-body dd {
+  margin: 0;
+  font-family: var(--mono);
+  font-size: 11.5px;
+  color: var(--text);
+}
+.ec-foot {
+  font-size: 10px;
+  color: var(--text-faint);
+  font-family: var(--mono);
+  padding: 4px 11px 8px;
+  border-top: 1px dotted var(--line);
+}
+.ec-foot a { color: var(--nyc-blue); }
+
+.ec.collapsed .ec-body,
+.ec.collapsed .ec-foot { display: none; }
+.ec-toggle {
+  font-family: var(--mono);
+  font-size: 11px;
+  color: var(--text-muted);
+}
+
+/* Policy context */
+.policy-stack { border-bottom: 1px solid var(--line); padding-bottom: 12px; }
+#policyList {
+  list-style: none;
+  margin: 0;
+  padding: 0 16px;
+  display: grid; gap: 8px;
+}
+#policyList li {
+  border-left: 3px solid var(--nyc-blue);
+  background: var(--nyc-blue-soft);
+  padding: 8px 12px;
+  border-radius: 0 3px 3px 0;
+}
+.policy-title {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--nyc-blue-dark);
+  margin-bottom: 3px;
+}
+.policy-quote {
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--text);
+  font-style: italic;
+}
+.policy-quote::before { content: "\201C"; }
+.policy-quote::after  { content: "\201D"; }
+.policy-cite {
+  margin-top: 4px;
+  font-size: 10.5px;
+  color: var(--text-muted);
+  font-family: var(--mono);
+}
+
+/* Energy footer */
+.energy-footer {
+  padding: 8px 16px;
+  font-size: 11px;
+  color: var(--text-muted);
+  font-family: var(--mono);
+  border-bottom: 1px solid var(--line);
+  display: flex; flex-wrap: wrap; gap: 4px;
+  align-items: baseline;
+}
+.energy-num-inline {
+  font-weight: 700;
+  color: var(--nyc-blue-dark);
+}
+.energy-footer .sep { color: var(--text-faint); margin: 0 2px; }
+
+/* Methodology disclosure */
+.methodology {
+  font-size: 11.5px;
+}
+.methodology summary {
+  padding: 9px 16px;
+  font-weight: 600;
+  color: var(--nyc-blue);
+  cursor: pointer;
+  list-style: none;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+.methodology summary::-webkit-details-marker { display: none; }
+.methodology summary::before {
+  content: "▸";
+  display: inline-block;
+  margin-right: 6px;
+  transition: transform 0.15s;
+}
+.methodology[open] summary::before { transform: rotate(90deg); }
+.method-body {
+  padding: 4px 16px 14px;
+  color: var(--text-muted);
+  font-size: 11.5px;
+  line-height: 1.5;
+}
+.method-body p { margin: 0 0 8px; }
+.method-body h4 {
+  margin: 12px 0 4px;
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  color: var(--text-muted);
+  font-weight: 700;
+}
+.method-body ol {
+  margin: 0;
+  padding-left: 16px;
+  font-family: var(--mono);
+  font-size: 11px;
+  display: grid; gap: 4px;
+}
+.method-body ol li { padding-left: 4px; }
+.method-body code {
+  background: var(--bg-soft);
+  padding: 1px 4px;
+  border-radius: 2px;
+  font-size: 10.5px;
+}
+
+/* Methodology footer's numbered source list */
+.method-body ol li {
+  list-style: decimal;
+  word-break: break-word;
+}
+
+/* Legacy section padding for compare.js / register.js panels */
+.report-section { padding: 12px 16px 14px; border-bottom: 1px solid var(--line); }
+.report-section:last-child { border-bottom: 0; }
+.report-section h3 {
+  margin: 0 0 8px;
+  font-size: 10.5px; font-weight: 700;
+  text-transform: uppercase; letter-spacing: 0.10em;
+  color: var(--text-muted);
+}
+
+/* Legacy classes still used by compare.js and register.js (will be
+   migrated to the civic-assessment structure in a follow-up). Keep
+   minimal styling so those pages still render. */
+.glance-list { list-style: none; margin: 0; padding: 0;
+  display: grid; grid-template-columns: 1fr; gap: 4px; font-size: 12.5px; }
+.glance-list li { display: grid; grid-template-columns: 18px 1fr;
+  align-items: baseline; gap: 6px; padding: 3px 0; }
+.glance-list li.hit  { color: var(--text); }
+.glance-list li.miss { color: var(--text-faint); }
+.glance-list .gmark { font-family: var(--mono); font-weight: 700; line-height: 1; font-size: 13px; }
+.glance-list .hit .gmark  { color: var(--nyc-scarlet); }
+.glance-list .miss .gmark { color: var(--text-faint); }
+.glance-list .note .gmark { color: var(--nyc-blue); }
+.glance-list .gnum  { font-family: var(--mono); font-weight: 500; color: var(--text); }
+
+.sources-list { list-style: none; margin: 0; padding: 0; font-size: 11.5px;
+  display: grid; gap: 4px; }
+.sources-list li { display: grid; grid-template-columns: max-content 1fr;
+  gap: 8px; align-items: baseline; padding: 2px 0;
+  border-bottom: 1px dotted var(--line); }
+.sources-list li:last-child { border-bottom: 0; }
+.sources-list .src-tag { font-family: var(--mono); font-size: 10.5px;
+  color: var(--nyc-blue); background: var(--nyc-blue-soft);
+  border: 1px solid rgba(22,66,223,0.25); border-radius: 3px; padding: 1px 5px;
+  white-space: nowrap; font-weight: 500; }
+.sources-list .src-cite { color: var(--text-muted); line-height: 1.4; }
+
+/* Compare + register pages use simple #paragraph .cite — preserve that style */
+.compare-mode #paragraph .cite,
+.register-mode #paragraph .cite,
+.report-section .cite,
+#detailParagraph .cite {
+  display: inline-block; padding: 1px 5px; margin-left: 1px; border-radius: 3px;
+  background: var(--nyc-blue-soft); color: var(--nyc-blue);
+  font-family: var(--mono); font-size: 10.5px; font-weight: 500;
+  border: 1px solid rgba(22,66,223,0.25); cursor: help;
+}
+
+/* ----- Footer ----- */
+
+footer {
+  border-top: 1px solid var(--line);
+  background: #fff;
+  margin-top: 28px;
+}
+
+.foot-inner {
+  max-width: 1480px;
+  margin: 0 auto;
+  padding: 22px 20px 36px;
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  gap: 32px;
+}
+
+footer h3 {
+  margin: 0 0 6px;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  color: var(--text-muted);
+}
+
+footer p {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.55;
+  color: var(--text-muted);
+}
+
+footer a { color: var(--nyc-blue); }
+
+.topbar-select {
+  padding: 4px 8px;
+  font: inherit;
+  font-size: 12px;
+  color: var(--text);
+  background: #fff;
+  border: 1px solid var(--line-strong);
+  border-radius: 3px;
+  margin-right: 12px;
+}
+
+/* ----- Compare mode ----- */
+
+.modelink {
+  font-size: 12px;
+  color: var(--text-muted);
+  margin-right: 12px;
+}
+.modelink:hover { color: var(--nyc-blue); text-decoration: underline; }
+
+.form-bar-compare #cform {
+  max-width: 1640px;
+  margin: 0 auto;
+  display: grid;
+  grid-template-columns: 1fr 1fr auto;
+  gap: 8px;
+  align-items: end;
+}
+
+.cform-row {
+  display: flex; flex-direction: column;
+  gap: 3px;
+}
+
+.cform-row label {
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.10em;
+  color: var(--text-muted);
+}
+
+.compare-workbench {
+  grid-template-columns: 360px minmax(0, 1fr) 360px;
+}
+
+.cpane {
+  display: flex; flex-direction: column; gap: 12px;
+  position: sticky; top: calc(var(--topbar-h) + 14px);
+  max-height: calc(100vh - var(--topbar-h) - 28px);
+  overflow: auto;
+}
+
+.cpane-head {
+  display: flex; align-items: center; gap: 10px;
+  padding: 8px 12px;
+  background: #fff;
+  border: 1px solid var(--line);
+  border-radius: 4px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--text);
+  word-break: break-word;
+}
+
+.ctag {
+  display: inline-flex;
+  align-items: center; justify-content: center;
+  width: 22px; height: 22px;
+  font-size: 12px;
+  font-weight: 700;
+  color: #fff;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+.ctag.a { background: var(--nyc-blue); }
+.ctag.b { background: #9333ea; }
+
+.compare-mid #map {
+  height: calc(100vh - var(--topbar-h) - 200px);
+  min-height: 500px;
+}
+
+@media (max-width: 1340px) {
+  .compare-workbench { grid-template-columns: 1fr 1fr; }
+  .cpane { position: static; max-height: none; }
+  .compare-mid { grid-column: 1 / -1; order: -1; }
+}
+
+@media (max-width: 980px) {
+  .compare-workbench { grid-template-columns: 1fr; }
+  .form-bar-compare #cform { grid-template-columns: 1fr; }
+}
+
+/* ----- Register / Bulk mode ----- */
+
+.register-summary {
+  max-width: 1640px;
+  margin: 0 auto;
+  padding: 14px 20px;
+  display: flex; gap: 22px; align-items: center;
+  background: #fff;
+  border-bottom: 1px solid var(--line);
+  flex-wrap: wrap;
+}
+
+.reg-stat {
+  display: flex; flex-direction: column;
+  border-right: 1px solid var(--line);
+  padding-right: 22px;
+}
+.reg-stat:last-of-type { border-right: 0; padding-right: 0; }
+.reg-stat-num {
+  font-family: var(--mono);
+  font-size: 22px;
+  font-weight: 700;
+  line-height: 1.05;
+  color: var(--text);
+}
+.reg-stat-lbl {
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+}
+.reg-stat.tier-1 .reg-stat-num { color: var(--nyc-scarlet); }
+.reg-stat.tier-2 .reg-stat-num { color: #d97706; }
+.reg-stat.tier-3 .reg-stat-num { color: var(--nyc-blue); }
+
+.reg-stat-spacer { flex: 1; }
+
+.reg-controls {
+  display: flex; gap: 8px; align-items: center;
+}
+
+.reg-controls input,
+.reg-controls select {
+  padding: 7px 10px;
+  font: inherit;
+  font-size: 13px;
+  border: 1px solid var(--line-strong);
+  border-radius: 3px;
+  outline: none;
+}
+
+.reg-controls input { width: 280px; }
+.reg-controls input:focus,
+.reg-controls select:focus {
+  border-color: var(--nyc-blue);
+  box-shadow: 0 0 0 2px rgba(22, 66, 223, 0.16);
+}
+
+.btn-secondary {
+  background: #fff;
+  color: var(--nyc-blue);
+  border: 1px solid var(--nyc-blue);
+  padding: 7px 14px;
+  font-size: 13px;
+}
+.btn-secondary:hover:not(:disabled) {
+  background: var(--nyc-blue-soft);
+  color: var(--nyc-blue-dark);
+}
+
+.register-workbench {
+  max-width: 1640px;
+  margin: 0 auto;
+  padding: 14px 20px;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 460px;
+  gap: 14px;
+  align-items: start;
+}
+
+.reg-table-wrap { padding: 0; overflow: hidden; }
+.reg-tablescroll { overflow: auto; max-height: calc(100vh - var(--topbar-h) - 200px); }
+
+#regTable {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13px;
+}
+
+#regTable thead {
+  position: sticky; top: 0; z-index: 1;
+  background: var(--bg-soft);
+}
+
+#regTable th {
+  text-align: left;
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-muted);
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+}
+#regTable th.num { text-align: right; }
+
+#regTable td {
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--line);
+  vertical-align: top;
+}
+#regTable td.num { text-align: right; font-family: var(--mono); }
+
+#regTable tbody tr { cursor: pointer; }
+#regTable tbody tr:hover { background: var(--nyc-blue-soft); }
+
+.tier-badge {
+  display: inline-block;
+  width: 24px; height: 24px;
+  line-height: 22px;
+  text-align: center;
+  font-family: var(--mono);
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: 3px;
+  border: 1px solid;
+  color: #fff;
+}
+.tier-badge.tier-1 { background: var(--nyc-scarlet); border-color: var(--nyc-scarlet); }
+.tier-badge.tier-2 { background: #d97706; border-color: #d97706; }
+.tier-badge.tier-3 { background: var(--nyc-blue); border-color: var(--nyc-blue); }
+
+.rname { font-weight: 600; color: var(--text); }
+.raddr { color: var(--text-muted); font-size: 11.5px; margin-top: 2px; }
+.rmeta {
+  color: var(--text-muted); font-size: 11.5px; font-family: var(--mono);
+  margin-top: 4px;
+}
+
+.yn { font-family: var(--mono); font-size: 14px; line-height: 1; }
+.yn.yes { color: var(--nyc-scarlet); }
+.yn.no  { color: var(--text-faint); }
+
+.reg-detail {
+  position: sticky; top: calc(var(--topbar-h) + 14px);
+  max-height: calc(100vh - var(--topbar-h) - 28px);
+  overflow: auto;
+}
+
+.reg-detail-empty {
+  padding: 18px;
+  color: var(--text-muted);
+  font-size: 13.5px;
+}
+
+.reg-detail-header {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--line);
+  background: var(--bg-soft);
+}
+
+#detailMap {
+  width: 100%;
+  height: 220px;
+  border-bottom: 1px solid var(--line);
+}
+
+@media (max-width: 1100px) {
+  .register-workbench { grid-template-columns: 1fr; }
+  .reg-detail { position: static; max-height: none; }
+}
+
+/* ----- Responsive guardrails ----- */
+
+@media (max-width: 1340px) {
+  .workbench { grid-template-columns: 280px minmax(0, 1fr); }
+  .col-right { position: static; max-height: none; grid-column: 1 / -1; }
+}
+
+@media (max-width: 980px) {
+  .workbench { grid-template-columns: 1fr; }
+  .col-left  { position: static; }
+  .col-right { position: static; }
+  .foot-inner { grid-template-columns: 1fr; }
+}

web/static/vendor/nyco/fonts/IBM-Plex-Sans/license.txt

@@ -0,0 +1,92 @@
+Copyright © 2017 IBM Corp. with Reserved Font Name "Plex"
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.