Major UI overhaul: Skew-T, 4-tab layout, branding, bug fixes

- Add full Skew-T log-P diagram with parcel trace, CAPE/CIN shading,
wind barbs (NH convention), and level markers (LCL/LFC/EL/Top)
- Restructure UI into Inputs / Outputs / Getting Started / Theory tabs;
Inputs uses 2-col grid (sounding+updraft left, hodograph+zeta right)
- Move ζ(z) profile editor below hodograph; rename to "Prescribed Mesocyclone ζ(z)"
- Fix draggable circle oval bug: handle both xanchor and x0/x1 relay keys;
add missing zeta-profile redraw callback
- Unify all diverging colormaps to RdBu_r
- Add UIUC CliMAS logo, cloud SVG favicon, updated page title/subtitle
- Fix Greek character rendering: remove text-transform:uppercase from section titles
- Label pressure reference lines on Skew-T; fix y-axis range (1025–98 hPa)
- Change "Weak shear" preset to "Linear shear"
- Add LaTeX equations and Model Assumptions table to Theory page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

python/updraft_forcing/app.py

@@ -132,6 +132,7 @@ def _run_model(snd_params, upd_params, u_pts, v_pts, zeta_cpts):
         "p_buoy":   p_buoy,
         **accels,
         "snd":      snd,
+        "T_parcel": wp["T_parcel"],
         "w_z":      wp["w_z"],
         "B_z":      wp["B_z"],
         "EL_m":     wp["EL_m"],
@@ -171,8 +172,8 @@ def _slider(id_, label, mn, mx, step, value, unit="", tip=""):
     )
 
 
-def _profile_editor(fig_id, title, values, z_km, xunit, xrange):
-    """Draggable profile graph (Mountain Waves pattern)."""
+def _profile_editor_fig(title, values, z_km, xunit, xrange):
+    """Return a go.Figure for a draggable profile editor."""
     values = np.asarray(values, dtype=float)
     z_km   = np.asarray(z_km,   dtype=float)
     vlo, vhi = xrange
@@ -205,8 +206,14 @@ def _profile_editor(fig_id, title, values, z_km, xunit, xrange):
         yaxis=dict(range=[0, z_km[-1] + 0.5], fixedrange=True),
         shapes=shapes,
     )
+    return fig
+
+
+def _profile_editor(fig_id, title, values, z_km, xunit, xrange):
+    """Draggable profile graph (Mountain Waves pattern)."""
     return dcc.Graph(
-        id=fig_id, figure=fig,
+        id=fig_id,
+        figure=_profile_editor_fig(title, values, z_km, xunit, xrange),
         config={"edits": {"shapePosition": True}, "displayModeBar": False, "scrollZoom": False},
     )
 
@@ -668,6 +675,283 @@ def _theory_content():
     ])
 
 
+# ---------------------------------------------------------------------------
+# Skew-T helpers
+# ---------------------------------------------------------------------------
+
+_SKEW        = 45.0   # °C shift per log10-pressure decade
+_BARB_X      = 60.0   # x anchor for wind barb tips (skewed °C)
+_BARB_ASPECT = 120.0  # x-units per 1 log10-p unit (matches ~550px / ~4.5px/unit plot)
+_BARB_STAFF  = 5.0
+_BARB_FULL   = 2.8
+_BARB_HALF   = 1.4
+_BARB_SEP    = 0.91
+
+
+def _sx(T_C, p_hPa):
+    """Skew-T x coordinate."""
+    return np.asarray(T_C, float) + _SKEW * np.log10(1000.0 / np.asarray(p_hPa, float))
+
+
+def _wind_barbs_trace(env_u, env_v, p_snd):
+    """
+    Return (xs, ys) lists (with None separators) for a single wind-barb
+    go.Scatter trace.  NH convention: staff points upwind; flags on the right
+    when looking from tip toward tail (CW 90° from the upwind direction).
+    """
+    barb_lvls = [1000, 925, 850, 700, 600, 500, 400, 300, 250, 200, 150, 100]
+    # np.interp requires xp increasing; p_snd decreases, so reverse
+    p_rev = p_snd[::-1]
+    u_rev = env_u[::-1]
+    v_rev = env_v[::-1]
+
+    xs: list = []
+    ys: list = []
+
+    def screen(ex, en, length):
+        """(east, north) direction + length → (Δx_skewed, Δlog10p)."""
+        return ex * length, -en * length / _BARB_ASPECT
+
+    for p_tgt in barb_lvls:
+        if p_tgt > p_rev[-1] or p_tgt < p_rev[0]:
+            continue
+        u = float(np.interp(p_tgt, p_rev, u_rev))
+        v = float(np.interp(p_tgt, p_rev, v_rev))
+        spd = float(np.hypot(u, v))
+        spd_kt = spd * 1.9438
+        log_p0 = np.log10(float(p_tgt))
+
+        if spd < 0.5:       # calm: tiny tick
+            xs.extend([_BARB_X - 0.4, _BARB_X + 0.4, None])
+            ys.extend([p_tgt, p_tgt, None])
+            continue
+
+        ux = -u / spd; uy = -v / spd   # upwind unit vector (E, N components)
+        pex = uy;      pen = -ux        # perpendicular = CW 90° of upwind (NH convention)
+
+        # Staff (tip → tail)
+        dx_s, dl_s = screen(ux, uy, _BARB_STAFF)
+        xs.extend([_BARB_X, _BARB_X + dx_s, None])
+        ys.extend([float(p_tgt), float(10 ** (log_p0 + dl_s)), None])
+
+        n50 = int(spd_kt // 50)
+        rem = spd_kt - n50 * 50
+        n10 = int(rem // 10);  rem -= n10 * 10
+        n5  = 1 if rem >= 5 else 0
+
+        pos = _BARB_STAFF       # current position along staff from tip
+        for _ in range(n50):    # pennants
+            dx_b, dl_b = screen(ux, uy, pos)
+            b1x, b1l = _BARB_X + dx_b, log_p0 + dl_b
+            dx_e, dl_e = screen(pex, pen, _BARB_FULL)
+            b2x, b2l = b1x + dx_e, b1l + dl_e
+            dx_b3, dl_b3 = screen(ux, uy, pos - 2 * _BARB_SEP)
+            b3x, b3l = _BARB_X + dx_b3, log_p0 + dl_b3
+            xs.extend([b1x, b2x, b3x, b1x, None])
+            ys.extend([10**b1l, 10**b2l, 10**b3l, 10**b1l, None])
+            pos -= 2 * _BARB_SEP
+        for _ in range(n10):    # full barbs
+            dx_b, dl_b = screen(ux, uy, pos)
+            b1x, b1l = _BARB_X + dx_b, log_p0 + dl_b
+            dx_e, dl_e = screen(pex, pen, _BARB_FULL)
+            xs.extend([b1x, b1x + dx_e, None])
+            ys.extend([10**b1l, 10**(b1l + dl_e), None])
+            pos -= _BARB_SEP
+        if n5:                  # half barb
+            dx_b, dl_b = screen(ux, uy, pos)
+            b1x, b1l = _BARB_X + dx_b, log_p0 + dl_b
+            dx_e, dl_e = screen(pex, pen, _BARB_HALF)
+            xs.extend([b1x, b1x + dx_e, None])
+            ys.extend([10**b1l, 10**(b1l + dl_e), None])
+
+    return xs, ys
+
+
+def _skewt_figure() -> go.Figure:
+    """Build a Skew-T log-P diagram from the current _C cache."""
+    snd = _C.get("snd")
+    if snd is None:
+        return go.Figure()
+
+    Rd = 287.04; Rv = 461.5; Lv = 2.501e6; Cp = 1005.7
+    eps = Rd / Rv; KAPPA = Rd / Cp
+
+    # Background pressure grid (surface → top, decreasing)
+    p_bg = np.concatenate([np.arange(1050, 500, -5.0), np.arange(500, 95, -2.5)])
+
+    fig = go.Figure()
+
+    # ---- isotherms ----
+    for T_iso in range(-100, 61, 10):
+        fig.add_trace(go.Scatter(
+            x=_sx(T_iso, p_bg), y=p_bg, mode="lines", hoverinfo="skip", showlegend=False,
+            line=dict(color="rgba(90,120,150,0.55)" if T_iso == 0 else "rgba(65,90,115,0.3)",
+                      width=0.9 if T_iso == 0 else 0.55)))
+
+    # ---- dry adiabats ----
+    for theta_K in [255, 265, 275, 285, 295, 305, 315, 325, 340, 360, 390]:
+        T_C = theta_K * (p_bg / 1000.0) ** KAPPA - 273.15
+        fig.add_trace(go.Scatter(
+            x=_sx(T_C, p_bg), y=p_bg, mode="lines", hoverinfo="skip", showlegend=False,
+            line=dict(color="rgba(210,155,55,0.38)", width=0.6, dash="dash")))
+
+    # ---- moist adiabats ----
+    def _ma(T0_C, p_arr):
+        T = T0_C + 273.15
+        out = []
+        for i, p in enumerate(p_arr):
+            out.append(T - 273.15)
+            if i < len(p_arr) - 1:
+                dp = p_arr[i + 1] - p
+                T_c = T - 273.15
+                es = 6.112 * np.exp(17.67 * T_c / (T_c + 243.5))
+                rs = eps * es / max(p - es, 0.1)
+                # dT/dp = (T/p) * (Rd + Lv*rs/T) / (Cp + Lv²*rs/(Rv*T²))
+                T = max(T + (T / p) * (Rd + Lv * rs / T) /
+                        (Cp + Lv**2 * rs / (Rv * T**2)) * dp, 100.0)
+        return np.array(out)
+
+    for T0 in [-25, -15, -5, 5, 15, 25, 35]:
+        T_ma = _ma(T0, p_bg)
+        mask = T_ma > -85
+        if mask.sum() >= 3:
+            fig.add_trace(go.Scatter(
+                x=_sx(T_ma[mask], p_bg[mask]), y=p_bg[mask], mode="lines",
+                hoverinfo="skip", showlegend=False,
+                line=dict(color="rgba(70,185,115,0.40)", width=0.6, dash="dash")))
+
+    # ---- mixing-ratio lines (below 550 hPa) ----
+    p_low = p_bg[p_bg >= 550]
+    for w_gkg in [2, 4, 7, 10, 16]:
+        w = w_gkg / 1000.0
+        e = p_low * w / (eps + w)
+        ln_e = np.log(np.maximum(e, 1e-6) / 6.112)
+        T_C = 243.5 * ln_e / (17.67 - ln_e)
+        mask = (T_C > -40) & (T_C < 40)
+        if mask.sum() >= 2:
+            fig.add_trace(go.Scatter(
+                x=_sx(T_C[mask], p_low[mask]), y=p_low[mask], mode="lines",
+                hoverinfo="skip", showlegend=False,
+                line=dict(color="rgba(65,150,215,0.40)", width=0.5, dash="dot")))
+
+    # ---- sounding profiles ----
+    p_snd   = snd["p_hPa"]
+    T_env_C = snd["T_K"] - 273.15
+    Td_env_C= snd["Td_K"] - 273.15
+
+    mask_snd = (p_snd >= 98) & (p_snd <= 1060)
+    p_s  = p_snd[mask_snd]
+    T_s  = T_env_C[mask_snd]
+    Td_s = Td_env_C[mask_snd]
+
+    T_pcl_K = _C.get("T_parcel")
+    T_pcl_C = (T_pcl_K[mask_snd] - 273.15) if T_pcl_K is not None else None
+
+    diag = _C.get("diag", {})
+    def _z2p(z_m):
+        return float(np.interp(float(z_m or 0), Z_GRID, p_snd))
+
+    p_LCL = _z2p(diag.get("LCL_m", 0))
+    p_LFC = _z2p(diag.get("LFC_m", 0))
+    p_EL  = _z2p(_C.get("EL_m", 0))
+    p_top = _z2p(_C.get("z_top_m", 0))
+
+    # CAPE shading
+    if T_pcl_C is not None:
+        cm = (p_s <= p_LFC + 5) & (p_s >= p_EL - 5) & (T_pcl_C > T_s)
+        if cm.sum() >= 2:
+            xenv, xpcl = _sx(T_s[cm], p_s[cm]), _sx(T_pcl_C[cm], p_s[cm])
+            fig.add_trace(go.Scatter(
+                x=list(xenv) + list(xpcl[::-1]), y=list(p_s[cm]) + list(p_s[cm][::-1]),
+                fill="toself", fillcolor="rgba(50,200,70,0.22)",
+                line=dict(width=0), showlegend=False, hoverinfo="skip"))
+        # CIN shading
+        cm2 = (p_s >= p_LFC - 5) & (T_pcl_C < T_s)
+        if cm2.sum() >= 2:
+            xenv, xpcl = _sx(T_s[cm2], p_s[cm2]), _sx(T_pcl_C[cm2], p_s[cm2])
+            fig.add_trace(go.Scatter(
+                x=list(xenv) + list(xpcl[::-1]), y=list(p_s[cm2]) + list(p_s[cm2][::-1]),
+                fill="toself", fillcolor="rgba(180,180,180,0.18)",
+                line=dict(width=0), showlegend=False, hoverinfo="skip"))
+
+    fig.add_trace(go.Scatter(
+        x=_sx(T_s, p_s), y=p_s, mode="lines", name="Temp",
+        line=dict(color="#e06c6c", width=2.5),
+        hovertemplate="%{text}°C @ %{y:.0f} hPa<extra>T</extra>",
+        text=[f"{t:.1f}" for t in T_s]))
+    fig.add_trace(go.Scatter(
+        x=_sx(Td_s, p_s), y=p_s, mode="lines", name="Dewpt",
+        line=dict(color="#5ac85a", width=2.5),
+        hovertemplate="%{text}°C @ %{y:.0f} hPa<extra>Td</extra>",
+        text=[f"{t:.1f}" for t in Td_s]))
+    if T_pcl_C is not None:
+        fig.add_trace(go.Scatter(
+            x=_sx(T_pcl_C, p_s), y=p_s, mode="lines", name="Parcel",
+            line=dict(color="#ffd685", width=1.8, dash="dash"),
+            hovertemplate="%{text}°C @ %{y:.0f} hPa<extra>Parcel</extra>",
+            text=[f"{t:.1f}" for t in T_pcl_C]))
+
+    # Level lines
+    for p_lvl, label, color in [
+        (p_LCL, "LCL", "#9abfff"), (p_LFC, "LFC", "#ffaa44"),
+        (p_EL,  "EL",  "#ffd685"), (p_top, "Top", "#ff8c00"),
+    ]:
+        if 98 < p_lvl < 1060:
+            fig.add_hline(y=p_lvl, line=dict(color=color, width=0.9, dash="dot"),
+                annotation_text=label, annotation_position="top left",
+                annotation_font=dict(color=color, size=10))
+
+    # Wind barbs
+    env_u = _C.get("env_u"); env_v = _C.get("env_v")
+    if env_u is not None and env_v is not None:
+        bx, by = _wind_barbs_trace(env_u, env_v, p_snd)
+        if bx:
+            fig.add_trace(go.Scatter(x=bx, y=by, mode="lines",
+                line=dict(color="#ccd3db", width=1.2),
+                showlegend=False, hoverinfo="skip"))
+        # Vertical guide line for barb column
+        fig.add_vline(x=_BARB_X - _BARB_STAFF - 0.5,
+                      line=dict(color="rgba(80,100,120,0.3)", width=0.6))
+
+    p_ticks = [1000, 925, 850, 700, 600, 500, 400, 300, 250, 200, 150, 100]
+    x_lo = min(float(_sx(T_s.min() - 5, 1050)), -55.0)
+    x_hi = max(float(_sx(T_s.max() + 2, min(p_s))), _BARB_X + _BARB_FULL + 2)
+
+    fig.update_layout(
+        template="plotly_dark",
+        height=620,
+        margin=dict(l=60, r=15, t=18, b=40),
+        paper_bgcolor="#11161f",
+        plot_bgcolor="#0a0f1a",
+        xaxis=dict(
+            title="Temperature (°C)",
+            range=[x_lo, x_hi],
+            tickmode="array",
+            tickvals=list(range(-80, 61, 10)),
+            ticktext=[str(t) for t in range(-80, 61, 10)],
+            showgrid=False, zeroline=False,
+        ),
+        yaxis=dict(
+            title="Pressure (hPa)",
+            type="log",
+            range=[np.log10(1025), np.log10(98)],
+            tickmode="array",
+            tickvals=p_ticks,
+            ticktext=[str(p) for p in p_ticks],
+            showgrid=False,
+        ),
+        legend=dict(x=0.01, y=0.01, font=dict(size=11),
+                    bgcolor="rgba(10,15,26,0.8)",
+                    bordercolor="#2d3a4b", borderwidth=1),
+    )
+    for p_ref in [1000, 850, 700, 500, 300, 200]:
+        fig.add_hline(y=p_ref, line=dict(color="rgba(90,120,150,0.22)", width=0.6),
+                      annotation_text=f"{p_ref}",
+                      annotation_position="left",
+                      annotation_font=dict(size=9, color="rgba(130,155,185,0.7)"))
+    return fig
+
+
 # ---------------------------------------------------------------------------
 # Layout
 # ---------------------------------------------------------------------------
@@ -675,160 +959,190 @@ def _theory_content():
 def _build_layout():
     diag = _run_model(SND_DEFAULTS, UPD_DEFAULTS, WK_U, WK_V, ZETA_DEFAULTS)
 
-    # ---- Left panel ----
-    left = html.Div(className="uf-left", children=[
-        dcc.Tabs(id="ctrl-tabs", value="sounding", className="uf-tabs", children=[
-
-            dcc.Tab(label="Sounding", value="sounding", className="uf-tab",
-                    selected_className="uf-tab-sel", children=html.Div([
-                html.Div("Weisman-Klemp Sounding", className="uf-section-title"),
-                _slider("snd-theta-ml", "θ_ml (K)", 295, 315, 0.5, SND_DEFAULTS["theta_ml"],
-                        tip="Mixed-layer potential temperature. Higher values give a warmer "
-                            "boundary layer and more buoyancy."),
-                _slider("snd-qv-ml", "qv_ml (g/kg)", 8, 20, 0.5, SND_DEFAULTS["qv_ml"],
-                        tip="Boundary-layer water vapor mixing ratio. More moisture lowers "
-                            "the LCL and increases CAPE."),
-                _slider("snd-z-ml", "BL depth (m)", 500, 2000, 100, SND_DEFAULTS["z_ml"], " m",
-                        tip="Depth of the well-mixed layer. The constant-θ and qv profile "
-                            "extends to this height."),
-                _slider("snd-z-trop", "Tropopause ht. (m)", 9000, 14000, 250,
-                        SND_DEFAULTS["z_trop"], " m",
-                        tip="Height of the tropopause. A higher tropopause allows a deeper "
-                            "updraft and more CAPE."),
-                _slider("snd-T-trop", "Tropopause T (K)", 195, 220, 1,
-                        SND_DEFAULTS["T_trop"], " K",
-                        tip="Temperature at the tropopause. Colder tropopause → larger "
-                            "temperature difference from the surface → more CAPE."),
-                _slider("snd-gamma", "Lapse rate exp.", 0.8, 1.8, 0.05,
-                        SND_DEFAULTS["gamma_ft"],
-                        tip="Shape exponent γ for the free-troposphere θ profile: "
-                            "θ = θ_ml + (θ_trop−θ_ml)·((z−z_ml)/(z_trop−z_ml))^γ. "
-                            "γ=1 linear; γ<1 more unstable near surface; γ>1 near tropopause."),
-                html.Div(className="uf-preset-row", children=[
-                    html.Button("WK Supercell", id="preset-wk",   className="uf-btn"),
-                    html.Button("Weak shear",   id="preset-weak", className="uf-btn"),
-                    html.Button("Reset",        id="preset-reset", className="uf-btn"),
-                ]),
-            ])),
+    # =========================================================
+    # INPUTS TAB — three columns: Sounding | Hodograph | Updraft
+    # =========================================================
+    snd_col = html.Div(className="inp-col", children=[
+        html.Div("Weisman-Klemp Sounding", className="uf-section-title"),
+        _slider("snd-theta-ml", "θ_ml (K)", 295, 315, 0.5, SND_DEFAULTS["theta_ml"],
+                tip="Mixed-layer potential temperature. Higher values give a warmer "
+                    "boundary layer and more buoyancy."),
+        _slider("snd-qv-ml", "qv_ml (g/kg)", 8, 20, 0.5, SND_DEFAULTS["qv_ml"],
+                tip="Boundary-layer water vapor mixing ratio. More moisture lowers "
+                    "the LCL and increases CAPE."),
+        _slider("snd-z-ml", "BL depth (m)", 500, 2000, 100, SND_DEFAULTS["z_ml"], " m",
+                tip="Depth of the well-mixed layer. The constant-θ and qv profile "
+                    "extends to this height."),
+        _slider("snd-z-trop", "Tropopause ht. (m)", 9000, 14000, 250,
+                SND_DEFAULTS["z_trop"], " m",
+                tip="Height of the tropopause. A higher tropopause allows a deeper "
+                    "updraft and more CAPE."),
+        _slider("snd-T-trop", "Tropopause T (K)", 195, 220, 1,
+                SND_DEFAULTS["T_trop"], " K",
+                tip="Temperature at the tropopause. Colder tropopause → larger "
+                    "temperature difference from the surface → more CAPE."),
+        _slider("snd-gamma", "Lapse rate exp.", 0.8, 1.8, 0.05,
+                SND_DEFAULTS["gamma_ft"],
+                tip="Shape exponent γ for the free-troposphere θ profile: "
+                    "θ = θ_ml + (θ_trop−θ_ml)·((z−z_ml)/(z_trop−z_ml))^γ. "
+                    "γ=1 linear; γ<1 more unstable near surface; γ>1 near tropopause."),
+        html.Div(className="uf-preset-row", children=[
+            html.Button("WK Supercell", id="preset-wk",    className="uf-btn"),
+            html.Button("Linear shear", id="preset-weak",  className="uf-btn"),
+            html.Button("Reset",        id="preset-reset", className="uf-btn"),
+        ]),
+    ])
 
-            dcc.Tab(label="Updraft", value="updraft", className="uf-tab",
-                    selected_className="uf-tab-sel", children=html.Div([
-                html.Div("Updraft Core", className="uf-section-title"),
-                html.Div([
-                    html.Span("ΔT surface (K)", className="uf-slider-label"),
-                    _help("Temperature excess of the surface parcel above the environment. "
-                          "Drives the diagnosed w(z): w²(z) = max(0, 2·∫B dz). "
-                          "Larger ΔT → more KE to overcome CIN → stronger updraft."),
-                    dcc.Input(id="upd-delta-T", type="number", value=UPD_DEFAULTS["delta_T"],
-                              step=0.1, min=0.1, max=10.0,
-                              style={"width": "80px", "marginLeft": "8px",
-                                     "background": "#0f1520", "border": "1px solid #2d3a4b",
-                                     "color": "#dfe3ea", "padding": "4px 8px",
-                                     "borderRadius": "4px"}),
-                ], style={"display": "flex", "alignItems": "center", "marginBottom": "10px"}),
-                _slider("upd-r0", "Radius (m)", 500, 5000, 100, UPD_DEFAULTS["r0"], " m",
-                        tip="Updraft core radius. The radial shape function tapers w and ζ "
-                            "to zero at this distance from center."),
-                html.Div([
-                    html.Div("Prescribed ζ(z) — accumulated storm rotation",
-                             className="uf-section-title", style={"marginTop": "12px"}),
-                    _help("Vertical vorticity profile representing rotation that the storm "
-                          "has built up via tilting and stretching over its lifetime. "
-                          "Drag circles rightward for cyclonic (positive) rotation. "
-                          "This drives p'_spin and updraft helicity."),
-                ], style={"display": "flex", "alignItems": "center", "gap": "6px"}),
-                _profile_editor("zeta-profile", "ζ(z) (s⁻¹)",
-                                ZETA_DEFAULTS, ZETA_Z_KM, "s⁻¹", (-0.05, 0.05)),
-                html.Div([
-                    html.Span("Core shape", className="uf-slider-label"),
-                    _help("Top-hat: uniform w inside 90% of r₀ with cosine taper in the outer 10%. "
-                          "Cosine bell: w(r) = cos(π·r/2r₀), smooth with no flat core."),
-                ], style={"display": "flex", "alignItems": "center", "gap": "6px",
-                          "marginTop": "10px"}),
-                dcc.RadioItems(
-                    id="upd-shape",
-                    options=[{"label": "  Top-hat", "value": "tophat"},
-                             {"label": "  Cosine",  "value": "cosine"}],
-                    value=UPD_DEFAULTS["shape"],
-                    labelStyle={"marginRight": "14px", "color": "#dfe3ea", "fontSize": "13px"},
-                    style={"marginBottom": "10px"},
-                ),
-            ])),
-
-            dcc.Tab(label="Hodograph", value="hodograph", className="uf-tab",
-                    selected_className="uf-tab-sel", children=html.Div([
-                html.Div("Environmental hodograph", className="uf-section-title"),
-                dcc.Graph(id="hodograph",
-                          figure=_hodo_figure(WK_U, WK_V,
-                                              storm_u=diag["storm_u"], storm_v=diag["storm_v"],
-                                              lm_u=diag["lm_u"],       lm_v=diag["lm_v"],
-                                              mean_u=diag["mean_u"],   mean_v=diag["mean_v"]),
-                          config={"edits": {"shapePosition": True},
-                                  "displayModeBar": False, "scrollZoom": False}),
-                html.Div([
-                    html.Span("Drag the gold circles to edit the wind at each level (km label). "
-                              "RM = Bunkers right-mover, LM = left-mover, × = mean wind.",
-                              style={"color": "#8f98a3", "fontSize": "11px"}),
-                    _help("Wind levels: 0, 1, 2, 3, 4, 5, 6, 8, 10 km. "
-                          "Storm motion (RM/LM) is computed using Bunkers et al. (2000): "
-                          "mean 0–6 km wind ± 7.5 m/s perpendicular to the 0–6 km shear vector. "
-                          "SRH is computed relative to the right-mover."),
-                ], style={"display": "flex", "alignItems": "flex-start", "gap": "6px",
-                          "marginTop": "6px"}),
-            ])),
+    hodo_col = html.Div(className="inp-col", style={"gridColumn": "2", "gridRow": "1 / span 2"}, children=[
+        html.Div("Environmental Hodograph", className="uf-section-title"),
+        dcc.Graph(id="hodograph",
+                  figure=_hodo_figure(WK_U, WK_V,
+                                      storm_u=diag["storm_u"], storm_v=diag["storm_v"],
+                                      lm_u=diag["lm_u"],       lm_v=diag["lm_v"],
+                                      mean_u=diag["mean_u"],   mean_v=diag["mean_v"]),
+                  config={"edits": {"shapePosition": True},
+                          "displayModeBar": False, "scrollZoom": False}),
+        html.Div([
+            html.Span("Drag gold circles to edit wind at each level. "
+                      "RM = right-mover, LM = left-mover, × = mean wind.",
+                      style={"color": "#8f98a3", "fontSize": "11px"}),
+            _help("Wind levels: 0, 1, 2, 3, 4, 5, 6, 8, 10 km. "
+                  "Storm motion from Bunkers et al. (2000): "
+                  "mean 0–6 km wind ± 7.5 m/s ⊥ to shear vector. "
+                  "SRH computed relative to the right-mover."),
+        ], style={"display": "flex", "alignItems": "flex-start", "gap": "6px",
+                  "marginTop": "6px"}),
+        html.Div([
+            html.Div("Prescribed Mesocyclone ζ(z)",
+                     className="uf-section-title", style={"marginTop": "14px"}),
+            _help("Vertical vorticity profile representing rotation the storm has built "
+                  "up. Drag circles rightward for cyclonic (positive) rotation. "
+                  "Drives p'_spin and updraft helicity."),
+        ], style={"display": "flex", "alignItems": "center", "gap": "6px"}),
+        _profile_editor("zeta-profile", "ζ(z) (s⁻¹)",
+                        ZETA_DEFAULTS, ZETA_Z_KM, "s⁻¹", (-0.05, 0.05)),
+    ])
+
+    upd_col = html.Div(className="inp-col", children=[
+        html.Div("Updraft Core", className="uf-section-title"),
+        html.Div([
+            html.Span("ΔT surface (K)", className="uf-slider-label"),
+            _help("Temperature excess of the surface parcel above the environment. "
+                  "Drives the diagnosed w(z): w²(z) = max(0, 2·∫B dz). "
+                  "Larger ΔT → more KE to overcome CIN → stronger updraft."),
+            dcc.Input(id="upd-delta-T", type="number", value=UPD_DEFAULTS["delta_T"],
+                      step=0.1, min=0.1, max=10.0,
+                      style={"width": "80px", "marginLeft": "8px",
+                             "background": "#0f1520", "border": "1px solid #2d3a4b",
+                             "color": "#dfe3ea", "padding": "4px 8px",
+                             "borderRadius": "4px"}),
+        ], style={"display": "flex", "alignItems": "center", "marginBottom": "10px"}),
+        _slider("upd-r0", "Radius (m)", 500, 5000, 100, UPD_DEFAULTS["r0"], " m",
+                tip="Updraft core radius. The radial shape function tapers w and ζ "
+                    "to zero at this distance from center."),
+        html.Div([
+            html.Span("Core shape", className="uf-slider-label"),
+            _help("Top-hat: uniform w inside 90% of r₀ with cosine taper in the outer 10%. "
+                  "Cosine bell: w(r) = cos(π·r/2r₀), smooth with no flat core."),
+        ], style={"display": "flex", "alignItems": "center", "gap": "6px",
+                  "marginTop": "10px"}),
+        dcc.RadioItems(
+            id="upd-shape",
+            options=[{"label": "  Top-hat", "value": "tophat"},
+                     {"label": "  Cosine",  "value": "cosine"}],
+            value=UPD_DEFAULTS["shape"],
+            labelStyle={"marginRight": "14px", "color": "#dfe3ea", "fontSize": "13px"},
+            style={"marginBottom": "10px"},
+        ),
+    ])
+
+    inputs_tab = html.Div(className="inp-grid", children=[snd_col, hodo_col, upd_col])
+
+    # =========================================================
+    # OUTPUTS TAB — sub-tabs: Skew-T | Model Results
+    # =========================================================
+    skewt_subtab = html.Div(className="skewt-layout", children=[
+        dcc.Graph(id="skewt-graph", figure=_skewt_figure(),
+                  config={"displayModeBar": False}),
+        html.Div(className="skewt-side", children=[
+            html.Div("Sounding Parameters", className="uf-section-title"),
+            html.Table(id="diag-table", style={"width": "100%", "borderCollapse": "collapse"}),
+            html.Div("Diagnosed w(z)", className="uf-section-title",
+                     style={"marginTop": "14px"}),
+            dcc.Graph(id="w-profile-graph", config={"displayModeBar": False}),
         ]),
     ])
 
-    # ---- Center panel ----
-    center = html.Div(className="uf-center", children=[
-        html.Div(className="uf-field-controls", children=[
-            dcc.Dropdown(
-                id="field-select",
-                options=[{"label": v, "value": k} for k, v in FIELD_LABELS.items()],
-                value="w", clearable=False,
-                style={"width": "240px", "fontSize": "13px"},
-            ),
-            dcc.Tabs(id="view-tabs", value="plan", className="uf-view-tabs", children=[
-                dcc.Tab(label="Plan view",   value="plan",   className="uf-vtab", selected_className="uf-vtab-sel"),
-                dcc.Tab(label="X cross-sec", value="xcross", className="uf-vtab", selected_className="uf-vtab-sel"),
-                dcc.Tab(label="Y cross-sec", value="ycross", className="uf-vtab", selected_className="uf-vtab-sel"),
+    results_subtab = html.Div(className="results-layout", children=[
+        html.Div(className="results-center", children=[
+            html.Div(className="uf-field-controls", children=[
+                dcc.Dropdown(
+                    id="field-select",
+                    options=[{"label": v, "value": k} for k, v in FIELD_LABELS.items()],
+                    value="w", clearable=False,
+                    style={"width": "240px", "fontSize": "13px", "color": "#111"},
+                ),
+                dcc.Tabs(id="view-tabs", value="plan", className="uf-view-tabs", children=[
+                    dcc.Tab(label="Plan view",   value="plan",   className="uf-vtab", selected_className="uf-vtab-sel"),
+                    dcc.Tab(label="X cross-sec", value="xcross", className="uf-vtab", selected_className="uf-vtab-sel"),
+                    dcc.Tab(label="Y cross-sec", value="ycross", className="uf-vtab", selected_className="uf-vtab-sel"),
+                ]),
+            ]),
+            html.Div(className="uf-slice-row", children=[
+                html.Span("Slice: ", className="uf-slider-label"),
+                dcc.Slider(id="slice-slider", min=0, max=NZ - 1, step=1, value=NZ // 4,
+                           marks=None, tooltip={"always_visible": False},
+                           className="uf-slice-slider"),
+                html.Span(id="slice-label", children="z = 4.0 km",
+                          style={"color": "#6ecbff", "fontSize": "12px", "minWidth": "80px"}),
             ]),
+            dcc.Graph(id="main-heatmap", config={"displayModeBar": False}),
         ]),
-        html.Div(className="uf-slice-row", children=[
-            html.Span("Slice: ", className="uf-slider-label"),
-            dcc.Slider(id="slice-slider", min=0, max=NZ - 1, step=1, value=NZ // 4,
-                       marks=None, tooltip={"always_visible": False},
-                       className="uf-slice-slider"),
-            html.Span(id="slice-label", children="z = 4.0 km",
-                      style={"color": "#6ecbff", "fontSize": "12px", "minWidth": "80px"}),
+        html.Div(className="results-side", children=[
+            html.Div("Buoyancy B(z)", className="uf-section-title"),
+            dcc.Graph(id="buoy-profile", config={"displayModeBar": False}),
+            html.Div("Vertical accelerations", className="uf-section-title",
+                     style={"marginTop": "10px"}),
+            dcc.Graph(id="accel-profile", config={"displayModeBar": False}),
         ]),
-        dcc.Graph(id="main-heatmap", config={"displayModeBar": False}),
-        html.Div(className="uf-section-title", style={"marginTop": "14px"},
-                 children="Diagnosed w(z) from parcel model"),
-        dcc.Graph(id="w-profile-graph", config={"displayModeBar": False}),
     ])
 
-    # ---- Right panel ----
-    right = html.Div(className="uf-right", children=[
-        html.Div("Sounding Parameters", className="uf-section-title"),
-        html.Table(id="diag-table", style={"width": "100%", "borderCollapse": "collapse"}),
-        html.Div("Buoyancy B(z)", className="uf-section-title", style={"marginTop": "14px"}),
-        dcc.Graph(id="buoy-profile", config={"displayModeBar": False}),
-        html.Div("Vertical accelerations", className="uf-section-title", style={"marginTop": "10px"}),
-        dcc.Graph(id="accel-profile", config={"displayModeBar": False}),
+    outputs_tab = html.Div(children=[
+        dcc.Tabs(id="out-tabs", value="skewt", className="uf-tabs", children=[
+            dcc.Tab(label="Skew-T",        value="skewt",
+                    className="uf-tab", selected_className="uf-tab-sel",
+                    children=skewt_subtab),
+            dcc.Tab(label="Model Results", value="results",
+                    className="uf-tab", selected_className="uf-tab-sel",
+                    children=results_subtab),
+        ]),
     ])
 
-    model_layout = html.Div(className="uf-main", children=[left, center, right])
-
     return html.Div(className="uf-root", children=[
         html.Div(className="uf-header", children=[
-            html.H1("UpdraftForcing", style={"margin": "0 0 4px 0", "fontSize": "22px"}),
-            html.Div("Convective updraft wind shear diagnostics",
-                     style={"color": "#9aa3ad", "fontSize": "12px"}),
+            html.Div(style={"display": "flex", "alignItems": "center", "gap": "14px"}, children=[
+                html.Span("🌩️", style={"fontSize": "32px", "lineHeight": "1"}),
+                html.Div([
+                    html.H1("Updraft Forcing: A parcel-grid model",
+                            style={"margin": "0 0 2px 0", "fontSize": "22px"}),
+                    html.Div("A kinematic-diagnostic model to examine the effects of environmental wind shear and mesocyclone intensity on perturbation pressure and vertical accelerations",
+                             style={"color": "#9aa3ad", "fontSize": "12px"}),
+                ]),
+                html.Div(style={"marginLeft": "auto"}, children=[
+                    html.A(href="https://climas.illinois.edu/", target="_blank",
+                           children=html.Img(
+                               src="/assets/climas_logo.jpg",
+                               alt="UIUC CliMAS",
+                               style={"height": "44px", "borderRadius": "8px",
+                                      "display": "block"})),
+                ]),
+            ]),
         ]),
-        dcc.Tabs(id="page-tabs", value="model", className="uf-page-tabs", children=[
-            dcc.Tab(label="Model",           value="model",   className="uf-ptab", selected_className="uf-ptab-sel",
-                    children=model_layout),
+        dcc.Tabs(id="page-tabs", value="inputs", className="uf-page-tabs", children=[
+            dcc.Tab(label="Inputs",          value="inputs",  className="uf-ptab", selected_className="uf-ptab-sel",
+                    children=inputs_tab),
+            dcc.Tab(label="Outputs",         value="outputs", className="uf-ptab", selected_className="uf-ptab-sel",
+                    children=outputs_tab),
             dcc.Tab(label="Getting Started", value="help",    className="uf-ptab", selected_className="uf-ptab-sel",
                     children=_getting_started_content()),
             dcc.Tab(label="Theory",          value="theory",  className="uf-ptab", selected_className="uf-ptab-sel",
@@ -889,12 +1203,25 @@ def _register_callbacks(app):
             return no_update
         u = list(store["u"]); v = list(store["v"]); changed = False
         for i in range(len(u)):
-            for key, lst in [(f"shapes[{i}].xanchor", u), (f"shapes[{i}].yanchor", v)]:
-                if key in relay:
-                    try:
-                        lst[i] = max(-60.0, min(60.0, float(relay[key]))); changed = True
-                    except (TypeError, ValueError):
-                        pass
+            # Plotly emits xanchor/yanchor for pixel-mode shapes; after conversion
+            # it may emit x0/x1/y0/y1 in data coords — handle both.
+            if f"shapes[{i}].xanchor" in relay:
+                try:
+                    u[i] = max(-60.0, min(60.0, float(relay[f"shapes[{i}].xanchor"]))); changed = True
+                except (TypeError, ValueError): pass
+            elif f"shapes[{i}].x0" in relay and f"shapes[{i}].x1" in relay:
+                try:
+                    u[i] = max(-60.0, min(60.0, (float(relay[f"shapes[{i}].x0"]) + float(relay[f"shapes[{i}].x1"])) / 2)); changed = True
+                except (TypeError, ValueError): pass
+
+            if f"shapes[{i}].yanchor" in relay:
+                try:
+                    v[i] = max(-60.0, min(60.0, float(relay[f"shapes[{i}].yanchor"]))); changed = True
+                except (TypeError, ValueError): pass
+            elif f"shapes[{i}].y0" in relay and f"shapes[{i}].y1" in relay:
+                try:
+                    v[i] = max(-60.0, min(60.0, (float(relay[f"shapes[{i}].y0"]) + float(relay[f"shapes[{i}].y1"])) / 2)); changed = True
+                except (TypeError, ValueError): pass
         return {"u": u, "v": v} if changed else no_update
 
     @app.callback(
@@ -908,12 +1235,14 @@ def _register_callbacks(app):
             return no_update
         zeta = list(store["zeta"]); changed = False
         for i in range(len(zeta)):
-            kxa = f"shapes[{i}].xanchor"
-            if kxa in relay:
+            if f"shapes[{i}].xanchor" in relay:
+                try:
+                    zeta[i] = max(-0.10, min(0.10, float(relay[f"shapes[{i}].xanchor"]))); changed = True
+                except (TypeError, ValueError): pass
+            elif f"shapes[{i}].x0" in relay and f"shapes[{i}].x1" in relay:
                 try:
-                    zeta[i] = max(-0.10, min(0.10, float(relay[kxa]))); changed = True
-                except (TypeError, ValueError):
-                    pass
+                    zeta[i] = max(-0.10, min(0.10, (float(relay[f"shapes[{i}].x0"]) + float(relay[f"shapes[{i}].x1"])) / 2)); changed = True
+                except (TypeError, ValueError): pass
         return {"zeta": zeta} if changed else no_update
 
     @app.callback(
@@ -927,6 +1256,13 @@ def _register_callbacks(app):
                             lm_u=d.get("lm_u"),       lm_v=d.get("lm_v"),
                             mean_u=d.get("mean_u"),    mean_v=d.get("mean_v"))
 
+    @app.callback(
+        Output("zeta-profile", "figure"),
+        Input("zeta-store", "data"),
+    )
+    def _redraw_zeta(store):
+        return _profile_editor_fig("ζ(z) (s⁻¹)", store["zeta"], ZETA_Z_KM, "s⁻¹", (-0.05, 0.05))
+
     @app.callback(
         Output("model-rev", "data"),
         [Input("snd-theta-ml", "value"), Input("snd-qv-ml", "value"),
@@ -1054,6 +1390,13 @@ def _register_callbacks(app):
         ]
         return html.Tbody(rows)
 
+    @app.callback(
+        Output("skewt-graph", "figure"),
+        Input("model-rev", "data"),
+    )
+    def _skewt_cb(_rev):
+        return _skewt_figure()
+
     @app.callback(
         [Output("buoy-profile", "figure"), Output("accel-profile", "figure")],
         Input("model-rev", "data"),
@@ -1103,7 +1446,7 @@ body { background: #0b0e14; color: #dfe3ea; font-family: -apple-system, system-u
 .uf-center{ background: #11161f; border-radius: 8px; padding: 12px; }
 .uf-right { background: #11161f; border-radius: 8px; padding: 12px; }
 
-.uf-section-title { font-size: 11px; font-weight: 600; color: #8d97a2; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; margin-top: 4px; }
+.uf-section-title { font-size: 11px; font-weight: 600; color: #8d97a2; letter-spacing: 0.05em; margin-bottom: 8px; margin-top: 4px; }
 .uf-slider-row { margin-bottom: 10px; }
 .uf-slider-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; margin-bottom: 2px; }
 .uf-slider-label { color: #c7ced6; }
@@ -1173,15 +1516,35 @@ table tr:nth-child(even) td { background: #161d29; }
 .assume-check { color: #5ac87a; font-size: 13px; padding: 5px 10px 5px 6px; width: 18px; vertical-align: top; }
 .assume-text  { color: #dfe3ea; font-weight: 600; padding: 5px 12px 5px 4px; width: 310px; vertical-align: top; }
 .assume-note  { color: #8d97a2; padding: 5px 4px; line-height: 1.5; vertical-align: top; }
+
+/* New 4-tab layout grids */
+.inp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 4px 0; }
+.inp-col { background: #11161f; border-radius: 8px; padding: 12px; }
+.skewt-layout { display: grid; grid-template-columns: 1fr 260px; gap: 16px; padding: 4px 0; }
+.skewt-side { background: #11161f; border-radius: 8px; padding: 12px; overflow-y: auto; }
+.results-layout { display: grid; grid-template-columns: 1fr 280px; gap: 16px; padding: 4px 0; }
+.results-center { background: #11161f; border-radius: 8px; padding: 12px; }
+.results-side { background: #11161f; border-radius: 8px; padding: 12px; }
+
+/* Field-select dropdown — force black text inside the React-Select widget */
+#field-select .Select-value-label,
+#field-select .Select-placeholder,
+#field-select .Select-option,
+#field-select input { color: #111 !important; }
+#field-select .VirtualizedSelectOption { color: #111 !important; }
 """
 
 
 def create_app() -> Dash:
-    app = Dash(__name__, suppress_callback_exceptions=True)
-    app.title = "UpdraftForcing"
+    import os
+    _assets = os.path.join(os.path.dirname(__file__), "assets")
+    app = Dash(__name__, suppress_callback_exceptions=True, assets_folder=_assets)
+    app.title = "Updraft Forcing: A parcel-grid model"
     app.layout = _build_layout()
     app.index_string = f"""<!doctype html><html><head>
-{{%metas%}}<title>{{%title%}}</title>{{%favicon%}}{{%css%}}
+{{%metas%}}<title>{{%title%}}</title>
+<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
+{{%css%}}
 <style>{_CSS}</style>
 </head><body>{{%app_entry%}}<footer>{{%config%}}{{%scripts%}}{{%renderer%}}</footer></body></html>"""
     _register_callbacks(app)

python/updraft_forcing/colortables.py

@@ -7,17 +7,17 @@ FIELD_META: dict[str, tuple[str, bool, str, str]] = {
     "w":        ("RdBu_r",  True,  "Vertical velocity",          "m s⁻¹"),
     "u":        ("PuOr",    False, "U-wind (zonal)",              "m s⁻¹"),
     "v":        ("PuOr",    False, "V-wind (meridional)",         "m s⁻¹"),
-    "zeta":     ("PRGn",    True,  "Vertical vorticity ζ_z",     "s⁻¹"),
-    "p_total":  ("PuOr",    True,  "p' total",                   "Pa"),
-    "p_lin":    ("PuOr",    True,  "p' linear (shear)",          "Pa"),
+    "zeta":     ("RdBu_r",  True,  "Vertical vorticity ζ_z",     "s⁻¹"),
+    "p_total":  ("RdBu_r",  True,  "p' total",                   "Pa"),
+    "p_lin":    ("RdBu_r",  True,  "p' linear (shear)",          "Pa"),
     "p_spin":   ("RdBu_r",  True,  "p' nonlinear (spin)",        "Pa"),
-    "p_splat":  ("BrBG",    True,  "p' nonlinear (splat)",       "Pa"),
+    "p_splat":  ("RdBu_r",  True,  "p' nonlinear (splat)",       "Pa"),
     "p_buoy":   ("RdBu_r",  True,  "p' buoyancy",                "Pa"),
-    "a_lin":    ("PuOr",    True,  "Accel. linear",              "m s⁻²"),
+    "a_lin":    ("RdBu_r",  True,  "Accel. linear",              "m s⁻²"),
     "a_spin":   ("RdBu_r",  True,  "Accel. spin",                "m s⁻²"),
-    "a_splat":  ("BrBG",    True,  "Accel. splat",               "m s⁻²"),
+    "a_splat":  ("RdBu_r",  True,  "Accel. splat",               "m s⁻²"),
     "a_buoy":   ("RdBu_r",  True,  "Accel. buoyancy",            "m s⁻²"),
-    "a_total":  ("PuOr",    True,  "Total dynamic accel.",       "m s⁻²"),
+    "a_total":  ("RdBu_r",  True,  "Total dynamic accel.",       "m s⁻²"),
 }
 
 # Friendly display names for the dropdown