Merge dashboard fixes with updated tier definitions

- Real strategy x hydroclimate matrix from actual scenarios only (removes synthetic data and phantom s0036)
- Continuous LOI tiers generated by MergedMetrics; drill-down reconciles with headline tiers
- Radar renders tier values > 4 at true depth (unlabeled tier-5 ring); same fix in distribution PNG
- varmatch exact column matching for app.py find_col; v7 scenario listing
- Keeps Jul 9 tier definitions/descriptions, updated variable set, and ContinuousTiers toggle
- Single flat commit: repo history was squashed after hitting the 1GB LFS storage limit

app.py

@@ -5,6 +5,7 @@ import pandas as pd
 import plotly.graph_objs as go
 import dash
 from dash import dcc, html
+import varmatch  # vendored byte-for-byte from coeqwalpackage.varmatch; single source of truth for column matching
 from dash.dependencies import Input, Output, State
 from dash.exceptions import PreventUpdate
 from dash import callback_context
@@ -148,15 +149,10 @@ plot_type_descriptions = {
 
 # --- Helper Functions ---
 def find_col(df_in, var_unit, scenario):
+    # Exact, parse-based match via varmatch (no substring over-match; raises on a true
+    # ambiguous match rather than silently returning the first column).
     var, unit = var_unit.split("__")
-    suffix = f"_{unit.lower()}"
-    matches = [
-        c for c in df_in.columns
-        if var in str(c)
-        and scenario in str(c)
-        and str(c).lower().endswith(suffix)
-    ]
-    return matches[0] if matches else None
+    return varmatch.col_for(df_in.columns, var, scenario, unit)
 
 def find_wyt_col(df_in, scenario):
     matches = [c for c in df_in.columns if f"CALSIM_WYT_SAC__{scenario}" in str(c) and "WATERYEARTYPE" in str(c)]

data/loi_mapping.json

@@ -173,37 +173,37 @@
   ],
   "NOD_Reservoir_Mean": [
     {
-      "loi": "S_SHSTA_Storage_Tier",
+      "loi": "S_SHSTA",
       "region": "NOD"
     },
     {
-      "loi": "S_TRNTY_Storage_Tier",
+      "loi": "S_TRNTY",
       "region": "NOD"
     },
     {
-      "loi": "S_OROVL_Storage_Tier",
+      "loi": "S_OROVL",
       "region": "NOD"
     },
     {
-      "loi": "S_FOLSM_Storage_Tier",
+      "loi": "S_FOLSM",
       "region": "NOD"
     }
   ],
   "SOD_Reservoir_Mean": [
     {
-      "loi": "S_MELON_Storage_Tier",
+      "loi": "S_MELON",
       "region": "SOD"
     },
     {
-      "loi": "S_MLRTN_Storage_Tier",
+      "loi": "S_MLRTN",
       "region": "SOD"
     },
     {
-      "loi": "S_SLUIS_CVP_Storage_Tier",
+      "loi": "S_SLUIS_CVP",
       "region": "SOD"
     },
     {
-      "loi": "S_SLUIS_SWP_Storage_Tier",
+      "loi": "S_SLUIS_SWP",
       "region": "SOD"
     }
   ],
@@ -828,10 +828,6 @@
       "loi": "26S_NU1",
       "region": "NOD"
     },
-    {
-      "loi": "26S_NU3",
-      "region": "NOD"
-    },
     {
       "loi": "26S_PU1",
       "region": "NOD"
@@ -849,7 +845,19 @@
       "region": "NOD"
     },
     {
-      "loi": "26S_PU99",
+      "loi": "26S_PU6",
+      "region": "NOD"
+    },
+    {
+      "loi": "50_PU",
+      "region": "NOD"
+    },
+    {
+      "loi": "60N_NU2",
+      "region": "NOD"
+    },
+    {
+      "loi": "AMADR",
       "region": "NOD"
     },
     {
@@ -857,7 +865,11 @@
       "region": "NOD"
     },
     {
-      "loi": "ELDID_NA1",
+      "loi": "BNCIA",
+      "region": "NOD"
+    },
+    {
+      "loi": "CSPSO",
       "region": "NOD"
     },
     {
@@ -872,6 +884,22 @@
       "loi": "ELDID_NU3",
       "region": "NOD"
     },
+    {
+      "loi": "GDPUD_NU",
+      "region": "NOD"
+    },
+    {
+      "loi": "GRSVL",
+      "region": "NOD"
+    },
+    {
+      "loi": "JLIND",
+      "region": "NOD"
+    },
+    {
+      "loi": "MHILL_NU",
+      "region": "NOD"
+    },
     {
       "loi": "NAPA",
       "region": "NOD"
@@ -893,45 +921,37 @@
       "region": "NOD"
     },
     {
-      "loi": "UNION",
+      "loi": "TLMNE",
       "region": "NOD"
-    }
-  ],
-  "SOD_DW_Mean": [
-    {
-      "loi": "50_PU",
-      "region": "SOD"
     },
     {
-      "loi": "60N_NU1",
-      "region": "SOD"
-    },
-    {
-      "loi": "60N_NU2",
-      "region": "SOD"
+      "loi": "TVAFB",
+      "region": "NOD"
     },
     {
-      "loi": "60S_NU1",
-      "region": "SOD"
+      "loi": "UNION",
+      "region": "NOD"
     },
     {
-      "loi": "61_NU2",
-      "region": "SOD"
+      "loi": "UPANG",
+      "region": "NOD"
     },
     {
-      "loi": "62_NU",
-      "region": "SOD"
+      "loi": "VLLJO",
+      "region": "NOD"
     },
     {
-      "loi": "71_NU",
-      "region": "SOD"
-    },
+      "loi": "WLDWD",
+      "region": "NOD"
+    }
+  ],
+  "SOD_DW_Mean": [
     {
-      "loi": "72_NU",
+      "loi": "60S_NU1",
       "region": "SOD"
     },
     {
-      "loi": "72_PU",
+      "loi": "61_NU2",
       "region": "SOD"
     },
     {
@@ -942,18 +962,10 @@
       "loi": "ACFC",
       "region": "SOD"
     },
-    {
-      "loi": "AMADR",
-      "region": "SOD"
-    },
     {
       "loi": "ANTOC",
       "region": "SOD"
     },
-    {
-      "loi": "BNCIA",
-      "region": "SOD"
-    },
     {
       "loi": "CCWD",
       "region": "SOD"
@@ -967,11 +979,7 @@
       "region": "SOD"
     },
     {
-      "loi": "CSPSO",
-      "region": "SOD"
-    },
-    {
-      "loi": "CSTIC",
+      "loi": "EBMUD",
       "region": "SOD"
     },
     {
@@ -983,11 +991,11 @@
       "region": "SOD"
     },
     {
-      "loi": "ESB414",
+      "loi": "ESB355",
       "region": "SOD"
     },
     {
-      "loi": "ESB415",
+      "loi": "ESB414",
       "region": "SOD"
     },
     {
@@ -998,18 +1006,6 @@
       "loi": "FRFLD",
       "region": "SOD"
     },
-    {
-      "loi": "GDPUD_NU",
-      "region": "SOD"
-    },
-    {
-      "loi": "GRSVL",
-      "region": "SOD"
-    },
-    {
-      "loi": "JLIND",
-      "region": "SOD"
-    },
     {
       "loi": "KCWA",
       "region": "SOD"
@@ -1027,31 +1023,19 @@
       "region": "SOD"
     },
     {
-      "loi": "SCVWD",
-      "region": "SOD"
-    },
-    {
-      "loi": "SVWRD",
-      "region": "SOD"
-    },
-    {
-      "loi": "TLMNE",
-      "region": "SOD"
-    },
-    {
-      "loi": "TVAFB",
+      "loi": "SBCWD",
       "region": "SOD"
     },
     {
-      "loi": "UPANG",
+      "loi": "SCVWD",
       "region": "SOD"
     },
     {
-      "loi": "VLLJO",
+      "loi": "SVWRD",
       "region": "SOD"
     },
     {
-      "loi": "WLDWD",
+      "loi": "WSB032",
       "region": "SOD"
     }
   ],

plines.py

@@ -43,12 +43,9 @@ for _, _row in _tier_desc_df.iterrows():
 
 # --- Scenario Descriptions ---
 try:
-    _df_scen = pd.read_csv("data/coeqwal_cs3_scenario_listing_v5.csv", encoding="utf-8")
-except Exception:
-    try:
-        _df_scen = pd.read_csv("data/coeqwal_cs3_scenario_listing_v5.csv", encoding="latin1")
-    except Exception:
-        _df_scen = pd.DataFrame()
+    _df_scen = pd.read_csv("data/coeqwal_cs3_scenario_listing_v7.csv", encoding="utf-8")
+except UnicodeDecodeError:
+    _df_scen = pd.read_csv("data/coeqwal_cs3_scenario_listing_v7.csv", encoding="latin1")
 
 # --- Variable Descriptions ---
 try:

radar.py

@@ -1,726 +1,727 @@
-import io
-import base64
-
-import numpy as np
-import pandas as pd
-import plotly.graph_objs as go
-from dash import dcc, html, dash_table
-from dash.dash_table.Format import Format, Scheme
-from dash.dependencies import Input, Output, State
-from scipy.spatial import ConvexHull
-
-from theme import (
-    SCENARIO_COLORS, BRAND_TEAL, TEXT_MUTED, FONT_STACK, GRID_COLOR,
-    SECTION_HEADER, DESCRIPTION_STYLE, LABEL_STYLE, DANGER_RED, MODERN_CARD,
-    PRIMARY_BUTTON, BORDER_LIGHT,
-)
-from downloads import download_buttons, register_plotly_png_callback, register_base64_png_callback
-# contibuous or discrete tiers
-ContinuousTiers = True
-if ContinuousTiers:
-    tier_data = "data/tier_df_continuous.csv"
-else:
-        tier_data = "data/tier_df.csv"
-
-# --- Tier Data (single pre-computed CSV from MergedMetrics.ipynb) ---
-tier_df = pd.read_csv(tier_data)
-
-ALL_TIER_COLS = [c for c in tier_df.columns if c != "scenario" and not c.endswith("_Std")]
-
-# --- Scenario Descriptions ---
-try:
-    _df_scen = pd.read_csv("data/coeqwal_cs3_scenario_listing_v5.csv", encoding="utf-8")
-except Exception:
-    try:
-        _df_scen = pd.read_csv("data/coeqwal_cs3_scenario_listing_v5.csv", encoding="latin1")
-    except Exception:
-        _df_scen = pd.DataFrame()
-CORE_TIER_COLS = ["NOD_GW_Mean", "SOD_GW_Mean", "NOD_Reservoir_Mean", "SOD_Reservoir_Mean", "Exports_and_Salinity", "InDelta_Salinity"]
-
-RADAR_PRESETS = {
-    "All (14)": ALL_TIER_COLS,
-}
-
-TIER_LABELS = {
-    "NOD_GW_Mean": "NOD Groundwater", "SOD_GW_Mean": "SOD Groundwater",
-    "NOD_Reservoir_Mean": "NOD Reservoir", "SOD_Reservoir_Mean": "SOD Reservoir",
-    "Exports_and_Salinity": "Exports and Salinity", "InDelta_Salinity": "In-Delta Salinity",
-    "NOD_Ag_Mean": "NOD Agriculture", "SOD_Ag_Mean": "SOD Agriculture",
-    "NOD_DW_Mean": "NOD Drinking Water", "SOD_DW_Mean": "SOD Drinking Water",
-    "NOD_Eflows_Mean": "NOD Env. Flows", "SOD_Eflows_Mean": "SOD Env. Flows",
-    "Delta_Ecology": "Delta Ecology", "Salmon_Abundance": "Salmon Abundance",
-}
-
-RADAR_SCENARIOS = sorted(tier_df["scenario"].tolist())
-
-# --- Tier Descriptions (hover text from tiers_descriptions.csv) ---
-_tier_desc_df = pd.read_csv("data/tiers_descriptions.csv")
-_tier_desc_df.columns = _tier_desc_df.columns.str.strip()
-_tier_desc_df["Outcomes/ Tiers"] = _tier_desc_df["Outcomes/ Tiers"].str.strip()
-
-_COL_TO_DESC_KEY = {
-    "NOD_GW_Mean": "NOD GW", "SOD_GW_Mean": "SOD GW",
-    "NOD_Reservoir_Mean": "NOD Reservoir", "SOD_Reservoir_Mean": "SOD Reservoir",
-    "Exports_and_Salinity": "Exports and Salinity", "InDelta_Salinity": "InDelta Salinity",
-    "NOD_Ag_Mean": "NOD Ag", "SOD_Ag_Mean": "SOD Ag",
-    "NOD_DW_Mean": "NOD DW", "SOD_DW_Mean": "SOD DW",
-    "NOD_Eflows_Mean": "NOD Eflows", "SOD_Eflows_Mean": "SOD Eflows",
-    "Delta_Ecology": "Delta Ecology", "Salmon_Abundance": "Salmon Abundance",
-}
-
-_AXIS_DESCRIPTIONS = {}
-_TIER_DEFINITIONS = {}
-for _, _row in _tier_desc_df.iterrows():
-    _key = _row["Outcomes/ Tiers"]
-    _AXIS_DESCRIPTIONS[_key] = str(_row["Description"]).strip()
-    _TIER_DEFINITIONS[_key] = {1: str(_row["Tier1"]).strip(), 2: str(_row["Tier2"]).strip(), 3: str(_row["Tier3"]).strip(), 4: str(_row["Tier4"]).strip()}
-
-
-def _wrap_hover(text, width=60):
-    """Wrap text for hover tooltips."""
-    words = text.split()
-    lines, current, length = [], [], 0
-    for word in words:
-        if length + len(word) + (1 if current else 0) > width:
-            lines.append(" ".join(current))
-            current, length = [word], len(word)
-        else:
-            current.append(word)
-            length += len(word) + (1 if len(current) > 1 else 0)
-    if current:
-        lines.append(" ".join(current))
-    return "<br>".join(lines)
-
-
-# --- Table Styling ---
-_TABLE_HEADER = {"backgroundColor": BRAND_TEAL, "color": "white", "fontWeight": "600", "fontSize": "12px", "textAlign": "center", "fontFamily": FONT_STACK}
-_TABLE_CELL = {"fontSize": "12px", "textAlign": "center", "padding": "8px 12px", "fontFamily": FONT_STACK, "border": f"1px solid {BORDER_LIGHT}"}
-
-
-# --- Polygon Area (Shoelace on polar coords) ---
-def compute_polygon_area(r_values, n_axes):
-    """Shoelace formula on a closed polar polygon with equally-spaced angles."""
-    angles = np.linspace(0, 2 * np.pi, n_axes, endpoint=False)
-    x = r_values * np.cos(angles)
-    y = r_values * np.sin(angles)
-    x_c, y_c = np.append(x, x[0]), np.append(y, y[0])
-    return 0.5 * abs(np.sum(x_c[:-1] * y_c[1:] - x_c[1:] * y_c[:-1]))
-
-
-def compute_scenario_areas(radar_df, cols, scenario_col="scenario", max_tier=4):
-    """Returns {scenario: {"area": float, "pct": float}} for every row in radar_df."""
-    invert = lambda x: (max_tier + 1) - x
-    n = len(cols)
-    max_area = 0.5 * n * max_tier**2 * np.sin(2 * np.pi / n) if n >= 3 else 1.0
-    areas = {}
-    for _, row in radar_df.iterrows():
-        scen = row[scenario_col]
-        inv = np.clip(invert(row[cols].values.astype(float)), 1, max_tier)
-        area = compute_polygon_area(inv, n)
-        areas[scen] = {"area": round(area, 3), "pct": round(100.0 * area / max_area, 1)}
-    return areas
-
-def _polygon_perimeter(points):
-    diffs = points - np.roll(points, -1, axis=0)
-    return np.sum(np.sqrt((diffs ** 2).sum(axis=1)))
-
-def compute_scenario_convexity(radar_df, cols, scenario_col="scenario", max_tier=4):
-    invert = lambda x: (max_tier + 1) - x
-    n = len(cols)
-    angles = [2 * np.pi * i / n - np.pi / 2 for i in range(n)]
-    convexity = {}
-    for _, row in radar_df.iterrows():
-        scen = row[scenario_col]
-        inv = np.clip(invert(row[cols].values.astype(float)), 1, max_tier)
-        points = np.array([[r * np.cos(a), r * np.sin(a)] for r, a in zip(inv, angles)])
-        try:
-            hull = ConvexHull(points)
-            hull_perim = _polygon_perimeter(points[hull.vertices])
-            poly_perim = _polygon_perimeter(points)
-            convexity[scen] = round((hull_perim / poly_perim) * 100, 1)
-        except Exception:
-            convexity[scen] = float('nan')
-    return convexity
-
-def compute_scenario_area_convexity(radar_df, cols, scenario_col="scenario", max_tier=4):
-    invert = lambda x: (max_tier + 1) - x
-    n = len(cols)
-    angles = [2 * np.pi * i / n - np.pi / 2 for i in range(n)]
-    area_convexity = {}
-    for _, row in radar_df.iterrows():
-        scen = row[scenario_col]
-        inv = np.clip(invert(row[cols].values.astype(float)), 1, max_tier)
-        points = np.array([[r * np.cos(a), r * np.sin(a)] for r, a in zip(inv, angles)])
-        try:
-            x, y = points[:, 0], points[:, 1]
-            x_c, y_c = np.append(x, x[0]), np.append(y, y[0])
-            poly_area = 0.5 * abs(np.sum(x_c[:-1] * y_c[1:] - x_c[1:] * y_c[:-1]))
-            hull = ConvexHull(points)
-            hull_pts = points[hull.vertices]
-            hx, hy = hull_pts[:, 0], hull_pts[:, 1]
-            hx_c, hy_c = np.append(hx, hx[0]), np.append(hy, hy[0])
-            hull_area = 0.5 * abs(np.sum(hx_c[:-1] * hy_c[1:] - hx_c[1:] * hy_c[:-1]))
-            area_convexity[scen] = round((poly_area / hull_area) * 100, 1)
-        except Exception:
-            area_convexity[scen] = float('nan')
-    return area_convexity
-
-# --- Matplotlib Polar Distribution Render ---
-def render_distribution_png(radar_df, cols, scenarios, colors, labels, max_tier=4):
-    """Render a polar radar with KDE violins + histogram bars along each axis, as base64 PNG."""
-    import matplotlib
-    matplotlib.use("Agg")
-    import matplotlib.pyplot as plt
-
-    try:
-        from scipy.stats import gaussian_kde
-        has_scipy = True
-    except ImportError:
-        has_scipy = False
-
-    n_axes = len(cols)
-    angles = np.linspace(0, 2 * np.pi, n_axes, endpoint=False)
-    invert = lambda x: (max_tier + 1) - x
-
-    fig = plt.figure(figsize=(9, 9))
-    ax = fig.add_subplot(111, polar=True)
-    ax.set_theta_offset(np.pi / 2)
-    ax.set_theta_direction(-1)
-
-    # Radial grid: tier rings
-    ax.set_ylim(0, max_tier + 0.5)
-    ax.set_yticks([1, 2, 3, 4])
-    ax.set_yticklabels(["Tier 4", "Tier 3", "Tier 2", "Tier 1"], fontsize=9, color="#94A3B8")
-    ax.set_xticks(angles)
-    ax.set_xticklabels([TIER_LABELS.get(c, c) for c in cols], fontsize=10, color=BRAND_TEAL, fontweight="600")
-    ax.grid(True, color="#E2E8F0", linewidth=0.8)
-    ax.spines["polar"].set_color("#E2E8F0")
-
-    # Draw KDE violins + histogram bars along each axis (matched to coeqwalpackage/plotting.py)
-    violin_width = 0.20
-    kde_bw = 0.25
-    bin_width = 0.1
-    for idx, c in enumerate(cols):
-        all_vals = invert(radar_df[c].dropna().values)
-        all_vals = np.clip(all_vals, 1, max_tier)
-        if len(all_vals) < 2:
-            continue
-        angle = angles[idx]
-
-        # KDE violin (symmetric fill around axis)
-        if has_scipy and len(all_vals) >= 3:
-            try:
-                kde = gaussian_kde(all_vals, bw_method=kde_bw)
-                y_range = np.linspace(0.5, max_tier + 0.5, 50)
-                density = kde(y_range)
-                density = density / density.max() * violin_width
-                left_angles = angle - density
-                right_angles = angle + density
-                verts_theta = np.concatenate([left_angles, right_angles[::-1]])
-                verts_r = np.concatenate([y_range, y_range[::-1]])
-                ax.fill(verts_theta, verts_r, alpha=0.25, color=BRAND_TEAL, edgecolor=BRAND_TEAL, linewidth=0.5)
-            except Exception:
-                pass
-
-        # Histogram bars along axis
-        hist_edges = np.arange(0.5, max_tier + 0.5 + bin_width, bin_width)
-        counts, edges = np.histogram(all_vals, bins=hist_edges)
-        if counts.max() > 0:
-            for i_bin, count in enumerate(counts):
-                if count > 0:
-                    bin_center = (edges[i_bin] + edges[i_bin + 1]) / 2
-                    bar_w = (count / counts.max()) * violin_width
-                    bar_h = bin_width * 0.9
-                    ax.fill([angle - bar_w, angle + bar_w, angle + bar_w, angle - bar_w], [bin_center - bar_h / 2, bin_center - bar_h / 2, bin_center + bar_h / 2, bin_center + bar_h / 2], alpha=0.35, color=BRAND_TEAL, edgecolor=BRAND_TEAL, linewidth=0.5)
-
-    # Build dot size thresholds per column from _Std columns (if present)
-    max_val = (max_tier - 1) / 2  # = 1.5 for max_tier=4
-    dot_size_map = {}
-    has_std = any(c.endswith("_Std") for c in radar_df.columns)
-    for col in cols:
-        std_col = col.replace("_Mean", "_Std") if "_Mean" in col else col + "_Std"
-        if std_col not in radar_df.columns:
-            continue
-        std_vals = radar_df[std_col].dropna().values.astype(float)
-        if len(std_vals) < 3:
-            continue
-        dot_size_map[col] = {"low": max_val / 3, "mid": 2 * max_val / 3}
-
-    # Highlighted scenario polygons
-    for i, scen in enumerate(scenarios):
-        row = radar_df[radar_df["scenario"] == scen]
-        if row.empty:
-            continue
-        raw = row[cols].values.flatten().astype(float)
-        inv = np.clip(invert(raw), 1, max_tier)
-        inv_closed = np.append(inv, inv[0])
-        angles_closed = np.append(angles, angles[0])
-        ax.plot(angles_closed, inv_closed, color=colors[i], linewidth=2.5, label=labels[i], zorder=5)
-        ax.fill(angles_closed, inv_closed, color=colors[i], alpha=0.06, zorder=4)
-        # Per-axis dot sizing driven by std
-        for col, angle, r in zip(cols, angles, inv):
-            std_col = col.replace("_Mean", "_Std") if "_Mean" in col else col + "_Std"
-            thresholds = dot_size_map.get(col)
-            if thresholds is None or std_col not in radar_df.columns:
-                ms = 7
-            else:
-                std_val = row[std_col].values[0] if std_col in row.columns else None
-                if std_val is None or (hasattr(std_val, '__float__') and np.isnan(float(std_val))):
-                    ms = 7
-                elif float(std_val) <= thresholds["low"]:
-                    ms = 5
-                elif float(std_val) <= thresholds["mid"]:
-                    ms = 10
-                else:
-                    ms = 15
-            ax.plot(angle, r, marker="o", color=colors[i], markersize=ms,
-                    markeredgecolor="white", markeredgewidth=1, zorder=6)
-
-    from matplotlib.lines import Line2D
-    if scenarios:
-        scenario_legend = ax.legend(loc="upper right", bbox_to_anchor=(1.25, 1.1), fontsize=10, frameon=False)
-        if has_std and dot_size_map:
-            size_legend_elements = [
-                Line2D([0], [0], marker="o", color="gray", label="Low variability", markersize=5, linestyle="None"),
-                Line2D([0], [0], marker="o", color="gray", label="Med variability", markersize=10, linestyle="None"),
-                Line2D([0], [0], marker="o", color="gray", label="High variability", markersize=15, linestyle="None"),
-            ]
-            size_legend = ax.legend(handles=size_legend_elements, title="Dot size (Std Dev)",
-                                    loc="lower right", bbox_to_anchor=(1.25, 0.0), fontsize=9, title_fontsize=10, frameon=False)
-            ax.add_artist(size_legend)
-            ax.add_artist(scenario_legend)
-
-    plt.tight_layout()
-    buf = io.BytesIO()
-    fig.savefig(buf, format="png", dpi=140, bbox_inches="tight")
-    plt.close(fig)
-    buf.seek(0)
-    return "data:image/png;base64," + base64.b64encode(buf.read()).decode()
-
-
-# --- Empty State Helper ---
-def get_empty_radar_figure(message="Select scenarios to compare", cols=None):
-    """Returns a clean polar grid with centered watermark instead of cartesian box."""
-    max_tier = 4
-    invert = lambda x: (max_tier + 1) - x
-    use_cols = cols or ALL_TIER_COLS
-    axis_labels = [TIER_LABELS.get(c, c) for c in use_cols]
-    fig = go.Figure()
-    # Invisible trace to establish polar grid categories
-    fig.add_trace(go.Scatterpolar(
-        r=[0] * len(axis_labels), theta=axis_labels,
-        mode="markers", marker=dict(size=0, color="rgba(0,0,0,0)"),
-        showlegend=False, hoverinfo="skip"))
-    # Axis tip hover anchors - category descriptions
-    tip_r = max_tier + 0.5
-    for col, lbl in zip(use_cols, axis_labels):
-        desc_key = _COL_TO_DESC_KEY.get(col)
-        if desc_key and desc_key in _AXIS_DESCRIPTIONS:
-            hover_text = f"<b>{lbl}</b><br>{_wrap_hover(_AXIS_DESCRIPTIONS[desc_key])}"
-            fig.add_trace(go.Scatterpolar(
-                r=[tip_r], theta=[lbl], mode="markers",
-                marker=dict(size=18, color="rgba(0,0,0,0.01)", symbol="circle"),
-                showlegend=False, hovertemplate=hover_text + "<extra></extra>",
-                hoverlabel=dict(bgcolor="white", bordercolor="grey", font=dict(size=12, color="black"))))
-    # Tier ring hover anchors - tier definitions at each axis x tier intersection
-    for col, lbl in zip(use_cols, axis_labels):
-        desc_key = _COL_TO_DESC_KEY.get(col)
-        if not desc_key or desc_key not in _TIER_DEFINITIONS:
-            continue
-        tier_defs = _TIER_DEFINITIONS[desc_key]
-        for tier in range(1, max_tier + 1):
-            inv_r = invert(tier)
-            tier_text = tier_defs.get(tier, "")
-            hover_text = f"<b>{lbl} - Tier {tier}</b><br>{_wrap_hover(tier_text)}"
-            fig.add_trace(go.Scatterpolar(
-                r=[inv_r], theta=[lbl], mode="markers",
-                marker=dict(size=18, color="rgba(0,0,0,0.01)", symbol="circle"),
-                showlegend=False, hovertemplate=hover_text + "<extra></extra>",
-                hoverlabel=dict(bgcolor="white", bordercolor="grey", font=dict(size=12, color="black"))))
-    fig.update_layout(
-        polar=dict(
-            radialaxis=dict(
-                range=[0, 4.5], tickvals=[1, 2, 3, 4],
-                ticktext=["Tier 4", "Tier 3", "Tier 2", "Tier 1"],
-                showline=False, gridcolor=GRID_COLOR),
-            angularaxis=dict(
-                direction="clockwise", gridcolor=GRID_COLOR,
-                tickfont=dict(size=13, color=BRAND_TEAL, family=FONT_STACK))),
-        annotations=[dict(
-            text=message, xref="paper", yref="paper", x=0.5, y=0.08,
-            showarrow=False, font=dict(size=14, color="#A0AEC0"),
-            xanchor="center", yanchor="middle")],
-        showlegend=False, dragmode=False,
-        margin=dict(t=30, b=80, l=60, r=60),
-        height=700, autosize=True)
-    return fig
-
-
-# --- Figure Builder ---
-def build_radar_figure(radar_df, cols, scenario_col, highlight_scenarios,
-                       highlight_colors, highlight_labels, title, max_tier=4, areas=None):
-    valid_scenarios = [s for s in highlight_scenarios if s in radar_df[scenario_col].values]
-    if len(valid_scenarios) < 1 or len(cols) < 3:
-        return get_empty_radar_figure()
-
-    invert = lambda x: (max_tier + 1) - x
-    axis_labels = [TIER_LABELS.get(c, c) for c in cols]
-    axis_labels_closed = axis_labels + [axis_labels[0]]
-
-    fig = go.Figure()
-
-    # Envelope: shaded band showing min/max range across ALL scenarios
-    all_data = radar_df.dropna(subset=cols)
-    if len(all_data) > 0:
-        raw_min = all_data[cols].min().values
-        raw_max = all_data[cols].max().values
-        inv_inner = np.clip(invert(raw_max), 1, max_tier)
-        inv_outer = np.clip(invert(raw_min), 1, max_tier)
-        inv_inner_closed = np.append(inv_inner, inv_inner[0]).tolist()
-        inv_outer_closed = np.append(inv_outer, inv_outer[0]).tolist()
-
-        fig.add_trace(go.Scatterpolar(
-            r=inv_inner_closed, theta=axis_labels_closed,
-            mode="lines", line=dict(color="rgba(0,0,0,0)", width=0),
-            showlegend=False, hoverinfo="skip"))
-        fig.add_trace(go.Scatterpolar(
-            r=inv_outer_closed, theta=axis_labels_closed,
-            mode="lines", fill="tonext",
-            fillcolor="rgba(19, 87, 115, 0.08)",
-            line=dict(color="rgba(19, 87, 115, 0.2)", width=1),
-            name="All Scenarios Range", hoverinfo="skip"))
-
-    # Highlighted scenario traces
-    for sc_id in valid_scenarios:
-        sc_idx = valid_scenarios.index(sc_id)
-        row = radar_df[radar_df[scenario_col] == sc_id]
-        if row.empty:
-            continue
-        raw_vals = row[cols].values.flatten().tolist()
-        inv_vals = np.clip(invert(row[cols].values.flatten()), 1, max_tier).tolist()
-        inv_vals_closed = inv_vals + [inv_vals[0]]
-
-        area_info = areas.get(sc_id, {}) if areas else {}
-        area_suffix = f"<br>Radar Area: {area_info['pct']:.1f}%" if area_info else ""
-        hover_texts = [f"{highlight_labels[sc_idx]}<br>{lbl}: Tier {rv:.1f}{area_suffix}" for lbl, rv in zip(axis_labels, raw_vals)]
-        hover_texts.append(hover_texts[0])
-
-        legend_name = f"{highlight_labels[sc_idx]} ({area_info['pct']:.0f}%)" if area_info else highlight_labels[sc_idx]
-        color = highlight_colors[sc_idx]
-        fig.add_trace(go.Scatterpolar(
-            r=inv_vals_closed, theta=axis_labels_closed,
-            mode="lines+markers",
-            line=dict(color=color, width=2.5),
-            marker=dict(size=8, color=color, line=dict(color="white", width=1)),
-            name=legend_name,
-            text=hover_texts, hoverinfo="text"))
-
-    # Axis tip hover anchors - category descriptions
-    tip_r = max_tier + 0.5
-    for i, (col, lbl) in enumerate(zip(cols, axis_labels)):
-        desc_key = _COL_TO_DESC_KEY.get(col)
-        if desc_key and desc_key in _AXIS_DESCRIPTIONS:
-            hover_text = f"<b>{lbl}</b><br>{_wrap_hover(_AXIS_DESCRIPTIONS[desc_key])}"
-            fig.add_trace(go.Scatterpolar(
-                r=[tip_r], theta=[lbl], mode="markers",
-                marker=dict(size=18, color="rgba(0,0,0,0.01)", symbol="circle"),
-                showlegend=False, hovertemplate=hover_text + "<extra></extra>",
-                hoverlabel=dict(bgcolor="white", bordercolor="grey", font=dict(size=12, color="black"))))
-
-    # Tier ring hover anchors - tier definitions at each axis x tier intersection
-    for i, (col, lbl) in enumerate(zip(cols, axis_labels)):
-        desc_key = _COL_TO_DESC_KEY.get(col)
-        if not desc_key or desc_key not in _TIER_DEFINITIONS:
-            continue
-        tier_defs = _TIER_DEFINITIONS[desc_key]
-        for tier in range(1, max_tier + 1):
-            inv_r = invert(tier)
-            tier_text = tier_defs.get(tier, "")
-            hover_text = f"<b>{lbl} - Tier {tier}</b><br>{_wrap_hover(tier_text)}"
-            fig.add_trace(go.Scatterpolar(
-                r=[inv_r], theta=[lbl], mode="markers",
-                marker=dict(size=18, color="rgba(0,0,0,0.01)", symbol="circle"),
-                showlegend=False, hovertemplate=hover_text + "<extra></extra>",
-                hoverlabel=dict(bgcolor="white", bordercolor="grey", font=dict(size=12, color="black"))))
-
-    fig.update_layout(
-        polar=dict(
-            radialaxis=dict(
-                range=[0, max_tier + 0.5],
-                tickvals=[1, 2, 3, 4],
-                ticktext=["Tier 4", "Tier 3", "Tier 2", "Tier 1"],
-                showline=False, gridcolor=GRID_COLOR),
-            angularaxis=dict(
-                direction="clockwise", gridcolor=GRID_COLOR,
-                tickfont=dict(size=13, color=BRAND_TEAL, family=FONT_STACK))),
-        showlegend=True, dragmode=False,
-        legend=dict(orientation="h", yanchor="top", y=-0.12, xanchor="center", x=0.5, font=dict(size=12, color=TEXT_MUTED)),
-        margin=dict(t=30, b=80, l=60, r=60),
-        height=700, autosize=True)
-    return fig
-
-
-# --- Sidebar Controls (for the sidebar) ---
-def get_sidebar_controls(scen_groups_store_init):
-    group_opts = [{"label": k, "value": k} for k in sorted(scen_groups_store_init.keys())]
-    scenario_opts = [{"label": s, "value": s} for s in RADAR_SCENARIOS]
-    axes_opts = [{"label": TIER_LABELS.get(c, c), "value": c} for c in ALL_TIER_COLS]
-
-    return html.Div([
-        html.Div("Scenario Group", style=SECTION_HEADER),
-        dcc.Dropdown(id="radar-group-dropdown", options=group_opts, placeholder="Choose group..."),
-        html.Div(id="radar-group-desc", style=DESCRIPTION_STYLE),
-        html.Button("Add to Selection", id="radar-add-group-btn", n_clicks=0, className="btn-primary", style={**PRIMARY_BUTTON, "marginBottom": "16px"}),
-
-        html.Div("Scenarios", style=SECTION_HEADER),
-        dcc.Dropdown(id="radar-scenario-dropdown", options=scenario_opts, value=[], multi=True, placeholder="Add/remove scenarios..."),
-        html.Div(id="radar-scenario-desc", style=DESCRIPTION_STYLE),
-
-        html.Div("Tier Groups", style=SECTION_HEADER),
-        dcc.Dropdown(id="radar-tier-preset", options=[{"label": k, "value": k} for k in RADAR_PRESETS], placeholder="Choose group...", clearable=True),
-
-        html.Div("Tier Categories", style=SECTION_HEADER),
-        dcc.Dropdown(id="radar-axes-checklist", options=axes_opts, value=list(ALL_TIER_COLS), multi=True, placeholder="Select tiers..."),
-        html.Div(id="radar-axes-warning", style={"color": DANGER_RED, "marginTop": "5px", "fontSize": "12px", "fontWeight": "500"}),
-
-        html.Div(
-            "Tier 1 (best) is outermost. Shaded band shows full scenario range. Click legend to toggle.",
-            style={**DESCRIPTION_STYLE, "marginTop": "16px"}),
-    ])
-
-
-# --- Main Content (chart area) ---
-def get_content():
-    _toggle_style = {"backgroundColor": "white", "color": BRAND_TEAL, "border": f"1px solid {BORDER_LIGHT}", "borderRadius": "6px", "padding": "8px 20px", "fontSize": "13px", "fontWeight": "600", "cursor": "pointer"}
-    _area_card = {"backgroundColor": "white", "border": f"1px solid {BORDER_LIGHT}", "borderRadius": "8px", "padding": "16px", "minWidth": "260px", "maxWidth": "300px", "alignSelf": "flex-start", "position": "sticky", "top": "24px"}
-    return html.Div([
-        html.H3(id="title-radar", style={"textAlign": "center", "marginTop": "0", "marginBottom": "8px", "color": BRAND_TEAL}),
-
-        # Radar chart + area panel side by side
-        html.Div(style={"display": "flex", "gap": "16px", "alignItems": "flex-start"}, children=[
-            dcc.Graph(id="plot-radar", figure=get_empty_radar_figure(), config={"scrollZoom": False, "displayModeBar": False}, responsive=True, style={"height": "75vh", "minHeight": "500px", "flex": "1"}),
-
-            # Radar Area panel (right side)
-            html.Div(id="radar-area-panel", style=_area_card, children=[
-                html.Div(style={"display": "flex", "justifyContent": "space-between", "gap": "16px", "marginBottom": "10px", "paddingBottom": "6px", "borderBottom": f"1px solid {BORDER_LIGHT}"}, children=[
-                    html.Div("Scenario", style={"fontSize": "11px", "fontWeight": "700", "color": BRAND_TEAL, "textTransform": "uppercase", "letterSpacing": "1px", "flex": "1"}),
-                    html.Div("Area", style={"fontSize": "11px", "fontWeight": "700", "color": BRAND_TEAL, "textTransform": "uppercase", "letterSpacing": "1px", "width": "60px", "textAlign": "left", "paddingLeft": "12px"}),
-                    html.Div("Per. Conv.", style={"fontSize": "11px", "fontWeight": "700", "color": BRAND_TEAL, "textTransform": "uppercase", "letterSpacing": "1px", "width": "80px", "textAlign": "left"}),
-                    html.Div("Area Conv.", style={"fontSize": "11px", "fontWeight": "700", "color": BRAND_TEAL, "textTransform": "uppercase", "letterSpacing": "1px", "width": "80px", "textAlign": "left"}),
-                ]),
-                html.Div(id="radar-area-list", children=[
-                    html.Div("Select scenarios", style={"fontSize": "12px", "color": TEXT_MUTED}),
-                ]),
-            ]),
-        ]),
-        download_buttons("plot-radar"),
-
-        # Distribution toggle
-        html.Div(style={"textAlign": "center", "marginTop": "12px"}, children=[
-            html.Button("Generate Static Plot with Overlaid KDE & Histogram Distribution", id="radar-dist-toggle", n_clicks=0, style=_toggle_style),
-        ]),
-        html.Div(id="radar-dist-container", style={"display": "none"}, children=[
-            dcc.Loading(type="circle", color=BRAND_TEAL, children=[
-                html.Img(id="radar-dist-img", style={"maxWidth": "100%", "margin": "12px auto", "display": "block"}),
-            ]),
-            download_buttons("radar-dist-img"),
-        ]),
-
-        # Data table
-        html.Div(id="radar-table-container", style={"marginTop": "20px"}, children=[
-            html.H4("Scenario Data", style={"color": BRAND_TEAL, "fontSize": "14px", "fontWeight": "600", "marginBottom": "8px"}),
-            dash_table.DataTable(id="radar-data-table", columns=[], data=[], sort_action="native", style_table={"overflowX": "auto"}, style_header=_TABLE_HEADER, style_cell=_TABLE_CELL),
-            download_buttons("radar-data-table", has_plot=False),
-        ]),
-    ])
-
-
-# --- Callbacks ---
-def register_callbacks(app, scen_groups_store_init):
-    @app.callback(
-        Output("radar-group-desc", "children"),
-        Input("radar-group-dropdown", "value"),
-        prevent_initial_call=True,
-    )
-    def show_radar_group_desc(group_name):
-        if not group_name or group_name not in scen_groups_store_init:
-            return ""
-        info = scen_groups_store_init[group_name]
-        desc = info.get("description", "")
-        scs = info.get("scenarios", [])
-        return f"{desc} ({', '.join(scs)})" if scs else desc
-
-    @app.callback(
-        Output("radar-scenario-dropdown", "value"),
-        Input("radar-add-group-btn", "n_clicks"),
-        State("radar-group-dropdown", "value"),
-        State("radar-scenario-dropdown", "value"),
-        prevent_initial_call=True,
-    )
-    def add_radar_group_to_selection(_, group_name, current):
-        from dash.exceptions import PreventUpdate
-        if not group_name or group_name not in scen_groups_store_init:
-            raise PreventUpdate
-        current = list(current or [])
-        scs = scen_groups_store_init[group_name].get("scenarios", [])
-        available = set(RADAR_SCENARIOS)
-        valid = [s for s in scs if s in available]
-        return list(dict.fromkeys(current + valid))
-
-    @app.callback(
-        Output("radar-scenario-desc", "children"),
-        Input("radar-scenario-dropdown", "value"),
-    )
-    def display_radar_scenario_desc(scen_list):
-        if not scen_list or _df_scen.empty:
-            return "Select scenarios to see descriptions"
-        col_idx = next((c for c in _df_scen.columns if "Index" in c), _df_scen.columns[0])
-        col_desc = next((c for c in _df_scen.columns if "ShortDescription" in c or "Description" in c), _df_scen.columns[1] if len(_df_scen.columns) > 1 else _df_scen.columns[0])
-        defs = _df_scen[_df_scen[col_idx].isin(scen_list)].set_index(col_idx)[col_desc].to_dict()
-        return [html.Div([html.B(f"{s}: "), html.Span(d)]) for s, d in defs.items()]
-
-    @app.callback(
-        [Output("radar-axes-checklist", "value"), Output("radar-tier-preset", "value")],
-        Input("radar-tier-preset", "value"),
-        prevent_initial_call=True,
-    )
-    def radar_preset_to_tiers(preset):
-        from dash.exceptions import PreventUpdate
-        if not preset:
-            raise PreventUpdate
-        return RADAR_PRESETS.get(preset, list(CORE_TIER_COLS)), None
-
-    @app.callback(
-        [Output("plot-radar", "figure"),
-         Output("title-radar", "children"),
-         Output("radar-axes-warning", "children"),
-         Output("radar-area-list", "children"),
-         Output("radar-data-table", "columns"),
-         Output("radar-data-table", "data")],
-        [Input("radar-scenario-dropdown", "value"),
-         Input("radar-axes-checklist", "value")],
-    )
-    def update_radar_plot(scenarios_selected, axes_selected):
-        axes_selected = list(axes_selected or [])
-        scenarios_selected = list(scenarios_selected or [])
-        empty_area = html.Div("Select scenarios", style={"fontSize": "12px", "color": TEXT_MUTED})
-        empty_table = ([], [])
-
-        if len(axes_selected) < 3:
-            warning = f"Select at least 3 tiers ({len(axes_selected)} selected)."
-            return get_empty_radar_figure(cols=axes_selected), "", warning, empty_area, *empty_table
-
-        if not scenarios_selected:
-            return get_empty_radar_figure(cols=axes_selected), "Select scenarios to compare", "", empty_area, *empty_table
-
-        # Compute areas for all scenarios (used in figure + area panel + table)
-        sel_df = tier_df[tier_df["scenario"].isin(scenarios_selected)]
-        areas = compute_scenario_areas(sel_df, axes_selected)
-        convexity = compute_scenario_convexity(sel_df, axes_selected)
-        area_convexity = compute_scenario_area_convexity(sel_df, axes_selected)
-
-        colors = [SCENARIO_COLORS[i % len(SCENARIO_COLORS)] for i in range(len(scenarios_selected))]
-        labels = list(scenarios_selected)
-        fig = build_radar_figure(tier_df, axes_selected, "scenario", scenarios_selected, colors, labels, "", areas=areas)
-        if len(fig.data) == 0:
-            return get_empty_radar_figure("No matching tier data"), "No matching tier data for selected scenarios", "", empty_area, *empty_table
-
-        title = f"Comparing {len(scenarios_selected)} Scenarios"
-
-        # Radar Area panel - sorted by area descending
-        sorted_scens = sorted(scenarios_selected, key=lambda s: areas.get(s, {}).get("pct", 0), reverse=True)
-        area_items = []
-        for i, scen in enumerate(sorted_scens):
-            pct = areas.get(scen, {}).get("pct", 0)
-            color = colors[scenarios_selected.index(scen)]
-            area_items.append(html.Div(style={"display": "flex", "alignItems": "center", "justifyContent": "space-between", "padding": "6px 0", "borderBottom": f"1px solid {BORDER_LIGHT}" if i < len(sorted_scens) - 1 else "none"}, children=[
-                html.Div(style={"display": "flex", "alignItems": "center", "gap": "8px", "flex": "1"}, children=[
-                    html.Div(style={"width": "10px", "height": "10px", "borderRadius": "50%", "backgroundColor": color, "flexShrink": "0"}),
-                    html.Span(scen, style={"fontSize": "12px", "fontWeight": "600", "color": "#1A202C"}),
-                ]),
-                html.Div(style={"display": "flex", "gap": "8px", "alignItems": "center"}, children=[
-                    html.Span(f"{pct:.1f}%", style={"fontSize": "13px", "fontWeight": "700", "color": BRAND_TEAL, "width": "60px", "textAlign": "right"}),
-                    html.Span(f"{convexity.get(scen, float('nan')):.1f}%", style={"fontSize": "13px", "fontWeight": "700", "color": BRAND_TEAL, "width": "80px", "textAlign": "right"}),
-                    html.Span(f"{area_convexity.get(scen, float('nan')):.1f}%", style={"fontSize": "13px", "fontWeight": "700", "color": BRAND_TEAL, "width": "80px", "textAlign": "left"}),
-                ]),
-            ]))
-
-        # Build table (tier data only, no area column)
-        table_cols = [{"name": "Scenario", "id": "scenario"}]
-        table_cols += [{"name": TIER_LABELS.get(c, c), "id": c, "type": "numeric", "format": Format(precision=2, scheme=Scheme.fixed)} for c in axes_selected]
-
-        table_data = []
-        for scen in scenarios_selected:
-            row = sel_df[sel_df["scenario"] == scen]
-            if row.empty:
-                continue
-            entry = {"scenario": scen}
-            for c in axes_selected:
-                entry[c] = round(float(row[c].values[0]), 2) if c in row.columns and pd.notna(row[c].values[0]) else None
-            table_data.append(entry)
-
-        return fig, title, "", area_items, table_cols, table_data
-
-    @app.callback(
-        [Output("radar-dist-container", "style"),
-         Output("radar-dist-img", "src"),
-         Output("radar-dist-toggle", "children")],
-        [Input("radar-dist-toggle", "n_clicks"),
-         Input("radar-scenario-dropdown", "value"),
-         Input("radar-axes-checklist", "value")],
-    )
-    def update_distribution_view(n_clicks, scenarios, axes):
-        visible = bool(n_clicks and n_clicks % 2 == 1)
-        btn_text = "Hide Static Plot" if visible else "Generate Static Plot with Overlaid KDE & Histogram Distribution"
-        if not visible:
-            return {"display": "none"}, "", btn_text
-        scenarios = list(scenarios or [])
-        axes = list(axes or [])
-        if len(axes) < 3 or not scenarios:
-            return {"display": "block"}, "", btn_text
-        colors = [SCENARIO_COLORS[i % len(SCENARIO_COLORS)] for i in range(len(scenarios))]
-        src = render_distribution_png(tier_df, axes, scenarios, colors, scenarios)
-        return {"display": "block"}, src, btn_text
-
-    # --- Download Callbacks ---
-    register_plotly_png_callback(app, "plot-radar")
-    register_base64_png_callback(app, "radar-dist-img", "dl-png-radar-dist-img")
-
-    @app.callback(
-        Output("dl-csv-plot-radar", "data"),
-        Input("dl-csv-btn-plot-radar", "n_clicks"),
-        [State("radar-scenario-dropdown", "value"), State("radar-axes-checklist", "value")],
-        prevent_initial_call=True,
-    )
-    def download_radar_csv(n_clicks, scenarios, axes):
-        from dash.exceptions import PreventUpdate
-        if not n_clicks or not scenarios or not axes:
-            raise PreventUpdate
-        out = tier_df[tier_df["scenario"].isin(scenarios)][["scenario"] + list(axes)]
-        return dcc.send_data_frame(out.to_csv, "radar_data.csv", index=False)
-
-    @app.callback(
-        Output("dl-csv-radar-dist-img", "data"),
-        Input("dl-csv-btn-radar-dist-img", "n_clicks"),
-        [State("radar-scenario-dropdown", "value"), State("radar-axes-checklist", "value")],
-        prevent_initial_call=True,
-    )
-    def download_dist_csv(n_clicks, scenarios, axes):
-        from dash.exceptions import PreventUpdate
-        if not n_clicks or not axes:
-            raise PreventUpdate
-        out = tier_df[["scenario"] + list(axes)]
-        return dcc.send_data_frame(out.to_csv, "radar_distribution.csv", index=False)
-
-    @app.callback(
-        Output("dl-csv-radar-data-table", "data"),
-        Input("dl-csv-btn-radar-data-table", "n_clicks"),
-        State("radar-data-table", "data"),
-        prevent_initial_call=True,
-    )
-    def download_table_csv(n_clicks, table_data):
-        from dash.exceptions import PreventUpdate
-        if not n_clicks or not table_data:
-            raise PreventUpdate
-        out = pd.DataFrame(table_data)
-        return dcc.send_data_frame(out.to_csv, "radar_table.csv", index=False)
+import io
+import base64
+
+import numpy as np
+import pandas as pd
+import plotly.graph_objs as go
+from dash import dcc, html, dash_table
+from dash.dash_table.Format import Format, Scheme
+from dash.dependencies import Input, Output, State
+from scipy.spatial import ConvexHull
+
+from theme import (
+    SCENARIO_COLORS, BRAND_TEAL, TEXT_MUTED, FONT_STACK, GRID_COLOR,
+    SECTION_HEADER, DESCRIPTION_STYLE, LABEL_STYLE, DANGER_RED, MODERN_CARD,
+    PRIMARY_BUTTON, BORDER_LIGHT,
+)
+from downloads import download_buttons, register_plotly_png_callback, register_base64_png_callback
+# contibuous or discrete tiers
+ContinuousTiers = True
+if ContinuousTiers:
+    tier_data = "data/tier_df_continuous.csv"
+else:
+        tier_data = "data/tier_df.csv"
+
+# --- Tier Data (single pre-computed CSV from MergedMetrics.ipynb) ---
+tier_df = pd.read_csv(tier_data)
+
+ALL_TIER_COLS = [c for c in tier_df.columns if c != "scenario" and not c.endswith("_Std")]
+
+# --- Scenario Descriptions ---
+try:
+    _df_scen = pd.read_csv("data/coeqwal_cs3_scenario_listing_v7.csv", encoding="utf-8")
+except UnicodeDecodeError:
+    _df_scen = pd.read_csv("data/coeqwal_cs3_scenario_listing_v7.csv", encoding="latin1")
+CORE_TIER_COLS = ["NOD_GW_Mean", "SOD_GW_Mean", "NOD_Reservoir_Mean", "SOD_Reservoir_Mean", "Exports_and_Salinity", "InDelta_Salinity"]
+
+RADAR_PRESETS = {
+    "All (14)": ALL_TIER_COLS,
+}
+
+TIER_LABELS = {
+    "NOD_GW_Mean": "NOD Groundwater", "SOD_GW_Mean": "SOD Groundwater",
+    "NOD_Reservoir_Mean": "NOD Reservoir", "SOD_Reservoir_Mean": "SOD Reservoir",
+    "Exports_and_Salinity": "Exports and Salinity", "InDelta_Salinity": "In-Delta Salinity",
+    "NOD_Ag_Mean": "NOD Agriculture", "SOD_Ag_Mean": "SOD Agriculture",
+    "NOD_DW_Mean": "NOD Drinking Water", "SOD_DW_Mean": "SOD Drinking Water",
+    "NOD_Eflows_Mean": "NOD Env. Flows", "SOD_Eflows_Mean": "SOD Env. Flows",
+    "Delta_Ecology": "Delta Ecology", "Salmon_Abundance": "Salmon Abundance",
+}
+
+RADAR_SCENARIOS = sorted(tier_df["scenario"].tolist())
+
+# --- Tier Descriptions (hover text from tiers_descriptions.csv) ---
+_tier_desc_df = pd.read_csv("data/tiers_descriptions.csv")
+_tier_desc_df.columns = _tier_desc_df.columns.str.strip()
+_tier_desc_df["Outcomes/ Tiers"] = _tier_desc_df["Outcomes/ Tiers"].str.strip()
+
+_COL_TO_DESC_KEY = {
+    "NOD_GW_Mean": "NOD GW", "SOD_GW_Mean": "SOD GW",
+    "NOD_Reservoir_Mean": "NOD Reservoir", "SOD_Reservoir_Mean": "SOD Reservoir",
+    "Exports_and_Salinity": "Exports and Salinity", "InDelta_Salinity": "InDelta Salinity",
+    "NOD_Ag_Mean": "NOD Ag", "SOD_Ag_Mean": "SOD Ag",
+    "NOD_DW_Mean": "NOD DW", "SOD_DW_Mean": "SOD DW",
+    "NOD_Eflows_Mean": "NOD Eflows", "SOD_Eflows_Mean": "SOD Eflows",
+    "Delta_Ecology": "Delta Ecology", "Salmon_Abundance": "Salmon Abundance",
+}
+
+_AXIS_DESCRIPTIONS = {}
+_TIER_DEFINITIONS = {}
+for _, _row in _tier_desc_df.iterrows():
+    _key = _row["Outcomes/ Tiers"]
+    _AXIS_DESCRIPTIONS[_key] = str(_row["Description"]).strip()
+    _TIER_DEFINITIONS[_key] = {1: str(_row["Tier1"]).strip(), 2: str(_row["Tier2"]).strip(), 3: str(_row["Tier3"]).strip(), 4: str(_row["Tier4"]).strip()}
+
+
+def _wrap_hover(text, width=60):
+    """Wrap text for hover tooltips."""
+    words = text.split()
+    lines, current, length = [], [], 0
+    for word in words:
+        if length + len(word) + (1 if current else 0) > width:
+            lines.append(" ".join(current))
+            current, length = [word], len(word)
+        else:
+            current.append(word)
+            length += len(word) + (1 if len(current) > 1 else 0)
+    if current:
+        lines.append(" ".join(current))
+    return "<br>".join(lines)
+
+
+# --- Table Styling ---
+_TABLE_HEADER = {"backgroundColor": BRAND_TEAL, "color": "white", "fontWeight": "600", "fontSize": "12px", "textAlign": "center", "fontFamily": FONT_STACK}
+_TABLE_CELL = {"fontSize": "12px", "textAlign": "center", "padding": "8px 12px", "fontFamily": FONT_STACK, "border": f"1px solid {BORDER_LIGHT}"}
+
+
+# --- Polygon Area (Shoelace on polar coords) ---
+def compute_polygon_area(r_values, n_axes):
+    """Shoelace formula on a closed polar polygon with equally-spaced angles."""
+    angles = np.linspace(0, 2 * np.pi, n_axes, endpoint=False)
+    x = r_values * np.cos(angles)
+    y = r_values * np.sin(angles)
+    x_c, y_c = np.append(x, x[0]), np.append(y, y[0])
+    return 0.5 * abs(np.sum(x_c[:-1] * y_c[1:] - x_c[1:] * y_c[:-1]))
+
+
+def compute_scenario_areas(radar_df, cols, scenario_col="scenario", max_tier=4):
+    """Returns {scenario: {"area": float, "pct": float}} for every row in radar_df."""
+    invert = lambda x: (max_tier + 1) - x
+    n = len(cols)
+    max_area = 0.5 * n * max_tier**2 * np.sin(2 * np.pi / n) if n >= 3 else 1.0
+    areas = {}
+    for _, row in radar_df.iterrows():
+        scen = row[scenario_col]
+        inv = np.clip(invert(row[cols].values.astype(float)), 1, max_tier)
+        area = compute_polygon_area(inv, n)
+        areas[scen] = {"area": round(area, 3), "pct": round(100.0 * area / max_area, 1)}
+    return areas
+
+def _polygon_perimeter(points):
+    diffs = points - np.roll(points, -1, axis=0)
+    return np.sum(np.sqrt((diffs ** 2).sum(axis=1)))
+
+def compute_scenario_convexity(radar_df, cols, scenario_col="scenario", max_tier=4):
+    invert = lambda x: (max_tier + 1) - x
+    n = len(cols)
+    angles = [2 * np.pi * i / n - np.pi / 2 for i in range(n)]
+    convexity = {}
+    for _, row in radar_df.iterrows():
+        scen = row[scenario_col]
+        inv = np.clip(invert(row[cols].values.astype(float)), 1, max_tier)
+        points = np.array([[r * np.cos(a), r * np.sin(a)] for r, a in zip(inv, angles)])
+        try:
+            hull = ConvexHull(points)
+            hull_perim = _polygon_perimeter(points[hull.vertices])
+            poly_perim = _polygon_perimeter(points)
+            convexity[scen] = round((hull_perim / poly_perim) * 100, 1)
+        except Exception:
+            convexity[scen] = float('nan')
+    return convexity
+
+def compute_scenario_area_convexity(radar_df, cols, scenario_col="scenario", max_tier=4):
+    invert = lambda x: (max_tier + 1) - x
+    n = len(cols)
+    angles = [2 * np.pi * i / n - np.pi / 2 for i in range(n)]
+    area_convexity = {}
+    for _, row in radar_df.iterrows():
+        scen = row[scenario_col]
+        inv = np.clip(invert(row[cols].values.astype(float)), 1, max_tier)
+        points = np.array([[r * np.cos(a), r * np.sin(a)] for r, a in zip(inv, angles)])
+        try:
+            x, y = points[:, 0], points[:, 1]
+            x_c, y_c = np.append(x, x[0]), np.append(y, y[0])
+            poly_area = 0.5 * abs(np.sum(x_c[:-1] * y_c[1:] - x_c[1:] * y_c[:-1]))
+            hull = ConvexHull(points)
+            hull_pts = points[hull.vertices]
+            hx, hy = hull_pts[:, 0], hull_pts[:, 1]
+            hx_c, hy_c = np.append(hx, hx[0]), np.append(hy, hy[0])
+            hull_area = 0.5 * abs(np.sum(hx_c[:-1] * hy_c[1:] - hx_c[1:] * hy_c[:-1]))
+            area_convexity[scen] = round((poly_area / hull_area) * 100, 1)
+        except Exception:
+            area_convexity[scen] = float('nan')
+    return area_convexity
+
+# --- Matplotlib Polar Distribution Render ---
+def render_distribution_png(radar_df, cols, scenarios, colors, labels, max_tier=5):
+    """Render a polar radar with KDE violins + histogram bars along each axis, as base64 PNG."""
+    import matplotlib
+    matplotlib.use("Agg")
+    import matplotlib.pyplot as plt
+
+    try:
+        from scipy.stats import gaussian_kde
+        has_scipy = True
+    except ImportError:
+        has_scipy = False
+
+    n_axes = len(cols)
+    angles = np.linspace(0, 2 * np.pi, n_axes, endpoint=False)
+    invert = lambda x: (max_tier + 1) - x
+
+    fig = plt.figure(figsize=(9, 9))
+    ax = fig.add_subplot(111, polar=True)
+    ax.set_theta_offset(np.pi / 2)
+    ax.set_theta_direction(-1)
+
+    # Radial grid: tier rings
+    ax.set_ylim(0, max_tier + 0.5)
+    ax.set_yticks([1, 2, 3, 4, 5])
+    ax.set_yticklabels(["", "Tier 4", "Tier 3", "Tier 2", "Tier 1"], fontsize=9, color="#94A3B8")
+    ax.set_xticks(angles)
+    ax.set_xticklabels([TIER_LABELS.get(c, c) for c in cols], fontsize=10, color=BRAND_TEAL, fontweight="600")
+    ax.grid(True, color="#E2E8F0", linewidth=0.8)
+    ax.spines["polar"].set_color("#E2E8F0")
+
+    # Draw KDE violins + histogram bars along each axis (matched to coeqwalpackage/plotting.py)
+    violin_width = 0.20
+    kde_bw = 0.25
+    bin_width = 0.1
+    for idx, c in enumerate(cols):
+        all_vals = invert(radar_df[c].dropna().values)
+        all_vals = np.clip(all_vals, 1, max_tier)
+        if len(all_vals) < 2:
+            continue
+        angle = angles[idx]
+
+        # KDE violin (symmetric fill around axis)
+        if has_scipy and len(all_vals) >= 3:
+            try:
+                kde = gaussian_kde(all_vals, bw_method=kde_bw)
+                y_range = np.linspace(0.5, max_tier + 0.5, 50)
+                density = kde(y_range)
+                density = density / density.max() * violin_width
+                left_angles = angle - density
+                right_angles = angle + density
+                verts_theta = np.concatenate([left_angles, right_angles[::-1]])
+                verts_r = np.concatenate([y_range, y_range[::-1]])
+                ax.fill(verts_theta, verts_r, alpha=0.25, color=BRAND_TEAL, edgecolor=BRAND_TEAL, linewidth=0.5)
+            except Exception:
+                pass
+
+        # Histogram bars along axis
+        hist_edges = np.arange(0.5, max_tier + 0.5 + bin_width, bin_width)
+        counts, edges = np.histogram(all_vals, bins=hist_edges)
+        if counts.max() > 0:
+            for i_bin, count in enumerate(counts):
+                if count > 0:
+                    bin_center = (edges[i_bin] + edges[i_bin + 1]) / 2
+                    bar_w = (count / counts.max()) * violin_width
+                    bar_h = bin_width * 0.9
+                    ax.fill([angle - bar_w, angle + bar_w, angle + bar_w, angle - bar_w], [bin_center - bar_h / 2, bin_center - bar_h / 2, bin_center + bar_h / 2, bin_center + bar_h / 2], alpha=0.35, color=BRAND_TEAL, edgecolor=BRAND_TEAL, linewidth=0.5)
+
+    # Build dot size thresholds per column from _Std columns (if present)
+    max_val = 1.5  # dot-size std thresholds stay on the 1-4 tier scale regardless of plot max_tier
+    dot_size_map = {}
+    has_std = any(c.endswith("_Std") for c in radar_df.columns)
+    for col in cols:
+        std_col = col.replace("_Mean", "_Std") if "_Mean" in col else col + "_Std"
+        if std_col not in radar_df.columns:
+            continue
+        std_vals = radar_df[std_col].dropna().values.astype(float)
+        if len(std_vals) < 3:
+            continue
+        dot_size_map[col] = {"low": max_val / 3, "mid": 2 * max_val / 3}
+
+    # Highlighted scenario polygons
+    for i, scen in enumerate(scenarios):
+        row = radar_df[radar_df["scenario"] == scen]
+        if row.empty:
+            continue
+        raw = row[cols].values.flatten().astype(float)
+        inv = np.clip(invert(raw), 1, max_tier)
+        inv_closed = np.append(inv, inv[0])
+        angles_closed = np.append(angles, angles[0])
+        ax.plot(angles_closed, inv_closed, color=colors[i], linewidth=2.5, label=labels[i], zorder=5)
+        ax.fill(angles_closed, inv_closed, color=colors[i], alpha=0.06, zorder=4)
+        # Per-axis dot sizing driven by std
+        for col, angle, r in zip(cols, angles, inv):
+            std_col = col.replace("_Mean", "_Std") if "_Mean" in col else col + "_Std"
+            thresholds = dot_size_map.get(col)
+            if thresholds is None or std_col not in radar_df.columns:
+                ms = 7
+            else:
+                std_val = row[std_col].values[0] if std_col in row.columns else None
+                if std_val is None or (hasattr(std_val, '__float__') and np.isnan(float(std_val))):
+                    ms = 7
+                elif float(std_val) <= thresholds["low"]:
+                    ms = 5
+                elif float(std_val) <= thresholds["mid"]:
+                    ms = 10
+                else:
+                    ms = 15
+            ax.plot(angle, r, marker="o", color=colors[i], markersize=ms,
+                    markeredgecolor="white", markeredgewidth=1, zorder=6)
+
+    from matplotlib.lines import Line2D
+    if scenarios:
+        scenario_legend = ax.legend(loc="upper right", bbox_to_anchor=(1.25, 1.1), fontsize=10, frameon=False)
+        if has_std and dot_size_map:
+            size_legend_elements = [
+                Line2D([0], [0], marker="o", color="gray", label="Low variability", markersize=5, linestyle="None"),
+                Line2D([0], [0], marker="o", color="gray", label="Med variability", markersize=10, linestyle="None"),
+                Line2D([0], [0], marker="o", color="gray", label="High variability", markersize=15, linestyle="None"),
+            ]
+            size_legend = ax.legend(handles=size_legend_elements, title="Dot size (Std Dev)",
+                                    loc="lower right", bbox_to_anchor=(1.25, 0.0), fontsize=9, title_fontsize=10, frameon=False)
+            ax.add_artist(size_legend)
+            ax.add_artist(scenario_legend)
+
+    plt.tight_layout()
+    buf = io.BytesIO()
+    fig.savefig(buf, format="png", dpi=140, bbox_inches="tight")
+    plt.close(fig)
+    buf.seek(0)
+    return "data:image/png;base64," + base64.b64encode(buf.read()).decode()
+
+
+# --- Empty State Helper ---
+def get_empty_radar_figure(message="Select scenarios to compare", cols=None):
+    """Returns a clean polar grid with centered watermark instead of cartesian box."""
+    max_tier = 5
+    invert = lambda x: (max_tier + 1) - x
+    use_cols = cols or ALL_TIER_COLS
+    axis_labels = [TIER_LABELS.get(c, c) for c in use_cols]
+    fig = go.Figure()
+    # Invisible trace to establish polar grid categories
+    fig.add_trace(go.Scatterpolar(
+        r=[0] * len(axis_labels), theta=axis_labels,
+        mode="markers", marker=dict(size=0, color="rgba(0,0,0,0)"),
+        showlegend=False, hoverinfo="skip"))
+    # Axis tip hover anchors - category descriptions
+    tip_r = max_tier + 0.5
+    for col, lbl in zip(use_cols, axis_labels):
+        desc_key = _COL_TO_DESC_KEY.get(col)
+        if desc_key and desc_key in _AXIS_DESCRIPTIONS:
+            hover_text = f"<b>{lbl}</b><br>{_wrap_hover(_AXIS_DESCRIPTIONS[desc_key])}"
+            fig.add_trace(go.Scatterpolar(
+                r=[tip_r], theta=[lbl], mode="markers",
+                marker=dict(size=18, color="rgba(0,0,0,0.01)", symbol="circle"),
+                showlegend=False, hovertemplate=hover_text + "<extra></extra>",
+                hoverlabel=dict(bgcolor="white", bordercolor="grey", font=dict(size=12, color="black"))))
+    # Tier ring hover anchors - tier definitions at each axis x tier intersection
+    for col, lbl in zip(use_cols, axis_labels):
+        desc_key = _COL_TO_DESC_KEY.get(col)
+        if not desc_key or desc_key not in _TIER_DEFINITIONS:
+            continue
+        tier_defs = _TIER_DEFINITIONS[desc_key]
+        for tier in range(1, max_tier + 1):
+            tier_text = tier_defs.get(tier, "")
+            if not tier_text:
+                continue
+            inv_r = invert(tier)
+            hover_text = f"<b>{lbl} - Tier {tier}</b><br>{_wrap_hover(tier_text)}"
+            fig.add_trace(go.Scatterpolar(
+                r=[inv_r], theta=[lbl], mode="markers",
+                marker=dict(size=18, color="rgba(0,0,0,0.01)", symbol="circle"),
+                showlegend=False, hovertemplate=hover_text + "<extra></extra>",
+                hoverlabel=dict(bgcolor="white", bordercolor="grey", font=dict(size=12, color="black"))))
+    fig.update_layout(
+        polar=dict(
+            radialaxis=dict(
+                range=[0, max_tier + 0.5], tickvals=[1, 2, 3, 4, 5],
+                ticktext=["", "Tier 4", "Tier 3", "Tier 2", "Tier 1"],
+                showline=False, gridcolor=GRID_COLOR),
+            angularaxis=dict(
+                direction="clockwise", gridcolor=GRID_COLOR,
+                tickfont=dict(size=13, color=BRAND_TEAL, family=FONT_STACK))),
+        annotations=[dict(
+            text=message, xref="paper", yref="paper", x=0.5, y=0.08,
+            showarrow=False, font=dict(size=14, color="#A0AEC0"),
+            xanchor="center", yanchor="middle")],
+        showlegend=False, dragmode=False,
+        margin=dict(t=30, b=80, l=60, r=60),
+        height=700, autosize=True)
+    return fig
+
+
+# --- Figure Builder ---
+def build_radar_figure(radar_df, cols, scenario_col, highlight_scenarios,
+                       highlight_colors, highlight_labels, title, max_tier=5, areas=None):
+    valid_scenarios = [s for s in highlight_scenarios if s in radar_df[scenario_col].values]
+    if len(valid_scenarios) < 1 or len(cols) < 3:
+        return get_empty_radar_figure()
+
+    invert = lambda x: (max_tier + 1) - x
+    axis_labels = [TIER_LABELS.get(c, c) for c in cols]
+    axis_labels_closed = axis_labels + [axis_labels[0]]
+
+    fig = go.Figure()
+
+    # Envelope: shaded band showing min/max range across ALL scenarios
+    all_data = radar_df.dropna(subset=cols)
+    if len(all_data) > 0:
+        raw_min = all_data[cols].min().values
+        raw_max = all_data[cols].max().values
+        inv_inner = np.clip(invert(raw_max), 1, max_tier)
+        inv_outer = np.clip(invert(raw_min), 1, max_tier)
+        inv_inner_closed = np.append(inv_inner, inv_inner[0]).tolist()
+        inv_outer_closed = np.append(inv_outer, inv_outer[0]).tolist()
+
+        fig.add_trace(go.Scatterpolar(
+            r=inv_inner_closed, theta=axis_labels_closed,
+            mode="lines", line=dict(color="rgba(0,0,0,0)", width=0),
+            showlegend=False, hoverinfo="skip"))
+        fig.add_trace(go.Scatterpolar(
+            r=inv_outer_closed, theta=axis_labels_closed,
+            mode="lines", fill="tonext",
+            fillcolor="rgba(19, 87, 115, 0.08)",
+            line=dict(color="rgba(19, 87, 115, 0.2)", width=1),
+            name="All Scenarios Range", hoverinfo="skip"))
+
+    # Highlighted scenario traces
+    for sc_id in valid_scenarios:
+        sc_idx = valid_scenarios.index(sc_id)
+        row = radar_df[radar_df[scenario_col] == sc_id]
+        if row.empty:
+            continue
+        raw_vals = row[cols].values.flatten().tolist()
+        inv_vals = np.clip(invert(row[cols].values.flatten()), 1, max_tier).tolist()
+        inv_vals_closed = inv_vals + [inv_vals[0]]
+
+        area_info = areas.get(sc_id, {}) if areas else {}
+        area_suffix = f"<br>Radar Area: {area_info['pct']:.1f}%" if area_info else ""
+        hover_texts = [f"{highlight_labels[sc_idx]}<br>{lbl}: Tier {rv:.1f}{area_suffix}" for lbl, rv in zip(axis_labels, raw_vals)]
+        hover_texts.append(hover_texts[0])
+
+        legend_name = f"{highlight_labels[sc_idx]} ({area_info['pct']:.0f}%)" if area_info else highlight_labels[sc_idx]
+        color = highlight_colors[sc_idx]
+        fig.add_trace(go.Scatterpolar(
+            r=inv_vals_closed, theta=axis_labels_closed,
+            mode="lines+markers",
+            line=dict(color=color, width=2.5),
+            marker=dict(size=8, color=color, line=dict(color="white", width=1)),
+            name=legend_name,
+            text=hover_texts, hoverinfo="text"))
+
+    # Axis tip hover anchors - category descriptions
+    tip_r = max_tier + 0.5
+    for i, (col, lbl) in enumerate(zip(cols, axis_labels)):
+        desc_key = _COL_TO_DESC_KEY.get(col)
+        if desc_key and desc_key in _AXIS_DESCRIPTIONS:
+            hover_text = f"<b>{lbl}</b><br>{_wrap_hover(_AXIS_DESCRIPTIONS[desc_key])}"
+            fig.add_trace(go.Scatterpolar(
+                r=[tip_r], theta=[lbl], mode="markers",
+                marker=dict(size=18, color="rgba(0,0,0,0.01)", symbol="circle"),
+                showlegend=False, hovertemplate=hover_text + "<extra></extra>",
+                hoverlabel=dict(bgcolor="white", bordercolor="grey", font=dict(size=12, color="black"))))
+
+    # Tier ring hover anchors - tier definitions at each axis x tier intersection
+    for i, (col, lbl) in enumerate(zip(cols, axis_labels)):
+        desc_key = _COL_TO_DESC_KEY.get(col)
+        if not desc_key or desc_key not in _TIER_DEFINITIONS:
+            continue
+        tier_defs = _TIER_DEFINITIONS[desc_key]
+        for tier in range(1, max_tier + 1):
+            tier_text = tier_defs.get(tier, "")
+            if not tier_text:
+                continue
+            inv_r = invert(tier)
+            hover_text = f"<b>{lbl} - Tier {tier}</b><br>{_wrap_hover(tier_text)}"
+            fig.add_trace(go.Scatterpolar(
+                r=[inv_r], theta=[lbl], mode="markers",
+                marker=dict(size=18, color="rgba(0,0,0,0.01)", symbol="circle"),
+                showlegend=False, hovertemplate=hover_text + "<extra></extra>",
+                hoverlabel=dict(bgcolor="white", bordercolor="grey", font=dict(size=12, color="black"))))
+
+    fig.update_layout(
+        polar=dict(
+            radialaxis=dict(
+                range=[0, max_tier + 0.5],
+                tickvals=[1, 2, 3, 4, 5],
+                ticktext=["", "Tier 4", "Tier 3", "Tier 2", "Tier 1"],
+                showline=False, gridcolor=GRID_COLOR),
+            angularaxis=dict(
+                direction="clockwise", gridcolor=GRID_COLOR,
+                tickfont=dict(size=13, color=BRAND_TEAL, family=FONT_STACK))),
+        showlegend=True, dragmode=False,
+        legend=dict(orientation="h", yanchor="top", y=-0.12, xanchor="center", x=0.5, font=dict(size=12, color=TEXT_MUTED)),
+        margin=dict(t=30, b=80, l=60, r=60),
+        height=700, autosize=True)
+    return fig
+
+
+# --- Sidebar Controls (for the sidebar) ---
+def get_sidebar_controls(scen_groups_store_init):
+    group_opts = [{"label": k, "value": k} for k in sorted(scen_groups_store_init.keys())]
+    scenario_opts = [{"label": s, "value": s} for s in RADAR_SCENARIOS]
+    axes_opts = [{"label": TIER_LABELS.get(c, c), "value": c} for c in ALL_TIER_COLS]
+
+    return html.Div([
+        html.Div("Scenario Group", style=SECTION_HEADER),
+        dcc.Dropdown(id="radar-group-dropdown", options=group_opts, placeholder="Choose group..."),
+        html.Div(id="radar-group-desc", style=DESCRIPTION_STYLE),
+        html.Button("Add to Selection", id="radar-add-group-btn", n_clicks=0, className="btn-primary", style={**PRIMARY_BUTTON, "marginBottom": "16px"}),
+
+        html.Div("Scenarios", style=SECTION_HEADER),
+        dcc.Dropdown(id="radar-scenario-dropdown", options=scenario_opts, value=[], multi=True, placeholder="Add/remove scenarios..."),
+        html.Div(id="radar-scenario-desc", style=DESCRIPTION_STYLE),
+
+        html.Div("Tier Groups", style=SECTION_HEADER),
+        dcc.Dropdown(id="radar-tier-preset", options=[{"label": k, "value": k} for k in RADAR_PRESETS], placeholder="Choose group...", clearable=True),
+
+        html.Div("Tier Categories", style=SECTION_HEADER),
+        dcc.Dropdown(id="radar-axes-checklist", options=axes_opts, value=list(ALL_TIER_COLS), multi=True, placeholder="Select tiers..."),
+        html.Div(id="radar-axes-warning", style={"color": DANGER_RED, "marginTop": "5px", "fontSize": "12px", "fontWeight": "500"}),
+
+        html.Div(
+            "Tier 1 (best) is outermost. Shaded band shows full scenario range. Click legend to toggle.",
+            style={**DESCRIPTION_STYLE, "marginTop": "16px"}),
+    ])
+
+
+# --- Main Content (chart area) ---
+def get_content():
+    _toggle_style = {"backgroundColor": "white", "color": BRAND_TEAL, "border": f"1px solid {BORDER_LIGHT}", "borderRadius": "6px", "padding": "8px 20px", "fontSize": "13px", "fontWeight": "600", "cursor": "pointer"}
+    _area_card = {"backgroundColor": "white", "border": f"1px solid {BORDER_LIGHT}", "borderRadius": "8px", "padding": "16px", "minWidth": "260px", "maxWidth": "300px", "alignSelf": "flex-start", "position": "sticky", "top": "24px"}
+    return html.Div([
+        html.H3(id="title-radar", style={"textAlign": "center", "marginTop": "0", "marginBottom": "8px", "color": BRAND_TEAL}),
+
+        # Radar chart + area panel side by side
+        html.Div(style={"display": "flex", "gap": "16px", "alignItems": "flex-start"}, children=[
+            dcc.Graph(id="plot-radar", figure=get_empty_radar_figure(), config={"scrollZoom": False, "displayModeBar": False}, responsive=True, style={"height": "75vh", "minHeight": "500px", "flex": "1"}),
+
+            # Radar Area panel (right side)
+            html.Div(id="radar-area-panel", style=_area_card, children=[
+                html.Div(style={"display": "flex", "justifyContent": "space-between", "gap": "16px", "marginBottom": "10px", "paddingBottom": "6px", "borderBottom": f"1px solid {BORDER_LIGHT}"}, children=[
+                    html.Div("Scenario", style={"fontSize": "11px", "fontWeight": "700", "color": BRAND_TEAL, "textTransform": "uppercase", "letterSpacing": "1px", "flex": "1"}),
+                    html.Div("Area", style={"fontSize": "11px", "fontWeight": "700", "color": BRAND_TEAL, "textTransform": "uppercase", "letterSpacing": "1px", "width": "60px", "textAlign": "left", "paddingLeft": "12px"}),
+                    html.Div("Per. Conv.", style={"fontSize": "11px", "fontWeight": "700", "color": BRAND_TEAL, "textTransform": "uppercase", "letterSpacing": "1px", "width": "80px", "textAlign": "left"}),
+                    html.Div("Area Conv.", style={"fontSize": "11px", "fontWeight": "700", "color": BRAND_TEAL, "textTransform": "uppercase", "letterSpacing": "1px", "width": "80px", "textAlign": "left"}),
+                ]),
+                html.Div(id="radar-area-list", children=[
+                    html.Div("Select scenarios", style={"fontSize": "12px", "color": TEXT_MUTED}),
+                ]),
+            ]),
+        ]),
+        download_buttons("plot-radar"),
+
+        # Distribution toggle
+        html.Div(style={"textAlign": "center", "marginTop": "12px"}, children=[
+            html.Button("Generate Static Plot with Overlaid KDE & Histogram Distribution", id="radar-dist-toggle", n_clicks=0, style=_toggle_style),
+        ]),
+        html.Div(id="radar-dist-container", style={"display": "none"}, children=[
+            dcc.Loading(type="circle", color=BRAND_TEAL, children=[
+                html.Img(id="radar-dist-img", style={"maxWidth": "100%", "margin": "12px auto", "display": "block"}),
+            ]),
+            download_buttons("radar-dist-img"),
+        ]),
+
+        # Data table
+        html.Div(id="radar-table-container", style={"marginTop": "20px"}, children=[
+            html.H4("Scenario Data", style={"color": BRAND_TEAL, "fontSize": "14px", "fontWeight": "600", "marginBottom": "8px"}),
+            dash_table.DataTable(id="radar-data-table", columns=[], data=[], sort_action="native", style_table={"overflowX": "auto"}, style_header=_TABLE_HEADER, style_cell=_TABLE_CELL),
+            download_buttons("radar-data-table", has_plot=False),
+        ]),
+    ])
+
+
+# --- Callbacks ---
+def register_callbacks(app, scen_groups_store_init):
+    @app.callback(
+        Output("radar-group-desc", "children"),
+        Input("radar-group-dropdown", "value"),
+        prevent_initial_call=True,
+    )
+    def show_radar_group_desc(group_name):
+        if not group_name or group_name not in scen_groups_store_init:
+            return ""
+        info = scen_groups_store_init[group_name]
+        desc = info.get("description", "")
+        scs = info.get("scenarios", [])
+        return f"{desc} ({', '.join(scs)})" if scs else desc
+
+    @app.callback(
+        Output("radar-scenario-dropdown", "value"),
+        Input("radar-add-group-btn", "n_clicks"),
+        State("radar-group-dropdown", "value"),
+        State("radar-scenario-dropdown", "value"),
+        prevent_initial_call=True,
+    )
+    def add_radar_group_to_selection(_, group_name, current):
+        from dash.exceptions import PreventUpdate
+        if not group_name or group_name not in scen_groups_store_init:
+            raise PreventUpdate
+        current = list(current or [])
+        scs = scen_groups_store_init[group_name].get("scenarios", [])
+        available = set(RADAR_SCENARIOS)
+        valid = [s for s in scs if s in available]
+        return list(dict.fromkeys(current + valid))
+
+    @app.callback(
+        Output("radar-scenario-desc", "children"),
+        Input("radar-scenario-dropdown", "value"),
+    )
+    def display_radar_scenario_desc(scen_list):
+        if not scen_list or _df_scen.empty:
+            return "Select scenarios to see descriptions"
+        col_idx = next((c for c in _df_scen.columns if "Index" in c), _df_scen.columns[0])
+        col_desc = next((c for c in _df_scen.columns if "ShortDescription" in c or "Description" in c), _df_scen.columns[1] if len(_df_scen.columns) > 1 else _df_scen.columns[0])
+        defs = _df_scen[_df_scen[col_idx].isin(scen_list)].set_index(col_idx)[col_desc].to_dict()
+        return [html.Div([html.B(f"{s}: "), html.Span(d)]) for s, d in defs.items()]
+
+    @app.callback(
+        [Output("radar-axes-checklist", "value"), Output("radar-tier-preset", "value")],
+        Input("radar-tier-preset", "value"),
+        prevent_initial_call=True,
+    )
+    def radar_preset_to_tiers(preset):
+        from dash.exceptions import PreventUpdate
+        if not preset:
+            raise PreventUpdate
+        return RADAR_PRESETS.get(preset, list(CORE_TIER_COLS)), None
+
+    @app.callback(
+        [Output("plot-radar", "figure"),
+         Output("title-radar", "children"),
+         Output("radar-axes-warning", "children"),
+         Output("radar-area-list", "children"),
+         Output("radar-data-table", "columns"),
+         Output("radar-data-table", "data")],
+        [Input("radar-scenario-dropdown", "value"),
+         Input("radar-axes-checklist", "value")],
+    )
+    def update_radar_plot(scenarios_selected, axes_selected):
+        axes_selected = list(axes_selected or [])
+        scenarios_selected = list(scenarios_selected or [])
+        empty_area = html.Div("Select scenarios", style={"fontSize": "12px", "color": TEXT_MUTED})
+        empty_table = ([], [])
+
+        if len(axes_selected) < 3:
+            warning = f"Select at least 3 tiers ({len(axes_selected)} selected)."
+            return get_empty_radar_figure(cols=axes_selected), "", warning, empty_area, *empty_table
+
+        if not scenarios_selected:
+            return get_empty_radar_figure(cols=axes_selected), "Select scenarios to compare", "", empty_area, *empty_table
+
+        # Compute areas for all scenarios (used in figure + area panel + table)
+        sel_df = tier_df[tier_df["scenario"].isin(scenarios_selected)]
+        areas = compute_scenario_areas(sel_df, axes_selected)
+        convexity = compute_scenario_convexity(sel_df, axes_selected)
+        area_convexity = compute_scenario_area_convexity(sel_df, axes_selected)
+
+        colors = [SCENARIO_COLORS[i % len(SCENARIO_COLORS)] for i in range(len(scenarios_selected))]
+        labels = list(scenarios_selected)
+        fig = build_radar_figure(tier_df, axes_selected, "scenario", scenarios_selected, colors, labels, "", areas=areas)
+        if len(fig.data) == 0:
+            return get_empty_radar_figure("No matching tier data"), "No matching tier data for selected scenarios", "", empty_area, *empty_table
+
+        title = f"Comparing {len(scenarios_selected)} Scenarios"
+
+        # Radar Area panel - sorted by area descending
+        sorted_scens = sorted(scenarios_selected, key=lambda s: areas.get(s, {}).get("pct", 0), reverse=True)
+        area_items = []
+        for i, scen in enumerate(sorted_scens):
+            pct = areas.get(scen, {}).get("pct", 0)
+            color = colors[scenarios_selected.index(scen)]
+            area_items.append(html.Div(style={"display": "flex", "alignItems": "center", "justifyContent": "space-between", "padding": "6px 0", "borderBottom": f"1px solid {BORDER_LIGHT}" if i < len(sorted_scens) - 1 else "none"}, children=[
+                html.Div(style={"display": "flex", "alignItems": "center", "gap": "8px", "flex": "1"}, children=[
+                    html.Div(style={"width": "10px", "height": "10px", "borderRadius": "50%", "backgroundColor": color, "flexShrink": "0"}),
+                    html.Span(scen, style={"fontSize": "12px", "fontWeight": "600", "color": "#1A202C"}),
+                ]),
+                html.Div(style={"display": "flex", "gap": "8px", "alignItems": "center"}, children=[
+                    html.Span(f"{pct:.1f}%", style={"fontSize": "13px", "fontWeight": "700", "color": BRAND_TEAL, "width": "60px", "textAlign": "right"}),
+                    html.Span(f"{convexity.get(scen, float('nan')):.1f}%", style={"fontSize": "13px", "fontWeight": "700", "color": BRAND_TEAL, "width": "80px", "textAlign": "right"}),
+                    html.Span(f"{area_convexity.get(scen, float('nan')):.1f}%", style={"fontSize": "13px", "fontWeight": "700", "color": BRAND_TEAL, "width": "80px", "textAlign": "left"}),
+                ]),
+            ]))
+
+        # Build table (tier data only, no area column)
+        table_cols = [{"name": "Scenario", "id": "scenario"}]
+        table_cols += [{"name": TIER_LABELS.get(c, c), "id": c, "type": "numeric", "format": Format(precision=2, scheme=Scheme.fixed)} for c in axes_selected]
+
+        table_data = []
+        for scen in scenarios_selected:
+            row = sel_df[sel_df["scenario"] == scen]
+            if row.empty:
+                continue
+            entry = {"scenario": scen}
+            for c in axes_selected:
+                entry[c] = round(float(row[c].values[0]), 2) if c in row.columns and pd.notna(row[c].values[0]) else None
+            table_data.append(entry)
+
+        return fig, title, "", area_items, table_cols, table_data
+
+    @app.callback(
+        [Output("radar-dist-container", "style"),
+         Output("radar-dist-img", "src"),
+         Output("radar-dist-toggle", "children")],
+        [Input("radar-dist-toggle", "n_clicks"),
+         Input("radar-scenario-dropdown", "value"),
+         Input("radar-axes-checklist", "value")],
+    )
+    def update_distribution_view(n_clicks, scenarios, axes):
+        visible = bool(n_clicks and n_clicks % 2 == 1)
+        btn_text = "Hide Static Plot" if visible else "Generate Static Plot with Overlaid KDE & Histogram Distribution"
+        if not visible:
+            return {"display": "none"}, "", btn_text
+        scenarios = list(scenarios or [])
+        axes = list(axes or [])
+        if len(axes) < 3 or not scenarios:
+            return {"display": "block"}, "", btn_text
+        colors = [SCENARIO_COLORS[i % len(SCENARIO_COLORS)] for i in range(len(scenarios))]
+        src = render_distribution_png(tier_df, axes, scenarios, colors, scenarios)
+        return {"display": "block"}, src, btn_text
+
+    # --- Download Callbacks ---
+    register_plotly_png_callback(app, "plot-radar")
+    register_base64_png_callback(app, "radar-dist-img", "dl-png-radar-dist-img")
+
+    @app.callback(
+        Output("dl-csv-plot-radar", "data"),
+        Input("dl-csv-btn-plot-radar", "n_clicks"),
+        [State("radar-scenario-dropdown", "value"), State("radar-axes-checklist", "value")],
+        prevent_initial_call=True,
+    )
+    def download_radar_csv(n_clicks, scenarios, axes):
+        from dash.exceptions import PreventUpdate
+        if not n_clicks or not scenarios or not axes:
+            raise PreventUpdate
+        out = tier_df[tier_df["scenario"].isin(scenarios)][["scenario"] + list(axes)]
+        return dcc.send_data_frame(out.to_csv, "radar_data.csv", index=False)
+
+    @app.callback(
+        Output("dl-csv-radar-dist-img", "data"),
+        Input("dl-csv-btn-radar-dist-img", "n_clicks"),
+        [State("radar-scenario-dropdown", "value"), State("radar-axes-checklist", "value")],
+        prevent_initial_call=True,
+    )
+    def download_dist_csv(n_clicks, scenarios, axes):
+        from dash.exceptions import PreventUpdate
+        if not n_clicks or not axes:
+            raise PreventUpdate
+        out = tier_df[["scenario"] + list(axes)]
+        return dcc.send_data_frame(out.to_csv, "radar_distribution.csv", index=False)
+
+    @app.callback(
+        Output("dl-csv-radar-data-table", "data"),
+        Input("dl-csv-btn-radar-data-table", "n_clicks"),
+        State("radar-data-table", "data"),
+        prevent_initial_call=True,
+    )
+    def download_table_csv(n_clicks, table_data):
+        from dash.exceptions import PreventUpdate
+        if not n_clicks or not table_data:
+            raise PreventUpdate
+        out = pd.DataFrame(table_data)
+        return dcc.send_data_frame(out.to_csv, "radar_table.csv", index=False)

resilience.py

@@ -1,867 +1,835 @@
-import dash
-import numpy as np
-import pandas as pd
-import plotly.graph_objs as go
-from dash import dcc, html, callback_context
-from dash.dependencies import Input, Output, State
-
-from theme import (
-    BRAND_TEAL, TEXT_MUTED, FONT_STACK, BORDER_LIGHT,
-    SECTION_HEADER, DESCRIPTION_STYLE, MODERN_CARD,
-)
-from downloads import download_buttons
-
-# contibuous or discrete tiers
-ContinuousTiers = True
-if ContinuousTiers:
-    tier_data = "data/tier_df_continuous.csv"
-else:
-        tier_data = "data/tier_df.csv"
-
-# --- Tier Color Scale (discrete 4-tier: green, blue, orange, red) ---
-TIER_COLORS = {1: "#2E7D32", 2: "#1565C0", 3: "#EF6C00", 4: "#C62828"}
-TIER_BG_COLORS = {1: "rgba(46,125,50,0.15)", 2: "rgba(21,101,192,0.15)", 3: "rgba(239,108,0,0.15)", 4: "rgba(200,40,40,0.15)"}
-
-# Discrete colorscale for Plotly heatmap (sharp boundaries at tier transitions)
-_DISCRETE_COLORSCALE = [
-    [0.0, "#2E7D32"], [0.25, "#2E7D32"],
-    [0.25, "#1565C0"], [0.5, "#1565C0"],
-    [0.5, "#EF6C00"], [0.75, "#EF6C00"],
-    [0.75, "#C62828"], [1.0, "#C62828"],
-]
-
-# --- Data Loading ---
-import json
-
-MAPPING_PATH = "data/strategy_mapping.csv"
-
-_tier_df_real = pd.read_csv(tier_data)
-_tier_df_synthetic = pd.read_csv("data/tier_df_synthetic.csv")
-
-# LOI-level tier data for drill-down
-try:
-    _loi_tiers = pd.read_csv("data/loi_tiers.csv")
-    with open("data/loi_mapping.json") as f:
-        LOI_MAPPING = json.load(f)
-    HAS_LOI_DATA = True
-except Exception:
-    _loi_tiers = pd.DataFrame()
-    LOI_MAPPING = {}
-    HAS_LOI_DATA = False
-
-# Real data needs strategy/hydroclimate columns joined from synthetic (which has them baked in)
-# Build a lookup from scenario -> (strategy, hydroclimate) from synthetic
-_scen_meta = _tier_df_synthetic[["scenario", "strategy", "hydroclimate"]].drop_duplicates()
-_tier_df_real = _tier_df_real.merge(_scen_meta, on="scenario", how="left")
-
-TIER_DATA = {"synthetic": _tier_df_synthetic, "real": _tier_df_real}
-
-res_tier_df = _tier_df_synthetic  # default for module-level constants
-strategy_map = pd.read_csv(MAPPING_PATH)
-
-TIER_COLS = [c for c in res_tier_df.columns if c not in ("scenario", "strategy", "hydroclimate") and not c.endswith("_Std")]
-HYDROCLIMATE_ORDER = ["Historical", "CC50", "CC95", "TAIESM1", "EC-Earth3", "CESM2"]
-
-# --- Tier Descriptions (hover text) ---
-_tier_desc_df = pd.read_csv("data/tiers_descriptions.csv")
-_tier_desc_df.columns = _tier_desc_df.columns.str.strip()
-_tier_desc_df["Outcomes/ Tiers"] = _tier_desc_df["Outcomes/ Tiers"].str.strip()
-
-# Map our column names to CSV keys
-_COL_TO_DESC_KEY = {
-    "NOD_GW_Mean": "NOD GW", "SOD_GW_Mean": "SOD GW",
-    "NOD_Reservoir_Mean": "NOD Reservoir", "SOD_Reservoir_Mean": "SOD Reservoir",
-    "Exports_and_Salinity": "Exports and Salinity", "InDelta_Salinity": "InDelta Salinity",
-    "NOD_Ag_Mean": "NOD Ag", "SOD_Ag_Mean": "SOD Ag",
-    "NOD_DW_Mean": "NOD DW", "SOD_DW_Mean": "SOD DW",
-    "NOD_Eflows_Mean": "NOD Eflows", "SOD_Eflows_Mean": "SOD Eflows",
-    "Delta_Ecology": "Delta Ecology", "Salmon_Abundance": "Salmon Abundance",
-}
-
-AXIS_DESCRIPTIONS = {}
-TIER_DEFINITIONS = {}
-for _, row in _tier_desc_df.iterrows():
-    key = row["Outcomes/ Tiers"]
-    AXIS_DESCRIPTIONS[key] = str(row["Description"]).strip()
-    TIER_DEFINITIONS[key] = {1: str(row["Tier1"]).strip(), 2: str(row["Tier2"]).strip(), 3: str(row["Tier3"]).strip(), 4: str(row["Tier4"]).strip()}
-
-
-def _get_tier_hover(col, val):
-    """Get tier definition text for a column and tier value."""
-    desc_key = _COL_TO_DESC_KEY.get(col)
-    if not desc_key or pd.isna(val):
-        return ""
-    tier_int = int(round(val))
-    tier_int = max(1, min(4, tier_int))
-    defs = TIER_DEFINITIONS.get(desc_key, {})
-    tier_text = defs.get(tier_int, "")
-    if len(tier_text) > 120:
-        tier_text = tier_text[:120] + "..."
-    return f"<br><i>Tier {tier_int}: {tier_text}</i>"
-
-# Hydroclimate metadata for display
-HYDROCLIMATE_META = {
-    "Historical": {"group": "DWR", "desc": "2023 DWR Historical Adjusted"},
-    "CC50": {"group": "DWR", "desc": "50th percentile climate change (2043)"},
-    "CC95": {"group": "DWR", "desc": "95th percentile climate change (2043)"},
-    "TAIESM1": {"group": "GCM", "desc": "TaiESM1 climate projection"},
-    "EC-Earth3": {"group": "GCM", "desc": "EC-Earth3 climate projection"},
-    "CESM2": {"group": "GCM", "desc": "CESM2 climate projection"},
-}
-
-# Separator position: after CC95 (index 2), before TAIESM1 (index 3)
-_DWR_GCM_BOUNDARY = 3
-STRATEGIES = sorted(strategy_map["strategy"].tolist())
-
-TIER_LABELS = {
-    "NOD_GW_Mean": "NOD Groundwater", "SOD_GW_Mean": "SOD Groundwater",
-    "NOD_Reservoir_Mean": "NOD Reservoir", "SOD_Reservoir_Mean": "SOD Reservoir",
-    "Exports_and_Salinity": "Exports and Salinity", "InDelta_Salinity": "In-Delta Salinity",
-    "NOD_Ag_Mean": "NOD Agriculture", "SOD_Ag_Mean": "SOD Agriculture",
-    "NOD_DW_Mean": "NOD Drinking Water", "SOD_DW_Mean": "SOD Drinking Water",
-    "NOD_Eflows_Mean": "NOD Env. Flows", "SOD_Eflows_Mean": "SOD Env. Flows",
-    "Delta_Ecology": "Delta Ecology", "Salmon_Abundance": "Salmon Abundance",
-}
-
-# Strategy descriptions from mapping
-STRATEGY_DESC = dict(zip(strategy_map["strategy"], strategy_map["description"]))
-STRATEGY_THEME = dict(zip(strategy_map["strategy"], strategy_map["theme"]))
-
-# --- Toggle Styles (matching plines.py) ---
-_TOGGLE_BTN_BASE = {
-    "padding": "7px 24px", "border": "none", "borderRadius": "6px",
-    "fontSize": "13px", "fontWeight": "600", "cursor": "pointer",
-    "textAlign": "center", "transition": "all 0.15s ease",
-}
-_TOGGLE_ACTIVE = {**_TOGGLE_BTN_BASE, "backgroundColor": "white", "color": BRAND_TEAL, "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"}
-_TOGGLE_INACTIVE = {**_TOGGLE_BTN_BASE, "backgroundColor": "transparent", "color": TEXT_MUTED}
-
-
-def _get_strategy_options():
-    opts = []
-    for s in STRATEGIES:
-        theme = STRATEGY_THEME.get(s, "")
-        label = f"{s} ({theme})" if theme else s
-        opts.append({"label": label, "value": s})
-    return opts
-
-
-def _get_row_options():
-    """Build dropdown options for every strategy x hydroclimate combo, grouped by strategy."""
-    opts = []
-    for _, mrow in strategy_map.iterrows():
-        strat = mrow["strategy"]
-        theme = STRATEGY_THEME.get(strat, "")
-        for hc in HYDROCLIMATE_ORDER:
-            hc_col = {"Historical": "historical", "CC50": "cc50", "CC95": "cc95", "TAIESM1": "taiesm1", "EC-Earth3": "ec_earth3", "CESM2": "cesm2"}.get(hc)
-            if hc_col and pd.notna(mrow.get(hc_col)):
-                scen = mrow[hc_col]
-                value = f"{strat}|{hc}"
-                label = f"{strat} - {hc} ({scen}) [{theme}]"
-                opts.append({"label": label, "value": value})
-    return opts
-
-
-def get_sidebar_controls():
-    _data_toggle = {"padding": "4px 12px", "border": "none", "borderRadius": "4px", "fontSize": "11px", "fontWeight": "600", "cursor": "pointer", "transition": "all 0.15s ease"}
-    _data_active = {**_data_toggle, "backgroundColor": BRAND_TEAL, "color": "white"}
-    _data_inactive = {**_data_toggle, "backgroundColor": "transparent", "color": TEXT_MUTED}
-    hc_options = [{"label": hc, "value": hc} for hc in HYDROCLIMATE_ORDER]
-    strategy_multi_opts = _get_strategy_options()
-    return html.Div([
-        # View 1 controls: single strategy + hydroclimates
-        html.Div(id="res-sidebar-scenario", children=[
-            html.Div("Strategy", style=SECTION_HEADER),
-            dcc.Dropdown(id="res-strategy-dropdown", options=strategy_multi_opts, placeholder="Choose strategy...", clearable=False),
-            html.Div(id="res-strategy-desc", style=DESCRIPTION_STYLE),
-            html.Div("Hydroclimates", style={**SECTION_HEADER, "marginTop": "16px"}),
-            dcc.Dropdown(id="res-hc-dropdown", options=hc_options, value=list(HYDROCLIMATE_ORDER), multi=True, placeholder="Select hydroclimates..."),
-        ]),
-
-        # View 2 controls: strategy picker + hydroclimate checklist per strategy
-        html.Div(id="res-sidebar-system", style={"display": "none"}, children=[
-            html.Div("Strategies", style=SECTION_HEADER),
-            dcc.Dropdown(id="res-strategies-multi", options=strategy_multi_opts, value=[], multi=True, placeholder="Select strategies..."),
-            html.Div(id="res-hc-checklist-area", style={"marginTop": "10px"}),
-            dcc.Store(id="res-system-rows-store", data=[]),
-        ]),
-
-        # View 3 controls: outcome picker + strategy multi-select
-        html.Div(id="res-sidebar-outcome", style={"display": "none"}, children=[
-            html.Div("Outcome", style=SECTION_HEADER),
-            dcc.Dropdown(id="res-outcome-dropdown", options=[{"label": TIER_LABELS.get(c, c), "value": c} for c in TIER_COLS], placeholder="Choose sector...", clearable=False),
-            html.Div("Strategies", style={**SECTION_HEADER, "marginTop": "16px"}),
-            dcc.Dropdown(id="res-outcome-strategies", options=strategy_multi_opts, value=[], multi=True, placeholder="Select strategies to compare..."),
-            html.Div(id="res-loi-filter-area", style={"marginTop": "12px"}, children=[
-                html.Div(id="res-loi-filter-content", style={"display": "none"}, children=[
-                    html.Div(id="res-loi-title", style={**SECTION_HEADER, "fontSize": "11px"}),
-                    dcc.Dropdown(id="res-loi-checklist", options=[], value=[], multi=True, placeholder="Filter LOIs..."),
-                ]),
-                html.Div(id="res-loi-no-lois", style={"display": "none"}, children=[
-                    html.Div("No sub-LOIs (scalar tier)", style={"fontSize": "10px", "color": TEXT_MUTED}),
-                ]),
-            ]),
-        ]),
-    ])
-
-
-def get_content():
-    _data_toggle = {"padding": "4px 10px", "border": "none", "borderRadius": "4px", "fontSize": "10px", "fontWeight": "600", "cursor": "pointer", "transition": "all 0.15s ease"}
-    _data_active = {**_data_toggle, "backgroundColor": BRAND_TEAL, "color": "white"}
-    _data_inactive = {**_data_toggle, "backgroundColor": "transparent", "color": TEXT_MUTED}
-    return html.Div([
-        # Top bar: view toggle (center) + data source (right)
-        html.Div(style={"display": "flex", "alignItems": "center", "justifyContent": "center", "position": "relative", "marginBottom": "16px"}, children=[
-            html.Div(style={"display": "inline-flex", "gap": "4px", "padding": "4px", "backgroundColor": "#EDF2F7", "borderRadius": "8px"}, children=[
-                html.Button("Scenario", id="res-toggle-scenario", n_clicks=0, style=_TOGGLE_ACTIVE),
-                html.Button("Outcome", id="res-toggle-outcome", n_clicks=0, style=_TOGGLE_INACTIVE),
-                html.Button("System-Wide", id="res-toggle-system", n_clicks=0, style=_TOGGLE_INACTIVE),
-            ]),
-            # Data source toggle - top right
-            html.Div(style={"position": "absolute", "right": "0", "display": "flex", "alignItems": "center", "gap": "6px"}, children=[
-                html.Span("Data:", style={"fontSize": "10px", "color": TEXT_MUTED, "fontWeight": "600"}),
-                html.Div(style={"display": "inline-flex", "gap": "2px", "padding": "2px", "backgroundColor": "#EDF2F7", "borderRadius": "4px"}, children=[
-                    html.Button("Synthetic", id="res-data-synthetic", n_clicks=1, style=_data_active),
-                    html.Button("Real", id="res-data-real", n_clicks=0, style=_data_inactive),
-                ]),
-                dcc.Store(id="res-data-source", data="synthetic"),
-                html.Div(id="res-data-note", style={"display": "none"}),
-            ]),
-        ]),
-
-        # View 1: Scenario-specific
-        html.Div(id="res-view-scenario", style={"display": "block"}, children=[
-            html.H3(id="res-title-scenario", children="Select a strategy to view resilience", style={"textAlign": "center", "marginTop": "0", "marginBottom": "8px", "color": BRAND_TEAL}),
-            dcc.Graph(id="res-plot-scenario", figure=go.Figure(), config={"displayModeBar": False, "scrollZoom": False}, style={"display": "none"}),
-            html.Div(id="res-stress-row"),
-            html.Div(id="res-legend-row"),
-            download_buttons("res-plot-scenario"),
-        ]),
-
-        # View 2: System-wide
-        html.Div(id="res-view-system", style={"display": "none"}, children=[
-            html.H3(id="res-title-system", children="Select strategies to compare", style={"textAlign": "center", "marginTop": "0", "marginBottom": "8px", "color": BRAND_TEAL}),
-            dcc.Graph(id="res-plot-system", figure=go.Figure(), config={"displayModeBar": False, "scrollZoom": False}, style={"display": "none"}),
-            html.Div(id="res-stress-row-system"),
-            html.Div(id="res-legend-row-system"),
-            download_buttons("res-plot-system"),
-        ]),
-
-        # View 3: Outcome-specific
-        html.Div(id="res-view-outcome", style={"display": "none"}, children=[
-            html.H3(id="res-title-outcome", children="Select a sector and strategies", style={"textAlign": "center", "marginTop": "0", "marginBottom": "8px", "color": BRAND_TEAL}),
-            dcc.Graph(id="res-plot-outcome", figure=go.Figure(), config={"displayModeBar": False, "scrollZoom": False}, style={"display": "none"}),
-            html.Div(id="res-legend-row-outcome"),
-            download_buttons("res-plot-outcome"),
-        ]),
-    ])
-
-
-def register_callbacks(app):
-    # --- View toggle ---
-    @app.callback(
-        [Output("res-view-scenario", "style"),
-         Output("res-view-system", "style"),
-         Output("res-view-outcome", "style"),
-         Output("res-sidebar-scenario", "style"),
-         Output("res-sidebar-system", "style"),
-         Output("res-sidebar-outcome", "style"),
-         Output("res-toggle-scenario", "style"),
-         Output("res-toggle-system", "style"),
-         Output("res-toggle-outcome", "style")],
-        [Input("res-toggle-scenario", "n_clicks"),
-         Input("res-toggle-system", "n_clicks"),
-         Input("res-toggle-outcome", "n_clicks")],
-        prevent_initial_call=True,
-    )
-    def toggle_view(scen_clicks, sys_clicks, out_clicks):
-        ctx = callback_context
-        show, hide = {"display": "block"}, {"display": "none"}
-        triggered_id = ctx.triggered[0]["prop_id"].split(".")[0] if ctx.triggered else ""
-
-        if triggered_id == "res-toggle-system":
-            return (hide, show, hide, hide, show, hide, _TOGGLE_INACTIVE, _TOGGLE_ACTIVE, _TOGGLE_INACTIVE)
-        elif triggered_id == "res-toggle-outcome":
-            return (hide, hide, show, hide, hide, show, _TOGGLE_INACTIVE, _TOGGLE_INACTIVE, _TOGGLE_ACTIVE)
-        return (show, hide, hide, show, hide, hide, _TOGGLE_ACTIVE, _TOGGLE_INACTIVE, _TOGGLE_INACTIVE)
-
-    # --- Data source toggle ---
-    @app.callback(
-        [Output("res-data-source", "data"),
-         Output("res-data-synthetic", "style"),
-         Output("res-data-real", "style"),
-         Output("res-data-note", "children")],
-        [Input("res-data-synthetic", "n_clicks"),
-         Input("res-data-real", "n_clicks")],
-        prevent_initial_call=True,
-    )
-    def toggle_data_source(syn_clicks, real_clicks):
-        ctx = callback_context
-        triggered_id = ctx.triggered[0]["prop_id"].split(".")[0] if ctx.triggered else ""
-        _on = {"padding": "4px 12px", "border": "none", "borderRadius": "4px", "fontSize": "11px", "fontWeight": "600", "cursor": "pointer", "transition": "all 0.15s ease", "backgroundColor": BRAND_TEAL, "color": "white"}
-        _off = {"padding": "4px 12px", "border": "none", "borderRadius": "4px", "fontSize": "11px", "fontWeight": "600", "cursor": "pointer", "transition": "all 0.15s ease", "backgroundColor": "transparent", "color": TEXT_MUTED}
-        if triggered_id == "res-data-real":
-            return "real", _off, _on, "Real data (3 hydroclimates, some sectors incomplete)"
-        return "synthetic", _on, _off, "Complete data (6 hydroclimates, all sectors filled)"
-
-    # --- View 2: Strategy -> hydroclimate checklist ---
-    @app.callback(
-        Output("res-hc-checklist-area", "children"),
-        Input("res-strategies-multi", "value"),
-        State("res-system-rows-store", "data"),
-    )
-    def build_hc_checklists(strategies, existing_rows):
-        strategies = list(strategies or [])
-        if not strategies:
-            return html.Div("Select strategies above", style={"fontSize": "11px", "color": TEXT_MUTED, "padding": "8px 0"})
-
-        # Track what was previously checked so we don't reset
-        existing_set = set(existing_rows or [])
-
-        children = []
-        hc_col_map = {"Historical": "historical", "CC50": "cc50", "CC95": "cc95", "TAIESM1": "taiesm1", "EC-Earth3": "ec_earth3", "CESM2": "cesm2"}
-        for strat in strategies:
-            theme = STRATEGY_THEME.get(strat, "")
-            desc = STRATEGY_DESC.get(strat, "")
-
-            mrow = strategy_map[strategy_map["strategy"] == strat]
-            if mrow.empty:
-                continue
-            mrow = mrow.iloc[0]
-            available = []
-            for hc, col in hc_col_map.items():
-                if pd.notna(mrow.get(col)):
-                    available.append({"label": f"{hc} ({mrow[col]})", "value": f"{strat}|{hc}"})
-
-            # Preserve existing selections; default new strategies to Historical only
-            strat_existing = [o["value"] for o in available if o["value"] in existing_set]
-            if not strat_existing:
-                strat_existing = [f"{strat}|Historical"]
-
-            children.append(html.Div(style={"marginBottom": "10px", "padding": "8px", "backgroundColor": "#F7FAFC", "borderRadius": "6px", "border": f"1px solid {BORDER_LIGHT}"}, children=[
-                html.Div(f"{strat} ({theme})", style={"fontSize": "12px", "fontWeight": "700", "color": BRAND_TEAL, "marginBottom": "2px"}),
-                html.Div(desc, style={"fontSize": "10px", "color": TEXT_MUTED, "marginBottom": "6px"}),
-                dcc.Checklist(
-                    id={"type": "res-hc-check", "strategy": strat},
-                    options=available,
-                    value=strat_existing,
-                    inline=True,
-                    style={"fontSize": "11px"},
-                    inputStyle={"marginRight": "4px"},
-                    labelStyle={"marginRight": "12px", "fontSize": "11px"},
-                ),
-            ]))
-
-        return children
-
-    @app.callback(
-        Output("res-system-rows-store", "data"),
-        Input({"type": "res-hc-check", "strategy": dash.ALL}, "value"),
-        prevent_initial_call=True,
-    )
-    def collect_system_rows(all_checklist_values):
-        if not all_checklist_values:
-            return []
-        rows = []
-        for vals in all_checklist_values:
-            rows.extend(vals or [])
-        return rows
-
-    # --- Strategy description ---
-    @app.callback(
-        Output("res-strategy-desc", "children"),
-        Input("res-strategy-dropdown", "value"),
-        prevent_initial_call=True,
-    )
-    def show_strategy_desc(strategy):
-        if not strategy:
-            return ""
-        theme = STRATEGY_THEME.get(strategy, "")
-        desc = STRATEGY_DESC.get(strategy, "")
-        return f"[{theme}] {desc}" if theme else desc
-
-    # --- View 1: Scenario-specific heatmap ---
-    @app.callback(
-        [Output("res-title-scenario", "children"),
-         Output("res-plot-scenario", "figure"),
-         Output("res-plot-scenario", "style"),
-         Output("res-stress-row", "children"),
-         Output("res-legend-row", "children")],
-        [Input("res-strategy-dropdown", "value"),
-         Input("res-data-source", "data"),
-         Input("res-hc-dropdown", "value")],
-    )
-    def update_scenario_view(strategy, data_source, selected_hc):
-        empty_fig = go.Figure()
-        empty_fig.update_layout(height=100, margin=dict(t=0, b=0, l=0, r=0), paper_bgcolor="white", plot_bgcolor="white", xaxis=dict(visible=False), yaxis=dict(visible=False))
-        hide = {"display": "none"}
-
-        selected_hc = list(selected_hc or [])
-        if not strategy:
-            return "Select a strategy to view resilience", empty_fig, hide, "", ""
-        if len(selected_hc) < 1:
-            return "Select at least one hydroclimate", empty_fig, hide, "", ""
-
-        desc = STRATEGY_DESC.get(strategy, "")
-        source_label = " (synthetic)" if data_source == "synthetic" else ""
-        title = f"{strategy}: {desc}{source_label}"
-
-        # Get data for this strategy, filtered to selected hydroclimates
-        active_df = TIER_DATA.get(data_source, _tier_df_synthetic)
-        strat_data = active_df[(active_df["strategy"] == strategy) & (active_df["hydroclimate"].isin(selected_hc))].copy()
-        if strat_data.empty:
-            return title, empty_fig, hide, "", ""
-
-        # Order by user's selection order
-        hc_order = {hc: i for i, hc in enumerate(selected_hc)}
-        strat_data["_hc_order"] = strat_data["hydroclimate"].map(hc_order)
-        strat_data = strat_data.sort_values("_hc_order").drop(columns=["_hc_order"])
-
-        available_hc = strat_data["hydroclimate"].tolist()
-        scenario_ids = strat_data["scenario"].tolist()
-        sector_labels = [TIER_LABELS.get(c, c) for c in TIER_COLS]
-
-        # Build custom hover text matrix
-        custom_hover = []
-        for i, col in enumerate(TIER_COLS):
-            row_hover = []
-            for j, (_, hc_row) in enumerate(strat_data.iterrows()):
-                val = hc_row[col]
-                hc = available_hc[j]
-                sid = scenario_ids[j]
-                hc_desc = HYDROCLIMATE_META.get(hc, {}).get("desc", hc)
-                if pd.isna(val):
-                    row_hover.append(f"<b>{sector_labels[i]}</b><br>{hc} ({sid})<br>{hc_desc}<br>No data")
-                else:
-                    tier_hover = _get_tier_hover(col, val)
-                    row_hover.append(f"<b>{sector_labels[i]}</b><br>{hc} ({sid})<br>{hc_desc}<br>Tier value: {val:.2f}{tier_hover}")
-            custom_hover.append(row_hover)
-
-        # Build z-matrix: rows = sectors, columns = hydroclimates
-        z = []
-        for col in TIER_COLS:
-            row_z = []
-            for _, hc_row in strat_data.iterrows():
-                val = hc_row[col]
-                row_z.append(float(val) if pd.notna(val) else np.nan)
-            z.append(row_z)
-
-        z = np.array(z, dtype=float)
-        z_rounded = np.round(z)
-        annotation_text = np.where(np.isnan(z), "-", np.char.mod("%.1f", z))
-
-        # X-axis: hydroclimate + scenario ID on second line
-        x_labels = [f"{hc}<br>({sid})" for hc, sid in zip(available_hc, scenario_ids)]
-        fig = go.Figure(data=go.Heatmap(
-            z=z_rounded,
-            x=x_labels,
-            y=sector_labels,
-            text=annotation_text,
-            texttemplate="<b>%{text}</b>",
-            textfont=dict(size=15, color="white", family=FONT_STACK),
-            colorscale=_DISCRETE_COLORSCALE,
-            zmin=0.5, zmax=4.5,
-            showscale=False,
-            customdata=np.array(custom_hover),
-            hovertemplate="%{customdata}<extra></extra>",
-            xgap=3, ygap=3,
-        ))
-
-        # Separator between DWR and GCM scenarios (wider gap)
-        dwr_count = sum(1 for hc in available_hc if HYDROCLIMATE_META.get(hc, {}).get("group") == "DWR")
-
-        fig.update_layout(
-            xaxis=dict(side="top", tickfont=dict(size=14, color=BRAND_TEAL, family=FONT_STACK, weight="bold"), tickangle=0),
-            yaxis=dict(autorange="reversed", tickfont=dict(size=13, family=FONT_STACK, weight="bold"), dtick=1),
-            margin=dict(t=60, b=10, l=190, r=40),
-            height=max(400, len(TIER_COLS) * 36 + 80),
-            plot_bgcolor="white", paper_bgcolor="white",
-            dragmode=False,
-            font=dict(family=FONT_STACK),
-        )
-
-        # Stress counts
-        t34_counts = []
-        t4_counts = []
-        for j in range(len(available_hc)):
-            col_vals = z_rounded[:, j]
-            valid = col_vals[~np.isnan(col_vals)]
-            t34_counts.append(int(np.sum(valid >= 3)))
-            t4_counts.append(int(np.sum(valid >= 4)))
-
-        # Stress counts as HTML
-        stress_cells = []
-        for j, hc in enumerate(available_hc):
-            cell_children = [
-                html.Div(f"Tier 3-4: {t34_counts[j]}", style={"fontSize": "13px", "fontWeight": "700", "color": "#EF6C00"}),
-                html.Div(f"Tier 4: {t4_counts[j]}", style={"fontSize": "13px", "fontWeight": "700", "color": "#C62828"}),
-            ]
-            cell_style = {"textAlign": "center", "flex": "1", "padding": "4px 0"}
-            stress_cells.append(html.Div(style=cell_style, children=cell_children))
-
-        stress_row = html.Div(style={"display": "flex", "marginLeft": "190px", "marginRight": "40px", "marginTop": "8px", "gap": "3px"}, children=stress_cells)
-
-        # Legend
-        legend_items = []
-        for tier, color in TIER_COLORS.items():
-            legend_items.append(html.Div(style={"display": "flex", "alignItems": "center", "gap": "6px"}, children=[
-                html.Div(style={"width": "18px", "height": "18px", "backgroundColor": color, "borderRadius": "3px"}),
-                html.Span(f"Tier {tier}", style={"fontSize": "13px", "fontWeight": "700", "color": color}),
-            ]))
-
-        legend = html.Div(style={"display": "flex", "justifyContent": "center", "gap": "28px", "marginTop": "16px"}, children=legend_items)
-
-        fig_height = max(400, len(TIER_COLS) * 36 + 80)
-        show = {"display": "block", "height": f"{fig_height}px"}
-
-        return title, fig, show, stress_row, legend
-
-    # --- Download callbacks ---
-    from downloads import register_plotly_png_callback
-    register_plotly_png_callback(app, "res-plot-scenario")
-
-    @app.callback(
-        Output("dl-csv-res-plot-scenario", "data"),
-        Input("dl-csv-btn-res-plot-scenario", "n_clicks"),
-        [State("res-strategy-dropdown", "value"), State("res-data-source", "data"), State("res-hc-dropdown", "value")],
-        prevent_initial_call=True,
-    )
-    def download_scenario_csv(n_clicks, strategy, data_source, selected_hc):
-        from dash.exceptions import PreventUpdate
-        if not n_clicks or not strategy:
-            raise PreventUpdate
-        active_df = TIER_DATA.get(data_source, _tier_df_synthetic)
-        selected_hc = list(selected_hc or HYDROCLIMATE_ORDER)
-        out = active_df[(active_df["strategy"] == strategy) & (active_df["hydroclimate"].isin(selected_hc))].copy()
-        hc_order = {hc: i for i, hc in enumerate(selected_hc)}
-        out["_order"] = out["hydroclimate"].map(hc_order)
-        out = out.sort_values("_order").drop(columns=["_order"])
-        cols = ["scenario", "strategy", "hydroclimate"] + TIER_COLS
-        out = out[[c for c in cols if c in out.columns]]
-        return dcc.send_data_frame(out.to_csv, f"resilience_{strategy}.csv", index=False)
-
-    # --- View 2: System-wide heatmap ---
-    @app.callback(
-        [Output("res-title-system", "children"),
-         Output("res-plot-system", "figure"),
-         Output("res-plot-system", "style"),
-         Output("res-stress-row-system", "children"),
-         Output("res-legend-row-system", "children")],
-        [Input("res-system-rows-store", "data"),
-         Input("res-data-source", "data")],
-    )
-    def update_system_view(selected_rows, data_source):
-        empty_fig = go.Figure()
-        empty_fig.update_layout(height=100, margin=dict(t=0, b=0, l=0, r=0), paper_bgcolor="white", plot_bgcolor="white", xaxis=dict(visible=False), yaxis=dict(visible=False))
-        hide = {"display": "none"}
-
-        selected_rows = list(selected_rows or [])
-        if not selected_rows:
-            return "Select scenario rows to compare", empty_fig, hide, "", ""
-
-        # Parse "strategy|hydroclimate" values
-        pairs = []
-        for rv in selected_rows:
-            parts = rv.split("|")
-            if len(parts) == 2:
-                pairs.append((parts[0], parts[1]))
-
-        if not pairs:
-            return "Select scenario rows to compare", empty_fig, hide, "", ""
-
-        active_df = TIER_DATA.get(data_source, _tier_df_synthetic)
-
-        # Filter to selected strategy x hydroclimate pairs
-        mask = pd.Series(False, index=active_df.index)
-        for strat, hc in pairs:
-            mask |= (active_df["strategy"] == strat) & (active_df["hydroclimate"] == hc)
-        view_df = active_df[mask].copy()
-        if view_df.empty:
-            return "No data available", empty_fig, hide, "", ""
-
-        # Preserve selection order
-        pair_order = {f"{s}|{h}": i for i, (s, h) in enumerate(pairs)}
-        view_df["_order"] = view_df.apply(lambda r: pair_order.get(f"{r['strategy']}|{r['hydroclimate']}", 999), axis=1)
-        view_df = view_df.sort_values("_order").drop(columns=["_order"])
-
-        # Row labels
-        row_labels = []
-        for _, row in view_df.iterrows():
-            row_labels.append(f"{row['strategy']} - {row['hydroclimate']} ({row['scenario']})")
-
-        sector_labels = [TIER_LABELS.get(c, c) for c in TIER_COLS]
-
-        # Build z-matrix: rows = strategy x hydroclimate combos, columns = sectors
-        z = []
-        custom_hover = []
-        for idx, (_, row) in enumerate(view_df.iterrows()):
-            row_z = []
-            row_hover = []
-            for i, col in enumerate(TIER_COLS):
-                val = row[col]
-                row_z.append(float(val) if pd.notna(val) else np.nan)
-                desc = STRATEGY_DESC.get(row["strategy"], "")
-                if pd.isna(val):
-                    row_hover.append(f"<b>{sector_labels[i]}</b><br>{row['strategy']}: {desc}<br>{row['hydroclimate']} ({row['scenario']})<br>No data")
-                else:
-                    tier_hover = _get_tier_hover(col, val)
-                    row_hover.append(f"<b>{sector_labels[i]}</b><br>{row['strategy']}: {desc}<br>{row['hydroclimate']} ({row['scenario']})<br>Tier value: {val:.2f}{tier_hover}")
-            z.append(row_z)
-            custom_hover.append(row_hover)
-
-        z = np.array(z, dtype=float)
-        z_rounded = np.round(z)
-        annotation_text = np.where(np.isnan(z), "-", np.char.mod("%.1f", z))
-
-        fig = go.Figure(data=go.Heatmap(
-            z=z_rounded,
-            x=sector_labels,
-            y=row_labels,
-            text=annotation_text,
-            texttemplate="<b>%{text}</b>",
-            textfont=dict(size=13, color="white", family=FONT_STACK),
-            colorscale=_DISCRETE_COLORSCALE,
-            zmin=0.5, zmax=4.5,
-            showscale=False,
-            customdata=np.array(custom_hover),
-            hovertemplate="%{customdata}<extra></extra>",
-            xgap=3, ygap=3,
-        ))
-
-        n_rows = len(row_labels)
-        fig.update_layout(
-            xaxis=dict(side="top", tickfont=dict(size=12, color=BRAND_TEAL, family=FONT_STACK, weight="bold"), tickangle=45),
-            yaxis=dict(autorange="reversed", tickfont=dict(size=11, family=FONT_STACK, weight="bold"), dtick=1),
-            margin=dict(t=120, b=10, l=300, r=40),
-            height=max(400, n_rows * 32 + 140),
-            plot_bgcolor="white", paper_bgcolor="white",
-            dragmode=False,
-            font=dict(family=FONT_STACK),
-        )
-
-        source_label = " (synthetic)" if data_source == "synthetic" else ""
-        n_strategies = len(set(p[0] for p in pairs))
-        n_hc = len(set(p[1] for p in pairs))
-        title = f"System-Wide: {n_strategies} strategies x {n_hc} hydroclimates{source_label}"
-
-        # Stress counts per sector column
-        t34_counts = []
-        t4_counts = []
-        for j in range(len(TIER_COLS)):
-            col_vals = z_rounded[:, j]
-            valid = col_vals[~np.isnan(col_vals)]
-            t34_counts.append(int(np.sum(valid >= 3)))
-            t4_counts.append(int(np.sum(valid >= 4)))
-
-        # Legend
-        legend_items = []
-        for tier, color in TIER_COLORS.items():
-            legend_items.append(html.Div(style={"display": "flex", "alignItems": "center", "gap": "6px"}, children=[
-                html.Div(style={"width": "18px", "height": "18px", "backgroundColor": color, "borderRadius": "3px"}),
-                html.Span(f"Tier {tier}", style={"fontSize": "13px", "fontWeight": "700", "color": color}),
-            ]))
-        legend = html.Div(style={"display": "flex", "justifyContent": "center", "gap": "28px", "marginTop": "16px"}, children=legend_items)
-
-        fig_height = max(400, n_rows * 32 + 140)
-        show = {"display": "block", "height": f"{fig_height}px"}
-
-        return title, fig, show, "", legend
-
-    # --- System-wide download callbacks ---
-    register_plotly_png_callback(app, "res-plot-system")
-
-    @app.callback(
-        Output("dl-csv-res-plot-system", "data"),
-        Input("dl-csv-btn-res-plot-system", "n_clicks"),
-        [State("res-system-rows-store", "data"), State("res-data-source", "data")],
-        prevent_initial_call=True,
-    )
-    def download_system_csv(n_clicks, selected_rows, data_source):
-        from dash.exceptions import PreventUpdate
-        if not n_clicks or not selected_rows:
-            raise PreventUpdate
-        active_df = TIER_DATA.get(data_source, _tier_df_synthetic)
-        pairs = [rv.split("|") for rv in selected_rows if "|" in rv]
-        mask = pd.Series(False, index=active_df.index)
-        for strat, hc in pairs:
-            mask |= (active_df["strategy"] == strat) & (active_df["hydroclimate"] == hc)
-        out = active_df[mask].copy()
-        cols = ["scenario", "strategy", "hydroclimate"] + TIER_COLS
-        out = out[[c for c in cols if c in out.columns]]
-        return dcc.send_data_frame(out.to_csv, "resilience_system_wide.csv", index=False)
-
-    # --- View 3: LOI filter checklist ---
-    @app.callback(
-        [Output("res-loi-filter-content", "style"),
-         Output("res-loi-no-lois", "style"),
-         Output("res-loi-checklist", "options"),
-         Output("res-loi-checklist", "value"),
-         Output("res-loi-title", "children")],
-        Input("res-outcome-dropdown", "value"),
-    )
-    def build_loi_checklist(sector):
-        show, hide = {"display": "block"}, {"display": "none"}
-        if not sector or not HAS_LOI_DATA:
-            return hide, hide, [], [], ""
-        lois = LOI_MAPPING.get(sector, [])
-        if not lois:
-            return hide, show, [], [], ""
-        loi_names = [l["loi"] for l in lois]
-        options = [{"label": name, "value": name} for name in loi_names]
-        return show, hide, options, loi_names, f"Filter LOIs ({len(loi_names)} available)"
-
-
-    # --- View 3: Outcome-specific heatmap ---
-    @app.callback(
-        [Output("res-title-outcome", "children"),
-         Output("res-plot-outcome", "figure"),
-         Output("res-plot-outcome", "style"),
-         Output("res-legend-row-outcome", "children")],
-        [Input("res-outcome-dropdown", "value"),
-         Input("res-outcome-strategies", "value"),
-         Input("res-data-source", "data"),
-         Input("res-loi-checklist", "value")],
-    )
-    def update_outcome_view(sector, strategies, data_source, selected_lois):
-        empty_fig = go.Figure()
-        empty_fig.update_layout(height=100, margin=dict(t=0, b=0, l=0, r=0), paper_bgcolor="white", plot_bgcolor="white", xaxis=dict(visible=False), yaxis=dict(visible=False))
-        hide = {"display": "none"}
-
-        strategies = list(strategies or [])
-        if not sector:
-            return "Select a sector to compare", empty_fig, hide, ""
-        if not strategies:
-            return f"{TIER_LABELS.get(sector, sector)} - select strategies", empty_fig, hide, ""
-
-        active_df = TIER_DATA.get(data_source, _tier_df_synthetic)
-        view_df = active_df[active_df["strategy"].isin(strategies)].copy()
-        if view_df.empty:
-            return "No data available", empty_fig, hide, ""
-
-        # If LOI filter is active and we have LOI data, recalculate averages
-        all_lois = LOI_MAPPING.get(sector, [])
-        all_loi_names = [l["loi"] for l in all_lois]
-        selected_lois = list(selected_lois or [])
-        using_loi_filter = HAS_LOI_DATA and len(all_loi_names) > 0 and len(selected_lois) > 0 and set(selected_lois) != set(all_loi_names)
-
-        if using_loi_filter:
-            # Recalculate sector average from selected LOIs only
-            valid_lois = [l for l in selected_lois if l in _loi_tiers.columns]
-            if valid_lois:
-                loi_lookup = _loi_tiers.set_index("scenario")
-                for idx, row in view_df.iterrows():
-                    scen = row["scenario"]
-                    if scen in loi_lookup.index:
-                        loi_vals = loi_lookup.loc[scen, valid_lois]
-                        view_df.at[idx, sector] = loi_vals.mean(skipna=True)
-                    # else: keep the existing value (synthetic or pre-computed)
-
-        # Order by strategy selection, then hydroclimate order
-        strat_order = {s: i for i, s in enumerate(strategies)}
-        hc_order = {hc: i for i, hc in enumerate(HYDROCLIMATE_ORDER)}
-        view_df["_s_order"] = view_df["strategy"].map(strat_order)
-        view_df["_h_order"] = view_df["hydroclimate"].map(hc_order)
-        view_df = view_df.sort_values(["_s_order", "_h_order"]).drop(columns=["_s_order", "_h_order"])
-
-        # Get available hydroclimates across all selected strategies
-        available_hc = [hc for hc in HYDROCLIMATE_ORDER if hc in view_df["hydroclimate"].values]
-
-        # Build z-matrix: rows = strategies, columns = hydroclimates
-        # Each cell = tier value for the selected sector
-        row_labels = []
-        z = []
-        custom_hover = []
-        for strat in strategies:
-            strat_rows = view_df[view_df["strategy"] == strat]
-            desc = STRATEGY_DESC.get(strat, "")
-            theme = STRATEGY_THEME.get(strat, "")
-            row_label = f"{strat} ({theme})"
-            row_labels.append(row_label)
-            row_z = []
-            row_hover = []
-            for hc in available_hc:
-                hc_row = strat_rows[strat_rows["hydroclimate"] == hc]
-                if hc_row.empty:
-                    row_z.append(np.nan)
-                    row_hover.append(f"<b>{row_label}</b><br>{hc}<br>No data")
-                else:
-                    val = hc_row[sector].values[0]
-                    sid = hc_row["scenario"].values[0]
-                    if pd.isna(val):
-                        row_z.append(np.nan)
-                        row_hover.append(f"<b>{row_label}</b><br>{hc} ({sid})<br>{desc}<br>No data")
-                    else:
-                        row_z.append(float(val))
-                        tier_hover = _get_tier_hover(sector, val)
-                        row_hover.append(f"<b>{row_label}</b><br>{hc} ({sid})<br>{desc}<br>Tier value: {val:.2f}{tier_hover}")
-            z.append(row_z)
-            custom_hover.append(row_hover)
-
-        z = np.array(z, dtype=float)
-        z_rounded = np.round(z)
-        annotation_text = np.where(np.isnan(z), "-", np.char.mod("%.1f", z))
-
-        fig = go.Figure(data=go.Heatmap(
-            z=z_rounded,
-            x=available_hc,
-            y=row_labels,
-            text=annotation_text,
-            texttemplate="<b>%{text}</b>",
-            textfont=dict(size=15, color="white", family=FONT_STACK),
-            colorscale=_DISCRETE_COLORSCALE,
-            zmin=0.5, zmax=4.5,
-            showscale=False,
-            customdata=np.array(custom_hover),
-            hovertemplate="%{customdata}<extra></extra>",
-            xgap=3, ygap=3,
-        ))
-
-        n_rows = len(row_labels)
-        fig.update_layout(
-            xaxis=dict(side="top", tickfont=dict(size=14, color=BRAND_TEAL, family=FONT_STACK, weight="bold"), tickangle=0),
-            yaxis=dict(autorange="reversed", tickfont=dict(size=12, family=FONT_STACK, weight="bold"), dtick=1),
-            margin=dict(t=60, b=10, l=220, r=40),
-            height=max(300, n_rows * 36 + 100),
-            plot_bgcolor="white", paper_bgcolor="white",
-            dragmode=False,
-            font=dict(family=FONT_STACK),
-        )
-
-        source_label = " (synthetic)" if data_source == "synthetic" else ""
-        sector_label = TIER_LABELS.get(sector, sector)
-        loi_label = f" ({len(selected_lois)}/{len(all_loi_names)} LOIs)" if using_loi_filter else ""
-        title = f"{sector_label}{loi_label}: {len(strategies)} strategies across hydroclimates{source_label}"
-
-        # Legend
-        legend_items = []
-        for tier, color in TIER_COLORS.items():
-            legend_items.append(html.Div(style={"display": "flex", "alignItems": "center", "gap": "6px"}, children=[
-                html.Div(style={"width": "18px", "height": "18px", "backgroundColor": color, "borderRadius": "3px"}),
-                html.Span(f"Tier {tier}", style={"fontSize": "13px", "fontWeight": "700", "color": color}),
-            ]))
-        legend = html.Div(style={"display": "flex", "justifyContent": "center", "gap": "28px", "marginTop": "16px"}, children=legend_items)
-
-        fig_height = max(300, n_rows * 36 + 100)
-        show = {"display": "block", "height": f"{fig_height}px"}
-
-        return title, fig, show, legend
-
-    # --- Outcome download callbacks ---
-    register_plotly_png_callback(app, "res-plot-outcome")
-
-    @app.callback(
-        Output("dl-csv-res-plot-outcome", "data"),
-        Input("dl-csv-btn-res-plot-outcome", "n_clicks"),
-        [State("res-outcome-dropdown", "value"), State("res-outcome-strategies", "value"), State("res-data-source", "data")],
-        prevent_initial_call=True,
-    )
-    def download_outcome_csv(n_clicks, sector, strategies, data_source):
-        from dash.exceptions import PreventUpdate
-        if not n_clicks or not sector or not strategies:
-            raise PreventUpdate
-        active_df = TIER_DATA.get(data_source, _tier_df_synthetic)
-        strategies = list(strategies or [])
-        out = active_df[active_df["strategy"].isin(strategies)].copy()
-        cols = ["scenario", "strategy", "hydroclimate", sector]
-        out = out[[c for c in cols if c in out.columns]]
-        return dcc.send_data_frame(out.to_csv, f"resilience_outcome_{sector}.csv", index=False)
+import dash
+import numpy as np
+import pandas as pd
+import plotly.graph_objs as go
+from dash import dcc, html, callback_context
+from dash.dependencies import Input, Output, State
+
+from theme import (
+    BRAND_TEAL, TEXT_MUTED, FONT_STACK, BORDER_LIGHT,
+    SECTION_HEADER, DESCRIPTION_STYLE, MODERN_CARD,
+)
+from downloads import download_buttons
+
+# contibuous or discrete tiers
+ContinuousTiers = True
+if ContinuousTiers:
+    tier_data = "data/tier_df_continuous.csv"
+else:
+        tier_data = "data/tier_df.csv"
+
+# --- Tier Color Scale (discrete 4-tier: green, blue, orange, red) ---
+TIER_COLORS = {1: "#2E7D32", 2: "#1565C0", 3: "#EF6C00", 4: "#C62828"}
+TIER_BG_COLORS = {1: "rgba(46,125,50,0.15)", 2: "rgba(21,101,192,0.15)", 3: "rgba(239,108,0,0.15)", 4: "rgba(200,40,40,0.15)"}
+
+# Discrete colorscale for Plotly heatmap (sharp boundaries at tier transitions)
+_DISCRETE_COLORSCALE = [
+    [0.0, "#2E7D32"], [0.25, "#2E7D32"],
+    [0.25, "#1565C0"], [0.5, "#1565C0"],
+    [0.5, "#EF6C00"], [0.75, "#EF6C00"],
+    [0.75, "#C62828"], [1.0, "#C62828"],
+]
+
+# --- Data Loading ---
+import json
+
+MAPPING_PATH = "data/strategy_mapping.csv"
+
+strategy_map = pd.read_csv(MAPPING_PATH)
+
+# LOI-level tier data for drill-down
+try:
+    _loi_tiers = pd.read_csv("data/loi_tiers.csv")
+    with open("data/loi_mapping.json") as f:
+        LOI_MAPPING = json.load(f)
+    HAS_LOI_DATA = True
+except Exception:
+    _loi_tiers = pd.DataFrame()
+    LOI_MAPPING = {}
+    HAS_LOI_DATA = False
+
+# Hydroclimates with real CalSim3 runs. CESM2 is dropped - those runs (s0159-s0183)
+# were never produced, so every CESM2 cell would have been fabricated.
+HYDROCLIMATE_ORDER = ["Historical", "CC50", "CC95", "TAIESM1", "EC-Earth3"]
+_HC_COL_MAP = {"Historical": "historical", "CC50": "cc50", "CC95": "cc95", "TAIESM1": "taiesm1", "EC-Earth3": "ec_earth3"}
+
+# Build the real strategy x hydroclimate matrix from the continuous tier data.
+# tier_df_continuous holds one row per real scenario (no strategy/hydroclimate);
+# strategy_map says which real scenario id backs each (strategy, hydroclimate) cell.
+# Cells whose scenario has no real run are omitted - no fabricated rows. This is
+# why phantom strategies like s0036 (no real run) drop out entirely.
+_tier_real = pd.read_csv(tier_data).set_index("scenario")
+_rows = []
+for _, _mrow in strategy_map.iterrows():
+    _strat = _mrow["strategy"]
+    for _hc, _hc_col in _HC_COL_MAP.items():
+        _scen = _mrow.get(_hc_col)
+        if pd.isna(_scen) or _scen not in _tier_real.index:
+            continue
+        _rec = _tier_real.loc[_scen].to_dict()
+        _rec["scenario"] = _scen
+        _rec["strategy"] = _strat
+        _rec["hydroclimate"] = _hc
+        _rows.append(_rec)
+res_tier_df = pd.DataFrame(_rows)
+
+TIER_COLS = [c for c in res_tier_df.columns if c not in ("scenario", "strategy", "hydroclimate") and not c.endswith("_Std")]
+
+# --- Tier Descriptions (hover text) ---
+_tier_desc_df = pd.read_csv("data/tiers_descriptions.csv")
+_tier_desc_df.columns = _tier_desc_df.columns.str.strip()
+_tier_desc_df["Outcomes/ Tiers"] = _tier_desc_df["Outcomes/ Tiers"].str.strip()
+
+# Map our column names to CSV keys
+_COL_TO_DESC_KEY = {
+    "NOD_GW_Mean": "NOD GW", "SOD_GW_Mean": "SOD GW",
+    "NOD_Reservoir_Mean": "NOD Reservoir", "SOD_Reservoir_Mean": "SOD Reservoir",
+    "Exports_and_Salinity": "Exports and Salinity", "InDelta_Salinity": "InDelta Salinity",
+    "NOD_Ag_Mean": "NOD Ag", "SOD_Ag_Mean": "SOD Ag",
+    "NOD_DW_Mean": "NOD DW", "SOD_DW_Mean": "SOD DW",
+    "NOD_Eflows_Mean": "NOD Eflows", "SOD_Eflows_Mean": "SOD Eflows",
+    "Delta_Ecology": "Delta Ecology", "Salmon_Abundance": "Salmon Abundance",
+}
+
+AXIS_DESCRIPTIONS = {}
+TIER_DEFINITIONS = {}
+for _, row in _tier_desc_df.iterrows():
+    key = row["Outcomes/ Tiers"]
+    AXIS_DESCRIPTIONS[key] = str(row["Description"]).strip()
+    TIER_DEFINITIONS[key] = {1: str(row["Tier1"]).strip(), 2: str(row["Tier2"]).strip(), 3: str(row["Tier3"]).strip(), 4: str(row["Tier4"]).strip()}
+
+
+def _get_tier_hover(col, val):
+    """Get tier definition text for a column and tier value."""
+    desc_key = _COL_TO_DESC_KEY.get(col)
+    if not desc_key or pd.isna(val):
+        return ""
+    tier_int = int(round(val))
+    tier_int = max(1, min(4, tier_int))
+    defs = TIER_DEFINITIONS.get(desc_key, {})
+    tier_text = defs.get(tier_int, "")
+    if len(tier_text) > 120:
+        tier_text = tier_text[:120] + "..."
+    return f"<br><i>Tier {tier_int}: {tier_text}</i>"
+
+# Hydroclimate metadata for display
+HYDROCLIMATE_META = {
+    "Historical": {"group": "DWR", "desc": "2023 DWR Historical Adjusted"},
+    "CC50": {"group": "DWR", "desc": "50th percentile climate change (2043)"},
+    "CC95": {"group": "DWR", "desc": "95th percentile climate change (2043)"},
+    "TAIESM1": {"group": "GCM", "desc": "TaiESM1 climate projection"},
+    "EC-Earth3": {"group": "GCM", "desc": "EC-Earth3 climate projection"},
+    "CESM2": {"group": "GCM", "desc": "CESM2 climate projection"},
+}
+
+# Separator position: after CC95 (index 2), before TAIESM1 (index 3)
+_DWR_GCM_BOUNDARY = 3
+# Strategies that actually have real data (drops phantoms like s0036).
+STRATEGIES = sorted(res_tier_df["strategy"].unique().tolist())
+
+TIER_LABELS = {
+    "NOD_GW_Mean": "NOD Groundwater", "SOD_GW_Mean": "SOD Groundwater",
+    "NOD_Reservoir_Mean": "NOD Reservoir", "SOD_Reservoir_Mean": "SOD Reservoir",
+    "Exports_and_Salinity": "Exports and Salinity", "InDelta_Salinity": "In-Delta Salinity",
+    "NOD_Ag_Mean": "NOD Agriculture", "SOD_Ag_Mean": "SOD Agriculture",
+    "NOD_DW_Mean": "NOD Drinking Water", "SOD_DW_Mean": "SOD Drinking Water",
+    "NOD_Eflows_Mean": "NOD Env. Flows", "SOD_Eflows_Mean": "SOD Env. Flows",
+    "Delta_Ecology": "Delta Ecology", "Salmon_Abundance": "Salmon Abundance",
+}
+
+# Strategy descriptions from mapping
+STRATEGY_DESC = dict(zip(strategy_map["strategy"], strategy_map["description"]))
+STRATEGY_THEME = dict(zip(strategy_map["strategy"], strategy_map["theme"]))
+
+# --- Toggle Styles (matching plines.py) ---
+_TOGGLE_BTN_BASE = {
+    "padding": "7px 24px", "border": "none", "borderRadius": "6px",
+    "fontSize": "13px", "fontWeight": "600", "cursor": "pointer",
+    "textAlign": "center", "transition": "all 0.15s ease",
+}
+_TOGGLE_ACTIVE = {**_TOGGLE_BTN_BASE, "backgroundColor": "white", "color": BRAND_TEAL, "boxShadow": "0 1px 3px rgba(0,0,0,0.1)"}
+_TOGGLE_INACTIVE = {**_TOGGLE_BTN_BASE, "backgroundColor": "transparent", "color": TEXT_MUTED}
+
+
+def _get_strategy_options():
+    opts = []
+    for s in STRATEGIES:
+        theme = STRATEGY_THEME.get(s, "")
+        label = f"{s} ({theme})" if theme else s
+        opts.append({"label": label, "value": s})
+    return opts
+
+
+def _get_row_options():
+    """Build dropdown options for every strategy x hydroclimate combo, grouped by strategy."""
+    opts = []
+    for _, mrow in strategy_map.iterrows():
+        strat = mrow["strategy"]
+        theme = STRATEGY_THEME.get(strat, "")
+        for hc in HYDROCLIMATE_ORDER:
+            hc_col = {"Historical": "historical", "CC50": "cc50", "CC95": "cc95", "TAIESM1": "taiesm1", "EC-Earth3": "ec_earth3", "CESM2": "cesm2"}.get(hc)
+            if hc_col and pd.notna(mrow.get(hc_col)):
+                scen = mrow[hc_col]
+                value = f"{strat}|{hc}"
+                label = f"{strat} - {hc} ({scen}) [{theme}]"
+                opts.append({"label": label, "value": value})
+    return opts
+
+
+def get_sidebar_controls():
+    _data_toggle = {"padding": "4px 12px", "border": "none", "borderRadius": "4px", "fontSize": "11px", "fontWeight": "600", "cursor": "pointer", "transition": "all 0.15s ease"}
+    _data_active = {**_data_toggle, "backgroundColor": BRAND_TEAL, "color": "white"}
+    _data_inactive = {**_data_toggle, "backgroundColor": "transparent", "color": TEXT_MUTED}
+    hc_options = [{"label": hc, "value": hc} for hc in HYDROCLIMATE_ORDER]
+    strategy_multi_opts = _get_strategy_options()
+    return html.Div([
+        # View 1 controls: single strategy + hydroclimates
+        html.Div(id="res-sidebar-scenario", children=[
+            html.Div("Strategy", style=SECTION_HEADER),
+            dcc.Dropdown(id="res-strategy-dropdown", options=strategy_multi_opts, placeholder="Choose strategy...", clearable=False),
+            html.Div(id="res-strategy-desc", style=DESCRIPTION_STYLE),
+            html.Div("Hydroclimates", style={**SECTION_HEADER, "marginTop": "16px"}),
+            dcc.Dropdown(id="res-hc-dropdown", options=hc_options, value=list(HYDROCLIMATE_ORDER), multi=True, placeholder="Select hydroclimates..."),
+        ]),
+
+        # View 2 controls: strategy picker + hydroclimate checklist per strategy
+        html.Div(id="res-sidebar-system", style={"display": "none"}, children=[
+            html.Div("Strategies", style=SECTION_HEADER),
+            dcc.Dropdown(id="res-strategies-multi", options=strategy_multi_opts, value=[], multi=True, placeholder="Select strategies..."),
+            html.Div(id="res-hc-checklist-area", style={"marginTop": "10px"}),
+            dcc.Store(id="res-system-rows-store", data=[]),
+        ]),
+
+        # View 3 controls: outcome picker + strategy multi-select
+        html.Div(id="res-sidebar-outcome", style={"display": "none"}, children=[
+            html.Div("Outcome", style=SECTION_HEADER),
+            dcc.Dropdown(id="res-outcome-dropdown", options=[{"label": TIER_LABELS.get(c, c), "value": c} for c in TIER_COLS], placeholder="Choose sector...", clearable=False),
+            html.Div("Strategies", style={**SECTION_HEADER, "marginTop": "16px"}),
+            dcc.Dropdown(id="res-outcome-strategies", options=strategy_multi_opts, value=[], multi=True, placeholder="Select strategies to compare..."),
+            html.Div(id="res-loi-filter-area", style={"marginTop": "12px"}, children=[
+                html.Div(id="res-loi-filter-content", style={"display": "none"}, children=[
+                    html.Div(id="res-loi-title", style={**SECTION_HEADER, "fontSize": "11px"}),
+                    dcc.Dropdown(id="res-loi-checklist", options=[], value=[], multi=True, placeholder="Filter LOIs..."),
+                ]),
+                html.Div(id="res-loi-no-lois", style={"display": "none"}, children=[
+                    html.Div("No sub-LOIs (scalar tier)", style={"fontSize": "10px", "color": TEXT_MUTED}),
+                ]),
+            ]),
+        ]),
+    ])
+
+
+def get_content():
+    return html.Div([
+        # Top bar: view toggle (center)
+        html.Div(style={"display": "flex", "alignItems": "center", "justifyContent": "center", "position": "relative", "marginBottom": "16px"}, children=[
+            html.Div(style={"display": "inline-flex", "gap": "4px", "padding": "4px", "backgroundColor": "#EDF2F7", "borderRadius": "8px"}, children=[
+                html.Button("Scenario", id="res-toggle-scenario", n_clicks=0, style=_TOGGLE_ACTIVE),
+                html.Button("Outcome", id="res-toggle-outcome", n_clicks=0, style=_TOGGLE_INACTIVE),
+                html.Button("System-Wide", id="res-toggle-system", n_clicks=0, style=_TOGGLE_INACTIVE),
+            ]),
+        ]),
+
+        # View 1: Scenario-specific
+        html.Div(id="res-view-scenario", style={"display": "block"}, children=[
+            html.H3(id="res-title-scenario", children="Select a strategy to view resilience", style={"textAlign": "center", "marginTop": "0", "marginBottom": "8px", "color": BRAND_TEAL}),
+            dcc.Graph(id="res-plot-scenario", figure=go.Figure(), config={"displayModeBar": False, "scrollZoom": False}, style={"display": "none"}),
+            html.Div(id="res-stress-row"),
+            html.Div(id="res-legend-row"),
+            download_buttons("res-plot-scenario"),
+        ]),
+
+        # View 2: System-wide
+        html.Div(id="res-view-system", style={"display": "none"}, children=[
+            html.H3(id="res-title-system", children="Select strategies to compare", style={"textAlign": "center", "marginTop": "0", "marginBottom": "8px", "color": BRAND_TEAL}),
+            dcc.Graph(id="res-plot-system", figure=go.Figure(), config={"displayModeBar": False, "scrollZoom": False}, style={"display": "none"}),
+            html.Div(id="res-stress-row-system"),
+            html.Div(id="res-legend-row-system"),
+            download_buttons("res-plot-system"),
+        ]),
+
+        # View 3: Outcome-specific
+        html.Div(id="res-view-outcome", style={"display": "none"}, children=[
+            html.H3(id="res-title-outcome", children="Select a sector and strategies", style={"textAlign": "center", "marginTop": "0", "marginBottom": "8px", "color": BRAND_TEAL}),
+            dcc.Graph(id="res-plot-outcome", figure=go.Figure(), config={"displayModeBar": False, "scrollZoom": False}, style={"display": "none"}),
+            html.Div(id="res-legend-row-outcome"),
+            download_buttons("res-plot-outcome"),
+        ]),
+    ])
+
+
+def register_callbacks(app):
+    # --- View toggle ---
+    @app.callback(
+        [Output("res-view-scenario", "style"),
+         Output("res-view-system", "style"),
+         Output("res-view-outcome", "style"),
+         Output("res-sidebar-scenario", "style"),
+         Output("res-sidebar-system", "style"),
+         Output("res-sidebar-outcome", "style"),
+         Output("res-toggle-scenario", "style"),
+         Output("res-toggle-system", "style"),
+         Output("res-toggle-outcome", "style")],
+        [Input("res-toggle-scenario", "n_clicks"),
+         Input("res-toggle-system", "n_clicks"),
+         Input("res-toggle-outcome", "n_clicks")],
+        prevent_initial_call=True,
+    )
+    def toggle_view(scen_clicks, sys_clicks, out_clicks):
+        ctx = callback_context
+        show, hide = {"display": "block"}, {"display": "none"}
+        triggered_id = ctx.triggered[0]["prop_id"].split(".")[0] if ctx.triggered else ""
+
+        if triggered_id == "res-toggle-system":
+            return (hide, show, hide, hide, show, hide, _TOGGLE_INACTIVE, _TOGGLE_ACTIVE, _TOGGLE_INACTIVE)
+        elif triggered_id == "res-toggle-outcome":
+            return (hide, hide, show, hide, hide, show, _TOGGLE_INACTIVE, _TOGGLE_INACTIVE, _TOGGLE_ACTIVE)
+        return (show, hide, hide, show, hide, hide, _TOGGLE_ACTIVE, _TOGGLE_INACTIVE, _TOGGLE_INACTIVE)
+
+    # --- View 2: Strategy -> hydroclimate checklist ---
+    @app.callback(
+        Output("res-hc-checklist-area", "children"),
+        Input("res-strategies-multi", "value"),
+        State("res-system-rows-store", "data"),
+    )
+    def build_hc_checklists(strategies, existing_rows):
+        strategies = list(strategies or [])
+        if not strategies:
+            return html.Div("Select strategies above", style={"fontSize": "11px", "color": TEXT_MUTED, "padding": "8px 0"})
+
+        # Track what was previously checked so we don't reset
+        existing_set = set(existing_rows or [])
+
+        children = []
+        for strat in strategies:
+            theme = STRATEGY_THEME.get(strat, "")
+            desc = STRATEGY_DESC.get(strat, "")
+
+            strat_rows = res_tier_df[res_tier_df["strategy"] == strat]
+            if strat_rows.empty:
+                continue
+            available = []
+            for hc in HYDROCLIMATE_ORDER:
+                hc_row = strat_rows[strat_rows["hydroclimate"] == hc]
+                if not hc_row.empty:
+                    available.append({"label": f"{hc} ({hc_row['scenario'].iloc[0]})", "value": f"{strat}|{hc}"})
+
+            # Preserve existing selections; default new strategies to Historical only
+            strat_existing = [o["value"] for o in available if o["value"] in existing_set]
+            if not strat_existing:
+                strat_existing = [f"{strat}|Historical"]
+
+            children.append(html.Div(style={"marginBottom": "10px", "padding": "8px", "backgroundColor": "#F7FAFC", "borderRadius": "6px", "border": f"1px solid {BORDER_LIGHT}"}, children=[
+                html.Div(f"{strat} ({theme})", style={"fontSize": "12px", "fontWeight": "700", "color": BRAND_TEAL, "marginBottom": "2px"}),
+                html.Div(desc, style={"fontSize": "10px", "color": TEXT_MUTED, "marginBottom": "6px"}),
+                dcc.Checklist(
+                    id={"type": "res-hc-check", "strategy": strat},
+                    options=available,
+                    value=strat_existing,
+                    inline=True,
+                    style={"fontSize": "11px"},
+                    inputStyle={"marginRight": "4px"},
+                    labelStyle={"marginRight": "12px", "fontSize": "11px"},
+                ),
+            ]))
+
+        return children
+
+    @app.callback(
+        Output("res-system-rows-store", "data"),
+        Input({"type": "res-hc-check", "strategy": dash.ALL}, "value"),
+        prevent_initial_call=True,
+    )
+    def collect_system_rows(all_checklist_values):
+        if not all_checklist_values:
+            return []
+        rows = []
+        for vals in all_checklist_values:
+            rows.extend(vals or [])
+        return rows
+
+    # --- Strategy description ---
+    @app.callback(
+        Output("res-strategy-desc", "children"),
+        Input("res-strategy-dropdown", "value"),
+        prevent_initial_call=True,
+    )
+    def show_strategy_desc(strategy):
+        if not strategy:
+            return ""
+        theme = STRATEGY_THEME.get(strategy, "")
+        desc = STRATEGY_DESC.get(strategy, "")
+        return f"[{theme}] {desc}" if theme else desc
+
+    # --- View 1: Scenario-specific heatmap ---
+    @app.callback(
+        [Output("res-title-scenario", "children"),
+         Output("res-plot-scenario", "figure"),
+         Output("res-plot-scenario", "style"),
+         Output("res-stress-row", "children"),
+         Output("res-legend-row", "children")],
+        [Input("res-strategy-dropdown", "value"),
+         Input("res-hc-dropdown", "value")],
+    )
+    def update_scenario_view(strategy, selected_hc):
+        empty_fig = go.Figure()
+        empty_fig.update_layout(height=100, margin=dict(t=0, b=0, l=0, r=0), paper_bgcolor="white", plot_bgcolor="white", xaxis=dict(visible=False), yaxis=dict(visible=False))
+        hide = {"display": "none"}
+
+        selected_hc = list(selected_hc or [])
+        if not strategy:
+            return "Select a strategy to view resilience", empty_fig, hide, "", ""
+        if len(selected_hc) < 1:
+            return "Select at least one hydroclimate", empty_fig, hide, "", ""
+
+        desc = STRATEGY_DESC.get(strategy, "")
+        title = f"{strategy}: {desc}"
+
+        # Get data for this strategy, filtered to selected hydroclimates
+        strat_data = res_tier_df[(res_tier_df["strategy"] == strategy) & (res_tier_df["hydroclimate"].isin(selected_hc))].copy()
+        if strat_data.empty:
+            return title, empty_fig, hide, "", ""
+
+        # Order by user's selection order
+        hc_order = {hc: i for i, hc in enumerate(selected_hc)}
+        strat_data["_hc_order"] = strat_data["hydroclimate"].map(hc_order)
+        strat_data = strat_data.sort_values("_hc_order").drop(columns=["_hc_order"])
+
+        available_hc = strat_data["hydroclimate"].tolist()
+        scenario_ids = strat_data["scenario"].tolist()
+        sector_labels = [TIER_LABELS.get(c, c) for c in TIER_COLS]
+
+        # Build custom hover text matrix
+        custom_hover = []
+        for i, col in enumerate(TIER_COLS):
+            row_hover = []
+            for j, (_, hc_row) in enumerate(strat_data.iterrows()):
+                val = hc_row[col]
+                hc = available_hc[j]
+                sid = scenario_ids[j]
+                hc_desc = HYDROCLIMATE_META.get(hc, {}).get("desc", hc)
+                if pd.isna(val):
+                    row_hover.append(f"<b>{sector_labels[i]}</b><br>{hc} ({sid})<br>{hc_desc}<br>No data")
+                else:
+                    tier_hover = _get_tier_hover(col, val)
+                    row_hover.append(f"<b>{sector_labels[i]}</b><br>{hc} ({sid})<br>{hc_desc}<br>Tier value: {val:.2f}{tier_hover}")
+            custom_hover.append(row_hover)
+
+        # Build z-matrix: rows = sectors, columns = hydroclimates
+        z = []
+        for col in TIER_COLS:
+            row_z = []
+            for _, hc_row in strat_data.iterrows():
+                val = hc_row[col]
+                row_z.append(float(val) if pd.notna(val) else np.nan)
+            z.append(row_z)
+
+        z = np.array(z, dtype=float)
+        z_rounded = np.round(z)
+        annotation_text = np.where(np.isnan(z), "-", np.char.mod("%.1f", z))
+
+        # X-axis: hydroclimate + scenario ID on second line
+        x_labels = [f"{hc}<br>({sid})" for hc, sid in zip(available_hc, scenario_ids)]
+        fig = go.Figure(data=go.Heatmap(
+            z=z_rounded,
+            x=x_labels,
+            y=sector_labels,
+            text=annotation_text,
+            texttemplate="<b>%{text}</b>",
+            textfont=dict(size=15, color="white", family=FONT_STACK),
+            colorscale=_DISCRETE_COLORSCALE,
+            zmin=0.5, zmax=4.5,
+            showscale=False,
+            customdata=np.array(custom_hover),
+            hovertemplate="%{customdata}<extra></extra>",
+            xgap=3, ygap=3,
+        ))
+
+        # Separator between DWR and GCM scenarios (wider gap)
+        dwr_count = sum(1 for hc in available_hc if HYDROCLIMATE_META.get(hc, {}).get("group") == "DWR")
+
+        fig.update_layout(
+            xaxis=dict(side="top", tickfont=dict(size=14, color=BRAND_TEAL, family=FONT_STACK, weight="bold"), tickangle=0),
+            yaxis=dict(autorange="reversed", tickfont=dict(size=13, family=FONT_STACK, weight="bold"), dtick=1),
+            margin=dict(t=60, b=10, l=190, r=40),
+            height=max(400, len(TIER_COLS) * 36 + 80),
+            plot_bgcolor="white", paper_bgcolor="white",
+            dragmode=False,
+            font=dict(family=FONT_STACK),
+        )
+
+        # Stress counts
+        t34_counts = []
+        t4_counts = []
+        for j in range(len(available_hc)):
+            col_vals = z_rounded[:, j]
+            valid = col_vals[~np.isnan(col_vals)]
+            t34_counts.append(int(np.sum(valid >= 3)))
+            t4_counts.append(int(np.sum(valid >= 4)))
+
+        # Stress counts as HTML
+        stress_cells = []
+        for j, hc in enumerate(available_hc):
+            cell_children = [
+                html.Div(f"Tier 3-4: {t34_counts[j]}", style={"fontSize": "13px", "fontWeight": "700", "color": "#EF6C00"}),
+                html.Div(f"Tier 4: {t4_counts[j]}", style={"fontSize": "13px", "fontWeight": "700", "color": "#C62828"}),
+            ]
+            cell_style = {"textAlign": "center", "flex": "1", "padding": "4px 0"}
+            stress_cells.append(html.Div(style=cell_style, children=cell_children))
+
+        stress_row = html.Div(style={"display": "flex", "marginLeft": "190px", "marginRight": "40px", "marginTop": "8px", "gap": "3px"}, children=stress_cells)
+
+        # Legend
+        legend_items = []
+        for tier, color in TIER_COLORS.items():
+            legend_items.append(html.Div(style={"display": "flex", "alignItems": "center", "gap": "6px"}, children=[
+                html.Div(style={"width": "18px", "height": "18px", "backgroundColor": color, "borderRadius": "3px"}),
+                html.Span(f"Tier {tier}", style={"fontSize": "13px", "fontWeight": "700", "color": color}),
+            ]))
+
+        legend = html.Div(style={"display": "flex", "justifyContent": "center", "gap": "28px", "marginTop": "16px"}, children=legend_items)
+
+        fig_height = max(400, len(TIER_COLS) * 36 + 80)
+        show = {"display": "block", "height": f"{fig_height}px"}
+
+        return title, fig, show, stress_row, legend
+
+    # --- Download callbacks ---
+    from downloads import register_plotly_png_callback
+    register_plotly_png_callback(app, "res-plot-scenario")
+
+    @app.callback(
+        Output("dl-csv-res-plot-scenario", "data"),
+        Input("dl-csv-btn-res-plot-scenario", "n_clicks"),
+        [State("res-strategy-dropdown", "value"), State("res-hc-dropdown", "value")],
+        prevent_initial_call=True,
+    )
+    def download_scenario_csv(n_clicks, strategy, selected_hc):
+        from dash.exceptions import PreventUpdate
+        if not n_clicks or not strategy:
+            raise PreventUpdate
+        selected_hc = list(selected_hc or HYDROCLIMATE_ORDER)
+        out = res_tier_df[(res_tier_df["strategy"] == strategy) & (res_tier_df["hydroclimate"].isin(selected_hc))].copy()
+        hc_order = {hc: i for i, hc in enumerate(selected_hc)}
+        out["_order"] = out["hydroclimate"].map(hc_order)
+        out = out.sort_values("_order").drop(columns=["_order"])
+        cols = ["scenario", "strategy", "hydroclimate"] + TIER_COLS
+        out = out[[c for c in cols if c in out.columns]]
+        return dcc.send_data_frame(out.to_csv, f"resilience_{strategy}.csv", index=False)
+
+    # --- View 2: System-wide heatmap ---
+    @app.callback(
+        [Output("res-title-system", "children"),
+         Output("res-plot-system", "figure"),
+         Output("res-plot-system", "style"),
+         Output("res-stress-row-system", "children"),
+         Output("res-legend-row-system", "children")],
+        [Input("res-system-rows-store", "data")],
+    )
+    def update_system_view(selected_rows):
+        empty_fig = go.Figure()
+        empty_fig.update_layout(height=100, margin=dict(t=0, b=0, l=0, r=0), paper_bgcolor="white", plot_bgcolor="white", xaxis=dict(visible=False), yaxis=dict(visible=False))
+        hide = {"display": "none"}
+
+        selected_rows = list(selected_rows or [])
+        if not selected_rows:
+            return "Select scenario rows to compare", empty_fig, hide, "", ""
+
+        # Parse "strategy|hydroclimate" values
+        pairs = []
+        for rv in selected_rows:
+            parts = rv.split("|")
+            if len(parts) == 2:
+                pairs.append((parts[0], parts[1]))
+
+        if not pairs:
+            return "Select scenario rows to compare", empty_fig, hide, "", ""
+
+        # Filter to selected strategy x hydroclimate pairs
+        mask = pd.Series(False, index=res_tier_df.index)
+        for strat, hc in pairs:
+            mask |= (res_tier_df["strategy"] == strat) & (res_tier_df["hydroclimate"] == hc)
+        view_df = res_tier_df[mask].copy()
+        if view_df.empty:
+            return "No data available", empty_fig, hide, "", ""
+
+        # Preserve selection order
+        pair_order = {f"{s}|{h}": i for i, (s, h) in enumerate(pairs)}
+        view_df["_order"] = view_df.apply(lambda r: pair_order.get(f"{r['strategy']}|{r['hydroclimate']}", 999), axis=1)
+        view_df = view_df.sort_values("_order").drop(columns=["_order"])
+
+        # Row labels
+        row_labels = []
+        for _, row in view_df.iterrows():
+            row_labels.append(f"{row['strategy']} - {row['hydroclimate']} ({row['scenario']})")
+
+        sector_labels = [TIER_LABELS.get(c, c) for c in TIER_COLS]
+
+        # Build z-matrix: rows = strategy x hydroclimate combos, columns = sectors
+        z = []
+        custom_hover = []
+        for idx, (_, row) in enumerate(view_df.iterrows()):
+            row_z = []
+            row_hover = []
+            for i, col in enumerate(TIER_COLS):
+                val = row[col]
+                row_z.append(float(val) if pd.notna(val) else np.nan)
+                desc = STRATEGY_DESC.get(row["strategy"], "")
+                if pd.isna(val):
+                    row_hover.append(f"<b>{sector_labels[i]}</b><br>{row['strategy']}: {desc}<br>{row['hydroclimate']} ({row['scenario']})<br>No data")
+                else:
+                    tier_hover = _get_tier_hover(col, val)
+                    row_hover.append(f"<b>{sector_labels[i]}</b><br>{row['strategy']}: {desc}<br>{row['hydroclimate']} ({row['scenario']})<br>Tier value: {val:.2f}{tier_hover}")
+            z.append(row_z)
+            custom_hover.append(row_hover)
+
+        z = np.array(z, dtype=float)
+        z_rounded = np.round(z)
+        annotation_text = np.where(np.isnan(z), "-", np.char.mod("%.1f", z))
+
+        fig = go.Figure(data=go.Heatmap(
+            z=z_rounded,
+            x=sector_labels,
+            y=row_labels,
+            text=annotation_text,
+            texttemplate="<b>%{text}</b>",
+            textfont=dict(size=13, color="white", family=FONT_STACK),
+            colorscale=_DISCRETE_COLORSCALE,
+            zmin=0.5, zmax=4.5,
+            showscale=False,
+            customdata=np.array(custom_hover),
+            hovertemplate="%{customdata}<extra></extra>",
+            xgap=3, ygap=3,
+        ))
+
+        n_rows = len(row_labels)
+        fig.update_layout(
+            xaxis=dict(side="top", tickfont=dict(size=12, color=BRAND_TEAL, family=FONT_STACK, weight="bold"), tickangle=45),
+            yaxis=dict(autorange="reversed", tickfont=dict(size=11, family=FONT_STACK, weight="bold"), dtick=1),
+            margin=dict(t=120, b=10, l=300, r=40),
+            height=max(400, n_rows * 32 + 140),
+            plot_bgcolor="white", paper_bgcolor="white",
+            dragmode=False,
+            font=dict(family=FONT_STACK),
+        )
+
+        n_strategies = len(set(p[0] for p in pairs))
+        n_hc = len(set(p[1] for p in pairs))
+        title = f"System-Wide: {n_strategies} strategies x {n_hc} hydroclimates"
+
+        # Stress counts per sector column
+        t34_counts = []
+        t4_counts = []
+        for j in range(len(TIER_COLS)):
+            col_vals = z_rounded[:, j]
+            valid = col_vals[~np.isnan(col_vals)]
+            t34_counts.append(int(np.sum(valid >= 3)))
+            t4_counts.append(int(np.sum(valid >= 4)))
+
+        # Legend
+        legend_items = []
+        for tier, color in TIER_COLORS.items():
+            legend_items.append(html.Div(style={"display": "flex", "alignItems": "center", "gap": "6px"}, children=[
+                html.Div(style={"width": "18px", "height": "18px", "backgroundColor": color, "borderRadius": "3px"}),
+                html.Span(f"Tier {tier}", style={"fontSize": "13px", "fontWeight": "700", "color": color}),
+            ]))
+        legend = html.Div(style={"display": "flex", "justifyContent": "center", "gap": "28px", "marginTop": "16px"}, children=legend_items)
+
+        fig_height = max(400, n_rows * 32 + 140)
+        show = {"display": "block", "height": f"{fig_height}px"}
+
+        return title, fig, show, "", legend
+
+    # --- System-wide download callbacks ---
+    register_plotly_png_callback(app, "res-plot-system")
+
+    @app.callback(
+        Output("dl-csv-res-plot-system", "data"),
+        Input("dl-csv-btn-res-plot-system", "n_clicks"),
+        [State("res-system-rows-store", "data")],
+        prevent_initial_call=True,
+    )
+    def download_system_csv(n_clicks, selected_rows):
+        from dash.exceptions import PreventUpdate
+        if not n_clicks or not selected_rows:
+            raise PreventUpdate
+        pairs = [rv.split("|") for rv in selected_rows if "|" in rv]
+        mask = pd.Series(False, index=res_tier_df.index)
+        for strat, hc in pairs:
+            mask |= (res_tier_df["strategy"] == strat) & (res_tier_df["hydroclimate"] == hc)
+        out = res_tier_df[mask].copy()
+        cols = ["scenario", "strategy", "hydroclimate"] + TIER_COLS
+        out = out[[c for c in cols if c in out.columns]]
+        return dcc.send_data_frame(out.to_csv, "resilience_system_wide.csv", index=False)
+
+    # --- View 3: LOI filter checklist ---
+    @app.callback(
+        [Output("res-loi-filter-content", "style"),
+         Output("res-loi-no-lois", "style"),
+         Output("res-loi-checklist", "options"),
+         Output("res-loi-checklist", "value"),
+         Output("res-loi-title", "children")],
+        Input("res-outcome-dropdown", "value"),
+    )
+    def build_loi_checklist(sector):
+        show, hide = {"display": "block"}, {"display": "none"}
+        if not sector or not HAS_LOI_DATA:
+            return hide, hide, [], [], ""
+        lois = LOI_MAPPING.get(sector, [])
+        if not lois:
+            return hide, show, [], [], ""
+        loi_names = [l["loi"] for l in lois]
+        options = [{"label": name, "value": name} for name in loi_names]
+        return show, hide, options, loi_names, f"Filter LOIs ({len(loi_names)} available)"
+
+
+    # --- View 3: Outcome-specific heatmap ---
+    @app.callback(
+        [Output("res-title-outcome", "children"),
+         Output("res-plot-outcome", "figure"),
+         Output("res-plot-outcome", "style"),
+         Output("res-legend-row-outcome", "children")],
+        [Input("res-outcome-dropdown", "value"),
+         Input("res-outcome-strategies", "value"),
+         Input("res-loi-checklist", "value")],
+    )
+    def update_outcome_view(sector, strategies, selected_lois):
+        empty_fig = go.Figure()
+        empty_fig.update_layout(height=100, margin=dict(t=0, b=0, l=0, r=0), paper_bgcolor="white", plot_bgcolor="white", xaxis=dict(visible=False), yaxis=dict(visible=False))
+        hide = {"display": "none"}
+
+        strategies = list(strategies or [])
+        if not sector:
+            return "Select a sector to compare", empty_fig, hide, ""
+        if not strategies:
+            return f"{TIER_LABELS.get(sector, sector)} - select strategies", empty_fig, hide, ""
+
+        view_df = res_tier_df[res_tier_df["strategy"].isin(strategies)].copy()
+        if view_df.empty:
+            return "No data available", empty_fig, hide, ""
+
+        # If LOI filter is active and we have LOI data, recalculate averages
+        all_lois = LOI_MAPPING.get(sector, [])
+        all_loi_names = [l["loi"] for l in all_lois]
+        selected_lois = list(selected_lois or [])
+        using_loi_filter = HAS_LOI_DATA and len(all_loi_names) > 0 and len(selected_lois) > 0 and set(selected_lois) != set(all_loi_names)
+
+        if using_loi_filter:
+            # Recalculate sector average from selected LOIs only
+            valid_lois = [l for l in selected_lois if l in _loi_tiers.columns]
+            if valid_lois:
+                loi_lookup = _loi_tiers.set_index("scenario")
+                for idx, row in view_df.iterrows():
+                    scen = row["scenario"]
+                    if scen in loi_lookup.index:
+                        loi_vals = loi_lookup.loc[scen, valid_lois]
+                        view_df.at[idx, sector] = loi_vals.mean(skipna=True)
+                    # else: keep the existing value (synthetic or pre-computed)
+
+        # Order by strategy selection, then hydroclimate order
+        strat_order = {s: i for i, s in enumerate(strategies)}
+        hc_order = {hc: i for i, hc in enumerate(HYDROCLIMATE_ORDER)}
+        view_df["_s_order"] = view_df["strategy"].map(strat_order)
+        view_df["_h_order"] = view_df["hydroclimate"].map(hc_order)
+        view_df = view_df.sort_values(["_s_order", "_h_order"]).drop(columns=["_s_order", "_h_order"])
+
+        # Get available hydroclimates across all selected strategies
+        available_hc = [hc for hc in HYDROCLIMATE_ORDER if hc in view_df["hydroclimate"].values]
+
+        # Build z-matrix: rows = strategies, columns = hydroclimates
+        # Each cell = tier value for the selected sector
+        row_labels = []
+        z = []
+        custom_hover = []
+        for strat in strategies:
+            strat_rows = view_df[view_df["strategy"] == strat]
+            desc = STRATEGY_DESC.get(strat, "")
+            theme = STRATEGY_THEME.get(strat, "")
+            row_label = f"{strat} ({theme})"
+            row_labels.append(row_label)
+            row_z = []
+            row_hover = []
+            for hc in available_hc:
+                hc_row = strat_rows[strat_rows["hydroclimate"] == hc]
+                if hc_row.empty:
+                    row_z.append(np.nan)
+                    row_hover.append(f"<b>{row_label}</b><br>{hc}<br>No data")
+                else:
+                    val = hc_row[sector].values[0]
+                    sid = hc_row["scenario"].values[0]
+                    if pd.isna(val):
+                        row_z.append(np.nan)
+                        row_hover.append(f"<b>{row_label}</b><br>{hc} ({sid})<br>{desc}<br>No data")
+                    else:
+                        row_z.append(float(val))
+                        tier_hover = _get_tier_hover(sector, val)
+                        row_hover.append(f"<b>{row_label}</b><br>{hc} ({sid})<br>{desc}<br>Tier value: {val:.2f}{tier_hover}")
+            z.append(row_z)
+            custom_hover.append(row_hover)
+
+        z = np.array(z, dtype=float)
+        z_rounded = np.round(z)
+        annotation_text = np.where(np.isnan(z), "-", np.char.mod("%.1f", z))
+
+        fig = go.Figure(data=go.Heatmap(
+            z=z_rounded,
+            x=available_hc,
+            y=row_labels,
+            text=annotation_text,
+            texttemplate="<b>%{text}</b>",
+            textfont=dict(size=15, color="white", family=FONT_STACK),
+            colorscale=_DISCRETE_COLORSCALE,
+            zmin=0.5, zmax=4.5,
+            showscale=False,
+            customdata=np.array(custom_hover),
+            hovertemplate="%{customdata}<extra></extra>",
+            xgap=3, ygap=3,
+        ))
+
+        n_rows = len(row_labels)
+        fig.update_layout(
+            xaxis=dict(side="top", tickfont=dict(size=14, color=BRAND_TEAL, family=FONT_STACK, weight="bold"), tickangle=0),
+            yaxis=dict(autorange="reversed", tickfont=dict(size=12, family=FONT_STACK, weight="bold"), dtick=1),
+            margin=dict(t=60, b=10, l=220, r=40),
+            height=max(300, n_rows * 36 + 100),
+            plot_bgcolor="white", paper_bgcolor="white",
+            dragmode=False,
+            font=dict(family=FONT_STACK),
+        )
+
+        sector_label = TIER_LABELS.get(sector, sector)
+        loi_label = f" ({len(selected_lois)}/{len(all_loi_names)} LOIs)" if using_loi_filter else ""
+        title = f"{sector_label}{loi_label}: {len(strategies)} strategies across hydroclimates"
+
+        # Legend
+        legend_items = []
+        for tier, color in TIER_COLORS.items():
+            legend_items.append(html.Div(style={"display": "flex", "alignItems": "center", "gap": "6px"}, children=[
+                html.Div(style={"width": "18px", "height": "18px", "backgroundColor": color, "borderRadius": "3px"}),
+                html.Span(f"Tier {tier}", style={"fontSize": "13px", "fontWeight": "700", "color": color}),
+            ]))
+        legend = html.Div(style={"display": "flex", "justifyContent": "center", "gap": "28px", "marginTop": "16px"}, children=legend_items)
+
+        fig_height = max(300, n_rows * 36 + 100)
+        show = {"display": "block", "height": f"{fig_height}px"}
+
+        return title, fig, show, legend
+
+    # --- Outcome download callbacks ---
+    register_plotly_png_callback(app, "res-plot-outcome")
+
+    @app.callback(
+        Output("dl-csv-res-plot-outcome", "data"),
+        Input("dl-csv-btn-res-plot-outcome", "n_clicks"),
+        [State("res-outcome-dropdown", "value"), State("res-outcome-strategies", "value")],
+        prevent_initial_call=True,
+    )
+    def download_outcome_csv(n_clicks, sector, strategies):
+        from dash.exceptions import PreventUpdate
+        if not n_clicks or not sector or not strategies:
+            raise PreventUpdate
+        strategies = list(strategies or [])
+        out = res_tier_df[res_tier_df["strategy"].isin(strategies)].copy()
+        cols = ["scenario", "strategy", "hydroclimate", sector]
+        out = out[[c for c in cols if c in out.columns]]
+        return dcc.send_data_frame(out.to_csv, f"resilience_outcome_{sector}.csv", index=False)

varmatch.py

@@ -0,0 +1,164 @@
+"""Single source of truth for CalSim3 column-name grammar and variable matching.
+
+Every COEQWAL column encodes the same grammar:
+
+    Part B (MultiIndex level 1):  ``<base>_s####``        e.g. ``S_SHSTA_s0020``
+    flattened (dashboard):        ``<SOURCE>_<base>_s####_<C>_<D>_<E>_<F>_<UNIT>``
+                                  e.g. ``CALSIM_S_SHSTA_s0020_STORAGE_1MON_L2020A_PER-AVER_TAF``
+
+This module is the ONLY place that knows that grammar. It does exact, parse-based
+matching of a variable to its column(s) -- it never substring-matches, so a base
+name that is a prefix of another (``S_SHSTA`` vs ``S_SHSTALEVEL1DV``;
+``DEL_CVP_TOTAL`` vs ``DEL_CVP_TOTAL_N``) can never collide.
+
+Design rules:
+  * Pure: depends only on ``re`` / ``numpy``. Imports no other coeqwal module, so it
+    can be a dependency of both ``metrics`` and ``cqwlutils`` without a cycle, and can
+    be vendored byte-for-byte into the standalone dashboard.
+  * No silent fallback: ``col_for`` RAISES on an ambiguous match instead of silently
+    returning the first column. Over-matching surfaces immediately.
+
+Variable names passed in are always the BARE base (``"S_SHSTA"``, ``"DEL_SWP_TOTA"``) --
+never a trailing-underscore form. The grammar boundary (``_s####``) is supplied here.
+"""
+
+import re
+
+import numpy as np
+
+# Known Part-A source prefixes seen in flattened dashboard column names.
+SOURCES = ("CALSIM", "CALCULATED", "MANUAL-ADD", "IWFM")
+
+_SCEN = r"s\d+"
+_PARTB_RE = re.compile(rf"^(?P<base>.+)_(?P<scen>{_SCEN})$")          # greedy: takes the LAST _s####
+_SRC_RE = re.compile(r"^(?P<src>" + "|".join(SOURCES) + r")_(?P<rest>.+)$")
+_FLAT_RE = re.compile(rf"^(?P<base>.+?)_(?P<scen>{_SCEN})(?:_(?P<tail>.*))?$")  # non-greedy: first _s####
+
+
+def sid(n):
+    """Canonical scenario id. Accepts int (20), str ('20' or 's0020') -> 's0020'."""
+    if isinstance(n, str):
+        m = re.fullmatch(r"s?0*(\d+)", n.strip())
+        if not m:
+            raise ValueError(f"varmatch.sid: not a scenario id: {n!r}")
+        n = int(m.group(1))
+    return f"s{int(n):04d}"
+
+
+def parse_column(col):
+    """Parse a column into ``{source, base, scenario, unit}`` or ``None``.
+
+    Handles both a 7-level MultiIndex tuple and a flattened string. Returns ``None``
+    for columns that are not ``<base>_s####`` variable columns (e.g. ``WaterYear``).
+    """
+    if isinstance(col, tuple):
+        pb = parse_partb(col[1])
+        if pb is None:
+            return None
+        base, scen = pb
+        unit = str(col[6]).strip() if len(col) > 6 and col[6] is not None else None
+        return {"source": str(col[0]).strip(), "base": base, "scenario": scen, "unit": unit}
+    return _parse_flat(str(col))
+
+
+def parse_partb(part_b):
+    """``'<base>_s####'`` -> ``(base, 's####')``; ``None`` if no scenario suffix."""
+    m = _PARTB_RE.match(str(part_b).strip())
+    if not m:
+        return None
+    return m.group("base").strip(), m.group("scen")
+
+
+def _parse_flat(s):
+    s = s.strip()
+    src = None
+    m = _SRC_RE.match(s)
+    if m:
+        src, s = m.group("src"), m.group("rest")
+    m = _FLAT_RE.match(s)
+    if not m:
+        return None
+    tail = m.group("tail")
+    unit = tail.rsplit("_", 1)[-1] if tail else None
+    return {"source": src, "base": m.group("base").strip(), "scenario": m.group("scen"),
+            "unit": unit.strip() if unit else None}
+
+
+def base_of(col):
+    r = parse_column(col)
+    return r["base"] if r else None
+
+
+def scenario_of(col):
+    r = parse_column(col)
+    return r["scenario"] if r else None
+
+
+def unit_of(col):
+    r = parse_column(col)
+    return r["unit"] if r else None
+
+
+def _unit_eq(a, b):
+    if b is None:
+        return True
+    return a is not None and str(a).strip().upper() == str(b).strip().upper()
+
+
+def mask_for(columns, var, unit=None):
+    """Boolean mask selecting every column belonging to base ``var`` (any scenario),
+    optionally filtered by ``unit``. Exact base match. Also accepts an exact full
+    instance name (``"S_SHSTA_s0154"``) to select that single scenario's column --
+    still exact equality, never substring."""
+    var = str(var).strip()
+    return np.array([
+        (r := parse_column(c)) is not None and _unit_eq(r["unit"], unit)
+        and (r["base"] == var or f"{r['base']}_{r['scenario']}" == var)
+        for c in columns
+    ])
+
+
+def mask_for_many(columns, vars_, unit=None):
+    """Union mask over several bases and/or full instance names (exact).
+    Replaces ``str.contains('|'.join(...))``."""
+    want = {str(v).strip() for v in vars_}
+    return np.array([
+        (r := parse_column(c)) is not None and _unit_eq(r["unit"], unit)
+        and (r["base"] in want or f"{r['base']}_{r['scenario']}" in want)
+        for c in columns
+    ])
+
+
+def col_for(columns, var, scenario, unit=None):
+    """The single column for (base ``var``, ``scenario``[, ``unit``]).
+
+    Returns ``None`` if absent. RAISES ``ValueError`` on >1 match (ambiguity) -- never
+    silently returns the first, so over-matching is caught at the call site.
+    """
+    var = str(var).strip()
+    scen = sid(scenario)
+    matches = [
+        c for c in columns
+        if (r := parse_column(c)) is not None
+        and r["base"] == var and r["scenario"] == scen and _unit_eq(r["unit"], unit)
+    ]
+    if len(matches) > 1:
+        raise ValueError(
+            f"varmatch.col_for: ambiguous match for var={var!r} scenario={scen!r} "
+            f"unit={unit!r} -> {len(matches)} columns: {matches[:4]}"
+        )
+    return matches[0] if matches else None
+
+
+def build_index(columns):
+    """``{(base, scenario, unit): column}`` for O(1) exact lookup. Raises on collision."""
+    idx = {}
+    for c in columns:
+        r = parse_column(c)
+        if r is None:
+            continue
+        key = (r["base"], r["scenario"], r["unit"])
+        if key in idx:
+            raise ValueError(f"varmatch.build_index: duplicate key {key}: {idx[key]} vs {c}")
+        idx[key] = c
+    return idx