path: root/components/valuation.py

"""Valuation panel — key ratios, models, comparable companies, analyst targets, earnings history."""
import numpy as np
import pandas as pd
import plotly.graph_objects as go
import streamlit as st
import streamlit.components.v1 as components
from services.data_service import (
    get_company_info,
    get_latest_price,
    get_shares_outstanding,
    get_market_cap_computed,
    get_free_cash_flow_series,
    get_free_cash_flow_ttm,
    get_revenue_ttm,
    get_balance_sheet_bridge_items,
    get_analyst_price_targets,
    get_recommendations_summary,
    get_earnings_history,
    get_next_earnings_date,
    get_income_statement,
    get_cash_flow,
)
from services.fmp_service import (
    get_key_ratios,
    get_peers,
    get_ratios_for_tickers,
    get_historical_ratios,
    get_historical_key_metrics,
    get_analyst_estimates,
)
from services.valuation_service import (
    run_dcf,
    run_ev_ebitda,
    run_ev_revenue,
    run_price_to_book,
    compute_historical_growth_rate,
    compute_raw_historical_growth_rate,
)
from utils.formatters import fmt_ratio, fmt_pct, fmt_large, fmt_currency
from utils.security import escape_html, json_for_script


FINANCIAL_SECTORS = {"Financial Services"}
FINANCIAL_INDUSTRY_KEYWORDS = (
    "bank",
    "insurance",
    "asset management",
    "capital markets",
    "financial data",
    "credit services",
    "mortgage",
    "reit",
)

INDUSTRY_PEER_MAP = {
    "consumer electronics": ["AAPL", "SONY", "DELL", "HPQ", "LOGI"],
    "software - infrastructure": ["MSFT", "ORCL", "CRM", "NOW", "SNOW"],
    "semiconductors": ["NVDA", "AMD", "AVGO", "QCOM", "INTC"],
    "internet content & information": ["GOOGL", "META", "PINS", "SNAP", "RDDT"],
    "banks - diversified": ["JPM", "BAC", "WFC", "C", "GS"],
    "credit services": ["V", "MA", "AXP", "DFS", "COF"],
    "insurance - diversified": ["BRK-B", "AIG", "ALL", "TRV", "CB"],
    "reit - industrial": ["PLD", "PSA", "EXR", "COLD", "REXR"],
}
SECTOR_PEER_MAP = {
    "Technology": ["AAPL", "MSFT", "NVDA", "ORCL", "ADBE"],
    "Communication Services": ["GOOGL", "META", "NFLX", "TMUS", "DIS"],
    "Consumer Cyclical": ["AMZN", "TSLA", "HD", "MCD", "NKE"],
    "Consumer Defensive": ["WMT", "COST", "PG", "KO", "PEP"],
    "Financial Services": ["JPM", "BAC", "WFC", "GS", "MS"],
    "Healthcare": ["LLY", "UNH", "JNJ", "MRK", "PFE"],
    "Industrials": ["GE", "CAT", "RTX", "UPS", "UNP"],
    "Energy": ["XOM", "CVX", "COP", "SLB", "EOG"],
    "Utilities": ["NEE", "DUK", "SO", "AEP", "XEL"],
    "Real Estate": ["PLD", "AMT", "EQIX", "O", "SPG"],
}


def _is_financial_company(info: dict) -> bool:
    sector = str(info.get("sector") or "").strip()
    industry = str(info.get("industry") or "").strip().lower()
    if sector in FINANCIAL_SECTORS:
        return True
    return any(keyword in industry for keyword in FINANCIAL_INDUSTRY_KEYWORDS)


def _suggest_peer_tickers(ticker: str, info: dict) -> list[str]:
    industry = str(info.get("industry") or "").strip().lower()
    sector = str(info.get("sector") or "").strip()

    candidates = []
    if industry in INDUSTRY_PEER_MAP:
        candidates.extend(INDUSTRY_PEER_MAP[industry])
    if not candidates and sector in SECTOR_PEER_MAP:
        candidates.extend(SECTOR_PEER_MAP[sector])

    candidates = [c.upper() for c in candidates if c.upper() != ticker.upper()]
    seen = set()
    deduped = []
    for c in candidates:
        if c not in seen:
            deduped.append(c)
            seen.add(c)
    return deduped[:8]


def _coerce_float(value) -> float | None:
    try:
        out = float(value)
    except (TypeError, ValueError):
        return None
    return None if pd.isna(out) else out


def _escape_markdown_currency(value: str) -> str:
    return value.replace("$", r"\$")


def _h(value) -> str:
    return escape_html(value)


def render_valuation(ticker: str):
    tabs = st.tabs([
        "Key Ratios",
        "Historical Ratios",
        "Models",
        "Comps",
        "Forward Estimates",
        "Analyst Targets",
        "Earnings History",
    ])
    tab_ratios, tab_hist, tab_models, tab_comps, tab_fwd, tab_analyst, tab_earnings = tabs

    with tab_ratios:
        _render_ratios(ticker)

    with tab_hist:
        try:
            _render_historical_ratios(ticker)
        except Exception as e:
            st.error(f"Historical ratios unavailable: {e}")

    with tab_models:
        _render_models(ticker)

    with tab_comps:
        _render_comps(ticker)

    with tab_fwd:
        try:
            _render_forward_estimates(ticker)
        except Exception as e:
            st.error(f"Forward estimates unavailable: {e}")

    with tab_analyst:
        try:
            _render_analyst_targets(ticker)
        except Exception as e:
            st.error(f"Analyst targets unavailable: {e}")

    with tab_earnings:
        try:
            _render_earnings_history(ticker)
        except Exception as e:
            st.error(f"Earnings history unavailable: {e}")


# ── Key Ratios ───────────────────────────────────────────────────────────────

# CSS injected once per render for the Key Ratios design.
_KR_CSS = """<style>
.kr-val-wrap *,.kr-val-wrap *::before,.kr-val-wrap *::after{box-sizing:border-box}
.kr-val-wrap{background:var(--ink-0);color:var(--fg-1);font-family:var(--font-sans)}
.val-ctx{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line-1);background:var(--ink-1)}
.val-ctx .sym{font-family:var(--font-display);font-size:var(--fs-24);font-weight:500;letter-spacing:-0.02em}
.val-ctx .name{font-family:var(--font-display);font-style:italic;font-size:var(--fs-16);color:var(--fg-2);margin-left:-4px;white-space:nowrap}
.val-ctx .eyebrow-ctx{font-family:var(--font-sans);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600;white-space:nowrap}
.val-ctx .meta{display:flex;gap:var(--sp-4);margin-left:auto;font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-3)}
.val-ctx .meta span{white-space:nowrap}
.val-ctx .meta .px{color:var(--fg-1);font-size:var(--fs-14)}
.val-ctx .meta .chg-pos{color:var(--positive)}.val-ctx .meta .chg-neg{color:var(--negative)}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.eyebrow-lbl{font-family:var(--font-sans);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600}
.kr-body{padding:var(--sp-5) var(--sp-5) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5)}
.kr-lede{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-5);align-items:stretch;background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);padding:var(--sp-5)}
.kr-lede .left{display:flex;flex-direction:column;gap:8px}
.kr-lede .ttl{font-family:var(--font-display);font-size:var(--fs-30);font-weight:500;letter-spacing:-0.01em;line-height:1.1;color:var(--fg-1);margin:4px 0 0;max-width:38ch}
.kr-lede .sub{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-2);line-height:1.55;max-width:64ch}
.kr-lede .right{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);align-content:end}
.kr-source{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);background:var(--ink-2);border:1px solid var(--line-1);border-radius:var(--r-2)}
.kr-source .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600}
.kr-source .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-14);color:var(--fg-1);font-weight:500}
.kr-source .cap{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
.kr-snapshot{display:grid;grid-template-columns:repeat(6,1fr);background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.kr-kpi{padding:var(--sp-4);border-right:1px solid var(--line-1);display:flex;flex-direction:column;gap:6px;min-height:110px}
.kr-kpi:last-child{border-right:none}
.kr-kpi .top{display:flex;justify-content:space-between;align-items:center}
.kr-kpi .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600;white-space:nowrap}
.kr-kpi .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-30);color:var(--fg-1);font-weight:500;line-height:1}
.kr-kpi .bot{display:flex;flex-direction:column;gap:2px;margin-top:auto}
.kr-kpi .sector{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.kr-kpi .d{font-family:var(--font-mono);font-size:11px}
.kr-kpi .d.pos{color:var(--positive)}.kr-kpi .d.neg{color:var(--negative)}.kr-kpi .d.flat{color:var(--fg-3)}
.kr-card{background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.kr-card-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-1);display:flex;justify-content:space-between;align-items:baseline}
.kr-card-head>.left-group{display:flex;align-items:baseline;gap:var(--sp-2)}
.kr-card-head .roman{font-family:var(--font-display);font-style:italic;font-size:var(--fs-20);color:var(--brass);font-weight:400;margin-right:6px}
.kr-card-head h3{font-family:var(--font-display);font-size:var(--fs-20);font-weight:500;margin:0;color:var(--fg-1);letter-spacing:-0.01em}
.kr-card-head .hint{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-3)}
.kr-rowgrid{display:grid;grid-template-columns:1.6fr 1fr 0.7fr 2fr 1fr 1.2fr;align-items:center;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line-1)}
.kr-rowgrid:last-child{border-bottom:none}
.kr-rowgrid.head{background:var(--ink-2);padding:8px var(--sp-5);font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600}
.kr-rowgrid .lbl{font-family:var(--font-sans);font-size:var(--fs-14);color:var(--fg-1)}
.kr-rowgrid .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-16);color:var(--fg-1);font-weight:500}
.kr-rowgrid .v.dim{color:var(--fg-2);font-size:var(--fs-13);display:inline-flex;align-items:baseline;gap:6px}
.kr-rowgrid .v.dim .mini{font-size:10px}
.kr-rowgrid .v.dim .mini.pos{color:var(--positive)}.kr-rowgrid .v.dim .mini.neg{color:var(--negative)}.kr-rowgrid .v.dim .mini.flat{color:var(--fg-3)}
.kr-rowgrid .d{font-family:var(--font-mono);font-size:var(--fs-13);font-variant-numeric:tabular-nums}
.kr-rowgrid .d.pos{color:var(--positive)}.kr-rowgrid .d.neg{color:var(--negative)}.kr-rowgrid .d.flat{color:var(--fg-3)}
.kr-rowgrid .r{text-align:right;justify-self:end}
.kr-rowgrid .peer-wrap{display:flex;flex-direction:column;gap:3px}
.kr-rowgrid .peer-axis{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--fg-4);font-variant-numeric:tabular-nums}
.kr-rowgrid .peer-axis span:nth-child(2){color:var(--fg-3)}
.kr-peer{position:relative;height:6px;margin:2px 0}
.kr-peer-track{position:absolute;inset:0;background:var(--ink-3);border-radius:var(--r-full)}
.kr-peer-band{position:absolute;top:0;bottom:0;background:rgba(47,90,135,0.18);border-radius:2px}
.kr-peer-median{position:absolute;top:-2px;bottom:-2px;width:1.5px;background:var(--oxford-light);transform:translateX(-50%)}
.kr-peer-dot{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--brass);border:1.5px solid var(--ink-0);top:50%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 0 0 2px rgba(194,170,122,0.3)}
.kr-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
.kr-mini{display:grid;grid-template-columns:1.8fr 1fr 1.1fr 1.2fr;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-5);border-bottom:1px solid var(--line-1)}
.kr-mini:last-child{border-bottom:none}
.kr-mini.head{background:var(--ink-2);padding:7px var(--sp-5);font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600}
.kr-mini .lbl{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-2)}
.kr-mini .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-16);color:var(--fg-1);font-weight:500}
.kr-mini .s{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-12);color:var(--fg-3);display:inline-flex;align-items:baseline;gap:4px}
.kr-mini .s .mini{font-size:10px}
.kr-mini .s .mini.pos{color:var(--positive)}.kr-mini .s .mini.neg{color:var(--negative)}.kr-mini .s .mini.flat{color:var(--fg-3)}
.kr-mini .r{justify-self:end;text-align:right}
.va-foot{font-family:var(--font-sans);font-size:var(--fs-12);color:var(--fg-3);line-height:1.6;padding:var(--sp-3) var(--sp-5);border:1px solid var(--line-1);border-radius:var(--r-2);background:var(--ink-1);display:flex;justify-content:space-between;align-items:center}
</style>"""


def _svg_spark(data: list, w: int = 96, h: int = 26, color: str = "var(--brass-bright)") -> str:
    clean = [float(x) for x in data if x is not None and x == x]
    if len(clean) < 2:
        return ""
    min_v, max_v = min(clean), max(clean)
    span = (max_v - min_v) or 1
    dx = w / (len(clean) - 1)
    pts = [(i * dx, h - ((v - min_v) / span) * (h - 4) - 2) for i, v in enumerate(clean)]
    d = " ".join(f"{'M' if i == 0 else 'L'}{x:.2f} {y:.2f}" for i, (x, y) in enumerate(pts))
    lx, ly = pts[-1]
    return (
        f'<svg width="{w}" height="{h}" viewBox="0 0 {w} {h}" style="display:block">'
        f'<path d="{d}" fill="none" stroke="{color}" stroke-width="1.25" '
        f'stroke-linejoin="round" stroke-linecap="round"/>'
        f'<circle cx="{lx:.2f}" cy="{ly:.2f}" r="1.8" fill="{color}"/>'
        f'</svg>'
    )


def _peer_bar_html(value, p25, p50, p75, min_v, max_v) -> str:
    def pct(v):
        if min_v is None or max_v is None or max_v <= min_v:
            return 50.0
        return max(0.0, min(100.0, (v - min_v) / (max_v - min_v) * 100))
    vp = pct(value) if value is not None else 50
    p25p, p75p, p50p = pct(p25), pct(p75), pct(p50)
    return (
        f'<div class="kr-peer">'
        f'<div class="kr-peer-track"></div>'
        f'<div class="kr-peer-band" style="left:{p25p:.1f}%;right:{100-p75p:.1f}%"></div>'
        f'<div class="kr-peer-median" style="left:{p50p:.1f}%"></div>'
        f'<div class="kr-peer-dot" style="left:{vp:.1f}%"></div>'
        f'</div>'
    )


def _fmtv(v, kind: str) -> str:
    if v is None:
        return "—"
    try:
        fv = float(v)
        if fv != fv:
            return "—"
    except (TypeError, ValueError):
        return "—"
    if kind == "%":
        return f"{fv * 100:.1f}%"
    if kind == "x":
        return f"{fv:.1f}×"
    if kind == "$B":
        return f"${fv / 1e9:.1f}B"
    if kind == "pp":
        return f"{fv * 100:+.1f}pp"
    return f"{fv:.2f}"


def _tone(delta_pct: float, invert: bool = False) -> str:
    if abs(delta_pct) < 2:
        return "flat"
    better = delta_pct < 0 if invert else delta_pct > 0
    return "pos" if better else "neg"


def _compute_peer_bands(peer_ratio_rows: list[dict]) -> dict:
    fields = [
        "peRatioTTM", "forwardPE", "enterpriseValueMultipleTTM",
        "evToSalesTTM", "priceToBookRatioTTM", "priceToSalesRatioTTM",
        "grossProfitMarginTTM", "operatingProfitMarginTTM", "netProfitMarginTTM",
        "returnOnEquityTTM", "returnOnAssetsTTM", "returnOnInvestedCapitalTTM",
        "currentRatioTTM", "quickRatioTTM", "debtToEquityRatioTTM",
        "interestCoverageRatioTTM", "dividendYieldTTM", "dividendPayoutRatioTTM",
        "revenueGrowthTTM", "earningsGrowthTTM",
    ]
    result = {}
    for field in fields:
        vals = []
        for row in peer_ratio_rows:
            v = row.get(field)
            if v is not None:
                try:
                    fv = float(v)
                    if np.isfinite(fv) and fv > 0:
                        vals.append(fv)
                except (TypeError, ValueError):
                    pass
        if len(vals) >= 2:
            arr = np.array(vals)
            result[field] = {
                "p25": float(np.percentile(arr, 25)),
                "p50": float(np.percentile(arr, 50)),
                "p75": float(np.percentile(arr, 75)),
                "min": float(arr.min()),
                "max": float(arr.max()),
                "n": len(vals),
            }
    return result


def _compute_growth_ratios(ticker: str) -> dict:
    result: dict = {}
    try:
        inc = get_income_statement(ticker)
        cf = get_cash_flow(ticker)

        if inc is not None and not inc.empty and len(inc.columns) >= 2:
            def _inc(label):
                if label in inc.index:
                    v = inc.loc[label].dropna()
                    return v
                return None

            rev = _inc("Total Revenue")
            if rev is not None and len(rev) >= 2:
                r0, r1 = float(rev.iloc[0]), float(rev.iloc[1])
                if r1 > 0:
                    result["revYoY"] = (r0 - r1) / r1
                if len(rev) >= 4:
                    r3 = float(rev.iloc[3])
                    if r3 > 0 and r0 > 0:
                        result["rev3yrCAGR"] = (r0 / r3) ** (1 / 3) - 1

            op_inc = _inc("Operating Income")
            if op_inc is not None and len(op_inc) >= 2:
                o0, o1 = float(op_inc.iloc[0]), float(op_inc.iloc[1])
                if abs(o1) > 0:
                    result["opIncYoY"] = (o0 - o1) / abs(o1)

            for lbl in ("Diluted Average Shares", "Diluted Common Shares Outstanding"):
                shares = _inc(lbl)
                if shares is not None and len(shares) >= 2:
                    s0, s1 = float(shares.iloc[0]), float(shares.iloc[1])
                    if s1 > 0:
                        result["sharesYoY"] = (s0 - s1) / s1
                    break

            for lbl in ("Diluted EPS", "Basic EPS"):
                eps = _inc(lbl)
                if eps is not None and len(eps) >= 2:
                    e0, e1 = float(eps.iloc[0]), float(eps.iloc[1])
                    if abs(e1) > 0 and e1 > 0:
                        result["epsYoY"] = (e0 - e1) / e1
                    break

        if cf is not None and not cf.empty:
            fcf_s = None
            if "Free Cash Flow" in cf.index:
                fcf_s = cf.loc["Free Cash Flow"].dropna()
            else:
                try:
                    op = cf.loc["Operating Cash Flow"]
                    capex = cf.loc["Capital Expenditure"]
                    fcf_s = (op + capex).dropna()
                except KeyError:
                    pass
            if fcf_s is not None and len(fcf_s) >= 2:
                f0, f1 = float(fcf_s.iloc[0]), float(fcf_s.iloc[1])
                if f1 > 0:
                    result["fcfYoY"] = (f0 - f1) / f1

            mkt = get_market_cap_computed(ticker)
            for lbl in ("Repurchase Of Capital Stock", "Common Stock Repurchased"):
                if lbl in cf.index:
                    val = cf.loc[lbl].iloc[0]
                    if val is not None and pd.notna(val):
                        buybacks = abs(float(val))
                        if mkt and mkt > 0 and buybacks > 0:
                            result["buybackYield"] = buybacks / mkt
                    break
    except Exception:
        pass
    return result


def _build_hist_sparks(hist_rows: list[dict]) -> dict:
    rows = list(reversed(hist_rows))
    def _ex(field):
        return [r[field] for r in rows if field in r and r[field] is not None]
    return {
        "pe":    _ex("peRatio"),
        "pb":    _ex("priceToBookRatio"),
        "ps":    _ex("priceToSalesRatio"),
        "evEbt": _ex("enterpriseValueMultiple"),
        "gross": _ex("grossProfitMargin"),
        "op":    _ex("operatingProfitMargin"),
        "net":   _ex("netProfitMargin"),
        "roe":   _ex("returnOnEquity"),
        "roa":   _ex("returnOnAssets"),
        "de":    _ex("debtEquityRatio"),
    }


def _render_ratios(ticker: str):
    info = get_company_info(ticker)
    ratios = get_key_ratios(ticker)

    if not ratios and not info:
        st.info("Ratio data unavailable.")
        return

    price = get_latest_price(ticker)
    market_cap = get_market_cap_computed(ticker)
    fcf_ttm = get_free_cash_flow_ttm(ticker)
    revenue_ttm = get_revenue_ttm(ticker)
    hist_rows = get_historical_ratios(ticker, limit=7)

    # Peer set
    peers_raw = get_peers(ticker)
    if not peers_raw:
        peers_raw = _suggest_peer_tickers(ticker, info or {})
    peers = [p for p in peers_raw[:8] if p.upper() != ticker.upper()]
    peer_ratio_list = get_ratios_for_tickers(peers) if peers else []
    peer_bands = _compute_peer_bands(peer_ratio_list)

    growth = _compute_growth_ratios(ticker)
    sparks = _build_hist_sparks(hist_rows)

    # Computed values
    def _r(key): return ratios.get(key) if ratios else None

    pe = _r("peRatioTTM") or (info.get("trailingPE") if info else None)
    pe_fwd = _r("forwardPE") or (info.get("forwardPE") if info else None)
    peg = _r("pegRatioTTM") or (info.get("pegRatio") if info else None)
    ev_ebt = _r("enterpriseValueMultipleTTM")
    ev_rev = _r("evToSalesTTM")
    ev_ebit = _r("evToOperatingCashFlowTTM")  # best proxy if direct unavailable
    pb = _r("priceToBookRatioTTM")
    ps = _r("priceToSalesRatioTTM")
    fcf_yield_v = (fcf_ttm / market_cap) if fcf_ttm and market_cap and market_cap > 0 else None
    p_fcf = (market_cap / fcf_ttm) if fcf_ttm and fcf_ttm > 0 and market_cap else None
    gross_m = _r("grossProfitMarginTTM")
    op_m = _r("operatingProfitMarginTTM")
    net_m = _r("netProfitMarginTTM")
    roe = _r("returnOnEquityTTM")
    roa = _r("returnOnAssetsTTM")
    roic = _r("returnOnInvestedCapitalTTM")
    cur_r = _r("currentRatioTTM")
    quick_r = _r("quickRatioTTM")
    d_e = _r("debtToEquityRatioTTM")
    coverage = _r("interestCoverageRatioTTM")
    div_y = _r("dividendYieldTTM")
    payout = _r("dividendPayoutRatioTTM")
    ebitda = _r("ebitdaTTM")

    # EBITDA margin: ebitda / revenue_ttm
    ebitda_margin = None
    try:
        rev_v = float(revenue_ttm) if revenue_ttm else None
        ebt_v = float(ebitda) if ebitda else None
        if rev_v and rev_v > 0 and ebt_v is not None:
            ebitda_margin = ebt_v / rev_v
    except (TypeError, ValueError):
        pass

    cash_raw = None
    net_debt_ebt = None
    cash_mkt = None
    try:
        bridge = get_balance_sheet_bridge_items(ticker)
        cash_raw = bridge.get("cash_and_equivalents")
        total_debt = bridge.get("total_debt") or 0
        if ebitda and ebitda > 0 and cash_raw is not None and total_debt is not None:
            net_debt_ebt = (total_debt - cash_raw) / ebitda
        if cash_raw and market_cap and market_cap > 0:
            cash_mkt = cash_raw / market_cap
    except Exception:
        pass

    # Buyback yield
    buyback_yield = growth.get("buybackYield")

    # Total shareholder yield
    total_yield = None
    try:
        parts = [x for x in [fcf_yield_v, buyback_yield, div_y] if x is not None]
        if parts:
            total_yield = sum(parts)
    except (TypeError, ValueError):
        pass

    # Price info
    prev_close = info.get("previousClose") if info else None
    if price and prev_close and prev_close > 0:
        chg_pct = (price - prev_close) / prev_close * 100
        chg_str = ("▲" if chg_pct >= 0 else "▼") + " " + ("+" if chg_pct >= 0 else "") + f"{chg_pct:.2f}%"
        chg_cls = "chg-pos" if chg_pct >= 0 else "chg-neg"
    else:
        chg_str, chg_cls = "", "chg-pos"

    _XMAP = {"NYQ": "NYSE", "NMS": "NASDAQ", "NGM": "NASDAQ", "NCM": "NASDAQ", "ASE": "AMEX"}
    raw_x = (info.get("exchange", "") if info else "") or ""
    exchange = _h(_XMAP.get(raw_x, raw_x) or "—")
    co_name = _h((info.get("longName", ticker) if info else ticker) or ticker)
    sector = _h((info.get("sector", "—") if info else "—") or "—")
    industry = _h((info.get("industry", "—") if info else "—") or "—")
    n_peers = len(peers)
    from datetime import date as _date
    today_str = _date.today().strftime("%b %d, %Y")

    # ── Helper: render a row in the mini detail cards ──────────────────────
    def _mini_row(lbl, v, kind, sector_v, spark_data, invert=False, good_low=False):
        fv = _fmtv(v, kind)
        sv = _fmtv(sector_v, kind)
        if v is not None and sector_v is not None:
            try:
                fv_f, sv_f = float(v), float(sector_v)
                if kind == "%":
                    diff_pp = (fv_f - sv_f) * 100
                    tone = "flat" if abs(diff_pp) < 0.3 else ("neg" if (invert or good_low) == (diff_pp > 0) else "pos")
                    mini_cls = '<span class="mini ' + tone + '">' + f"{diff_pp:+.1f}pp</span>"
                else:
                    diff = (fv_f - sv_f) / abs(sv_f) * 100
                    tone = _tone(diff, invert or good_low)
                    mini_cls = '<span class="mini ' + tone + '">' + f"{diff:+.0f}%</span>"
                sector_html = '<span class="s num r">' + sv + mini_cls + '</span>'
            except Exception:
                sector_html = '<span class="s num r">' + sv + '</span>'
        else:
            sector_html = '<span class="s num r">' + sv + '</span>'
        spark_color = "var(--positive)" if not (invert or good_low) else "var(--warning)"
        spark_svg = _svg_spark(spark_data, 86, 20, spark_color) if spark_data else ""
        return (
            '<div class="kr-mini">'
            + '<span class="lbl">' + lbl + '</span>'
            + '<span class="v num r">' + fv + '</span>'
            + sector_html
            + '<span class="r">' + spark_svg + '</span>'
            + '</div>'
        )

    # ── Helper: build peer band section ────────────────────────────────────
    def _val_row(lbl, v, kind, field, five_avg, spark_data, invert=True):
        fv = _fmtv(v, kind)
        band = peer_bands.get(field, {})
        p25 = band.get("p25")
        p50 = band.get("p50")
        p75 = band.get("p75")
        bmin = band.get("min")
        bmax = band.get("max")
        if v is not None and p50 is not None:
            try:
                diff = (float(v) - p50) / abs(p50) * 100
                tone = _tone(diff, invert)
                d_str = ("+" if diff >= 0 else "") + f"{diff:.0f}%"
            except Exception:
                tone, d_str = "flat", "—"
        else:
            tone, d_str = "flat", "—"
        if five_avg is not None and v is not None:
            try:
                d_avg = (float(v) - float(five_avg)) / (abs(float(five_avg)) or 1) * 100
                avg_tone = _tone(d_avg, invert)
                avg_html = (
                    '<span class="v dim num r">'
                    + _fmtv(five_avg, kind)
                    + '<span class="mini ' + avg_tone + '">' + f"{d_avg:+.0f}%" + '</span>'
                    + '</span>'
                )
            except Exception:
                avg_html = '<span class="v dim num r">' + _fmtv(five_avg, kind) + '</span>'
        else:
            avg_html = '<span class="v dim num r">' + _fmtv(five_avg, kind) + '</span>'
        spark_color = "var(--negative)" if tone == "neg" else ("var(--positive)" if tone == "pos" else "var(--brass-bright)")
        spark_svg = _svg_spark(spark_data, 108, 24, spark_color) if spark_data else ""
        peer_bar = _peer_bar_html(v, p25, p50, p75, bmin, bmax)
        peer_axis = ""
        if p25 is not None:
            peer_axis = (
                '<div class="peer-axis">'
                + '<span>' + _fmtv(p25, kind) + '</span>'
                + '<span>' + _fmtv(p50, kind) + '</span>'
                + '<span>' + _fmtv(p75, kind) + '</span>'
                + '</div>'
            )
        return (
            '<div class="kr-rowgrid">'
            + '<span class="lbl">' + lbl + '</span>'
            + '<span class="v num r">' + fv + '</span>'
            + '<span class="d ' + tone + ' r">' + d_str + '</span>'
            + '<div class="peer-wrap">' + peer_bar + peer_axis + '</div>'
            + avg_html
            + spark_svg
            + '</div>'
        )

    # ── Snapshot KPIs ───────────────────────────────────────────────────────
    def _kpi_spark(lbl, v, kind, field, spark_data, invert=False):
        fv = _fmtv(v, kind)
        band = peer_bands.get(field, {})
        p50 = band.get("p50")
        sect_str = _fmtv(p50, kind) if p50 is not None else "—"
        if v is not None and p50 is not None:
            try:
                diff = (float(v) - p50) / abs(p50) * 100
                tone = _tone(diff, invert)
                d_str = ("+" if diff >= 0 else "") + f"{diff:.0f}% vs peers"
            except Exception:
                tone, d_str = "flat", "—"
        else:
            tone, d_str = "flat", "—"
        spark_color = "var(--negative)" if tone == "neg" else ("var(--positive)" if tone == "pos" else "var(--brass-bright)")
        spark_svg = _svg_spark(spark_data, 68, 22, spark_color) if spark_data else ""
        return (
            '<div class="kr-kpi">'
            + '<div class="top"><span class="lbl">' + lbl + '</span>' + spark_svg + '</div>'
            + '<span class="v num">' + fv + '</span>'
            + '<div class="bot">'
            + '<span class="sector num">peers ' + sect_str + '</span>'
            + '<span class="d ' + tone + ' num">' + d_str + '</span>'
            + '</div>'
            + '</div>'
        )

    # ── Get 5-yr averages from historical rows ──────────────────────────────
    def _hist_avg(field):
        vals = [r.get(field) for r in hist_rows if r.get(field) is not None]
        return float(np.mean(vals)) if vals else None

    pe_5avg = _hist_avg("peRatio")
    pb_5avg = _hist_avg("priceToBookRatio")
    ps_5avg = _hist_avg("priceToSalesRatio")
    evEbt_5avg = _hist_avg("enterpriseValueMultiple")
    gross_5avg = _hist_avg("grossProfitMargin")
    op_5avg = _hist_avg("operatingProfitMargin")
    net_5avg = _hist_avg("netProfitMargin")
    roe_5avg = _hist_avg("returnOnEquity")
    roa_5avg = _hist_avg("returnOnAssets")
    de_5avg = _hist_avg("debtEquityRatio")

    # Peer medians for detail rows
    def _pm(field): return peer_bands.get(field, {}).get("p50")

    # ── Snapshot strip ──────────────────────────────────────────────────────
    snap_html = (
        _kpi_spark("P / E", pe, "x", "peRatioTTM", sparks.get("pe"), invert=True)
        + _kpi_spark("EV / EBITDA", ev_ebt, "x", "enterpriseValueMultipleTTM", sparks.get("evEbt"), invert=True)
        + _kpi_spark("EV / Revenue", ev_rev, "x", "evToSalesTTM", None, invert=True)
        + _kpi_spark("P / Book", pb, "x", "priceToBookRatioTTM", sparks.get("pb"), invert=True)
        + _kpi_spark("P / FCF", p_fcf, "x", "peRatioTTM", None, invert=True)
        + _kpi_spark("FCF Yield", fcf_yield_v, "%", "dividendYieldTTM", None, invert=False)
    )

    # ── Assemble val rows ───────────────────────────────────────────────────
    val_rows_html = (
        _val_row("P / E · TTM",     pe,     "x", "peRatioTTM",                  pe_5avg,    sparks.get("pe"),    invert=True)
        + _val_row("P / E · Forward", pe_fwd, "x", "forwardPE",                 None,       None,                invert=True)
        + _val_row("PEG · 5-yr",    peg,    "x", "pegRatioTTM",                 None,       None,                invert=True)
        + _val_row("EV / EBITDA",   ev_ebt,  "x", "enterpriseValueMultipleTTM", evEbt_5avg, sparks.get("evEbt"), invert=True)
        + _val_row("EV / Revenue",  ev_rev,  "x", "evToSalesTTM",               None,       None,                invert=True)
        + _val_row("P / Book",      pb,      "x", "priceToBookRatioTTM",        pb_5avg,    sparks.get("pb"),    invert=True)
        + _val_row("P / Sales",     ps,      "x", "priceToSalesRatioTTM",       ps_5avg,    sparks.get("ps"),    invert=True)
        + _val_row("P / FCF",       p_fcf,   "x", "peRatioTTM",                 None,       None,                invert=True)
    )

    prof_rows_html = (
        '<div class="kr-mini head"><span>Metric</span><span class="r">Subject</span><span class="r">Peers + Δ</span><span class="r">Trend</span></div>'
        + _mini_row("Gross margin",               gross_m,      "%", _pm("grossProfitMarginTTM"),          sparks.get("gross"))
        + _mini_row("Operating margin",           op_m,         "%", _pm("operatingProfitMarginTTM"),       sparks.get("op"))
        + _mini_row("EBITDA margin",              ebitda_margin,"%", None,                                  None)
        + _mini_row("Net margin",                 net_m,        "%", _pm("netProfitMarginTTM"),             sparks.get("net"))
        + _mini_row("Return on equity",           roe,          "%", _pm("returnOnEquityTTM"),              sparks.get("roe"))
        + _mini_row("Return on assets",           roa,          "%", _pm("returnOnAssetsTTM"),              sparks.get("roa"))
        + _mini_row("Return on invested capital", roic,         "%", _pm("returnOnInvestedCapitalTTM"),     None)
    )

    growth_rows_html = (
        '<div class="kr-mini head"><span>Metric</span><span class="r">Subject</span><span class="r">Peers + Δ</span><span class="r">Trend</span></div>'
        + _mini_row("Revenue · TTM YoY",   growth.get("revYoY"),     "%", _pm("revenueGrowthTTM"),  None)
        + _mini_row("Revenue · 3-yr CAGR", growth.get("rev3yrCAGR"), "%", None,                     None)
        + _mini_row("EPS · TTM YoY",       growth.get("epsYoY"),     "%", _pm("earningsGrowthTTM"), None)
        + _mini_row("FCF · TTM YoY",       growth.get("fcfYoY"),     "%", None,                     None)
        + _mini_row("Operating income YoY",     growth.get("opIncYoY"),   "%", None,                     None)
        + _mini_row("Diluted shares YoY",       growth.get("sharesYoY"),  "%", None,                     None, invert=True)
    )

    health_rows_html = (
        '<div class="kr-mini head"><span>Metric</span><span class="r">Subject</span><span class="r">Peers</span><span class="r">Trend</span></div>'
        + _mini_row("Net debt / EBITDA",  net_debt_ebt, "x", _pm("debtToEquityRatioTTM"),      None,              good_low=True)
        + _mini_row("Total debt / Equity",d_e,          "x", _pm("debtToEquityRatioTTM"),      sparks.get("de"),  good_low=True)
        + _mini_row("Interest coverage",  coverage,     "x", _pm("interestCoverageRatioTTM"),  None)
        + _mini_row("Current ratio",      cur_r,        "x", _pm("currentRatioTTM"),           None)
        + _mini_row("Quick ratio",        quick_r,      "x", _pm("quickRatioTTM"),             None)
        + _mini_row("Cash / Market cap",  cash_mkt,     "%", None,                             None)
    )

    cash_rows_html = (
        '<div class="kr-mini head"><span>Metric</span><span class="r">Subject</span><span class="r">Peers</span><span class="r">Trend</span></div>'
        + _mini_row("FCF yield",      fcf_yield_v,  "%", _pm("dividendYieldTTM"),        None)
        + _mini_row("Dividend yield", div_y,        "%", _pm("dividendYieldTTM"),        None)
        + _mini_row("Payout ratio",   payout,       "%", _pm("dividendPayoutRatioTTM"),  None, good_low=True)
        + _mini_row("Buyback yield",  buyback_yield, "%", None,                          None)
    )
    if total_yield is not None:
        cash_rows_html = cash_rows_html + _mini_row("Total yield", total_yield, "%", None, None)

    # ── Assemble HTML body (string concatenation only — no f-strings) ───────
    ctx_price = ('<span class="px num">$' + f"{price:,.2f}" + '</span>') if price else ""
    ctx_chg = ('<span class="' + chg_cls + ' num">' + chg_str + '</span>') if chg_str else ""

    body = (
        '<div class="kr-val-wrap">'
        + '<div class="val-ctx">'
        + '<span class="sym">' + _h(ticker.upper()) + '</span>'
        + '<span class="name">' + co_name + '</span>'
        + '<span class="eyebrow-ctx" style="margin-left:12px">Valuation · Key Ratios</span>'
        + '<div class="meta"><span>' + exchange + '</span>' + ctx_price + ctx_chg + '</div>'
        + '</div>'
        + '<div class="kr-body">'
        + '<section class="kr-lede">'
        + '<div class="left">'
        + '<span class="eyebrow-lbl">Snapshot</span>'
        + '<div class="ttl">Where the lens sits — six headline ratios, scored against the peer set</div>'
        + '<p class="sub">TTM ratios, peer medians from ' + str(n_peers) + ' peers (' + sector + '). Sparklines show historical drift; the peer band on each row is the 25th–75th percentile of the peer set.</p>'
        + '</div>'
        + '<div class="right">'
        + '<div class="kr-source"><span class="lbl">Peer set</span><span class="v num">' + str(n_peers) + ' names</span><span class="cap">' + industry[:28] + '</span></div>'
        + '<div class="kr-source"><span class="lbl">Basis</span><span class="v num">TTM</span><span class="cap">Trailing twelve months</span></div>'
        + '<div class="kr-source"><span class="lbl">As of</span><span class="v num">' + today_str + '</span><span class="cap">Prices live · yfinance</span></div>'
        + '</div>'
        + '</section>'
        + '<section class="kr-snapshot">' + snap_html + '</section>'
        + '<section class="kr-card">'
        + '<div class="kr-card-head"><div class="left-group"><span class="roman">I</span><h3>Valuation multiples</h3></div><span class="hint">Subject · Peer P25 / median / P75 · 5-yr drift</span></div>'
        + '<div class="kr-rowgrid head"><span>Ratio</span><span class="r">Subject</span><span class="r">vs peers</span><span>Peer 25 — 75</span><span class="r">5-yr avg</span><span>5-yr trend</span></div>'
        + val_rows_html
        + '</section>'
        + '<section class="kr-grid-2">'
        + '<div class="kr-card"><div class="kr-card-head"><div class="left-group"><span class="roman">II</span><h3>Profitability</h3></div><span class="hint">Wider margins, higher returns on capital</span></div>' + prof_rows_html + '</div>'
        + '<div class="kr-card"><div class="kr-card-head"><div class="left-group"><span class="roman">III</span><h3>Growth · TTM</h3></div><span class="hint">Topline &amp; cash growth vs peers</span></div>' + growth_rows_html + '</div>'
        + '<div class="kr-card"><div class="kr-card-head"><div class="left-group"><span class="roman">IV</span><h3>Balance-sheet health</h3></div><span class="hint">Leverage, liquidity, interest</span></div>' + health_rows_html + '</div>'
        + '<div class="kr-card"><div class="kr-card-head"><div class="left-group"><span class="roman">V</span><h3>Cash returns</h3></div><span class="hint">Cash giveback to holders · yield</span></div>' + cash_rows_html + '</div>'
        + '</section>'
        + '<div class="va-foot"><span>Ratios computed from yfinance financial statements, TTM basis. Peer bands from ' + str(n_peers) + ' comparable names. Market data live.</span></div>'
        + '</div>'
        + '</div>'
    )

    # ── Assemble full HTML document (string concat, no f-strings) ──────────
    doc = (
        '<!doctype html><html><head><meta charset="utf-8">'
        + '<link rel="preconnect" href="https://fonts.googleapis.com">'
        + '<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">'
        + '<style>'
        + '*,*::before,*::after{box-sizing:border-box}'
        + ':root{'
        + '  --ink-0:#0B0E13;--ink-1:#11151C;--ink-2:#181D26;--ink-3:#222934;--ink-4:#2C3340;'
        + '  --line-1:#232934;--line-2:#2E3645;--line-3:#3D4658;'
        + '  --fg-1:#F2ECDC;--fg-2:#C7C0AE;--fg-3:#8E8676;--fg-4:#5E5849;'
        + '  --brass:#C2AA7A;--brass-bright:#DCC79E;--brass-deep:#8F7A50;--brass-ink:#17120A;'
        + '  --oxford:#1F3D5C;--oxford-light:#2E5A87;'
        + '  --positive:#4F8C5E;--positive-bg:#15241A;--negative:#B5494B;--negative-bg:#2A1517;'
        + '  --warning:#C49545;--warning-bg:#2A1F0F;'
        + "  --font-display:'EB Garamond',Georgia,serif;"
        + "  --font-sans:'IBM Plex Sans','Helvetica Neue',system-ui,sans-serif;"
        + "  --font-mono:'IBM Plex Mono','SF Mono',Menlo,monospace;"
        + '  --fs-12:0.75rem;--fs-13:0.8125rem;--fs-14:0.875rem;--fs-16:1rem;--fs-18:1.125rem;'
        + '  --fs-20:1.25rem;--fs-24:1.5rem;--fs-30:1.875rem;--fs-38:2.375rem;'
        + '  --tr-wider:0.12em;--tr-wide:0.04em;--tr-snug:-0.01em;'
        + '  --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;'
        + '  --r-1:2px;--r-2:4px;--r-3:6px;--r-full:999px;'
        + '  --shadow-1:0 1px 0 rgba(0,0,0,.4),0 1px 2px rgba(0,0,0,.3);'
        + '}'
        + 'html,body{margin:0;padding:0;background:var(--ink-0);color:var(--fg-2);font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}'
        + '</style>'
        + _KR_CSS
        + '</head><body>'
        + body
        + '</body></html>'
    )

    components.html(doc, height=2600, scrolling=False)



# ── Models ───────────────────────────────────────────────────────────────────

def _net_debt_label(value: float) -> str:
    return "Net Cash" if value < 0 else "Net Debt"


def _build_model_context(ticker: str) -> dict:
    info = get_company_info(ticker)
    ratios_data = get_key_ratios(ticker)
    shares = get_shares_outstanding(ticker)
    current_price = get_latest_price(ticker)
    market_cap = get_market_cap_computed(ticker)
    bridge_items = get_balance_sheet_bridge_items(ticker)
    total_debt = float(bridge_items["total_debt"])
    cash_and_equivalents = float(bridge_items["cash_and_equivalents"])
    preferred_equity = float(bridge_items["preferred_equity"])
    minority_interest = float(bridge_items["minority_interest"])
    fcf_series_raw = get_free_cash_flow_series(ticker)

    if fcf_series_raw is None or fcf_series_raw.empty:
        fcf_series = pd.Series(dtype=float)
    else:
        try:
            fcf_series = fcf_series_raw.sort_index().dropna().astype(float)
        except Exception:
            fcf_series = pd.Series(dtype=float)

    base_fcf = _coerce_float(get_free_cash_flow_ttm(ticker))
    hist_growth = compute_historical_growth_rate(fcf_series) if len(fcf_series) >= 2 else None
    hist_growth_raw = compute_raw_historical_growth_rate(fcf_series) if len(fcf_series) >= 2 else None
    ebitda = _coerce_float(ratios_data.get("ebitdaTTM"))
    revenue_ttm = _coerce_float(get_revenue_ttm(ticker))
    if revenue_ttm is None or revenue_ttm <= 0:
        revenue_ttm = _coerce_float(info.get("totalRevenue"))
    if revenue_ttm is None or revenue_ttm <= 0:
        ps_ratio = _coerce_float(ratios_data.get("priceToSalesRatioTTM"))
        if market_cap and market_cap > 0 and ps_ratio and ps_ratio > 0:
            revenue_ttm = float(market_cap) / float(ps_ratio)
    book_value_per_share = _coerce_float(info.get("bookValue"))
    is_financial = _is_financial_company(info)

    dcf_reason = None
    if is_financial:
        dcf_reason = "Not suitable for financial companies."
    elif not shares or shares <= 0:
        dcf_reason = "Shares outstanding unavailable."
    elif fcf_series.empty:
        dcf_reason = "Free cash flow history unavailable."
    elif len(fcf_series) < 2:
        dcf_reason = "Need at least two FCF periods."
    elif base_fcf is None or base_fcf <= 0:
        dcf_reason = "Base free cash flow is zero or negative."

    ev_reason = None
    if not shares or shares <= 0:
        ev_reason = "Shares outstanding unavailable."
    elif ebitda is None:
        ev_reason = "EBITDA unavailable."
    elif ebitda <= 0:
        ev_reason = "EBITDA is zero or negative."

    ev_revenue_reason = None
    if is_financial:
        ev_revenue_reason = "Not preferred for financial companies."
    elif not shares or shares <= 0:
        ev_revenue_reason = "Shares outstanding unavailable."
    elif revenue_ttm is None:
        ev_revenue_reason = "Revenue unavailable."
    elif revenue_ttm <= 0:
        ev_revenue_reason = "Revenue is zero or negative."

    pb_reason = None
    if book_value_per_share is None:
        pb_reason = "Book value per share unavailable."
    elif book_value_per_share <= 0:
        pb_reason = "Book value per share is zero or negative."

    dcf_available = dcf_reason is None
    ev_available = ev_reason is None
    ev_revenue_available = ev_revenue_reason is None
    pb_available = pb_reason is None

    ev_value = None
    ev_ebitda_current = None
    ev_revenue_current = None
    other_claims = preferred_equity + minority_interest
    if market_cap and market_cap > 0 and ebitda and ebitda > 0:
        ev_value = float(market_cap) + total_debt - cash_and_equivalents + other_claims
        if ev_value > 0:
            ev_ebitda_current = ev_value / ebitda
    elif market_cap and market_cap > 0:
        ev_value = float(market_cap) + total_debt - cash_and_equivalents + other_claims

    if ev_value and ev_value > 0 and revenue_ttm and revenue_ttm > 0:
        ev_revenue_current = ev_value / revenue_ttm

    pb_current = None
    if current_price and current_price > 0 and book_value_per_share and book_value_per_share > 0:
        pb_current = current_price / book_value_per_share

    if is_financial and pb_available:
        summary = "P/B is the primary method here because this looks like a financial company."
    elif dcf_available:
        summary = "DCF is the primary method because the business has usable free cash flow history and positive base FCF."
    elif ev_available:
        summary = "EV/EBITDA is the best fit because EBITDA is positive while DCF is not suitable."
    elif ev_revenue_available:
        summary = "EV/Revenue is the best fit because the company has revenue but cash-flow-based models are not suitable."
    elif pb_available:
        summary = "P/B is the fallback because book value is positive while cash-flow-based models are not suitable."
    else:
        summary = "No valuation model is currently robust enough to show. Use ratios, comps, earnings history, and analyst targets instead."

    return {
        "ticker": ticker.upper(),
        "info": info,
        "ratios_data": ratios_data,
        "shares": shares,
        "current_price": current_price,
        "market_cap": market_cap,
        "bridge_items": bridge_items,
        "total_debt": total_debt,
        "cash_and_equivalents": cash_and_equivalents,
        "preferred_equity": preferred_equity,
        "minority_interest": minority_interest,
        "fcf_series": fcf_series,
        "base_fcf": base_fcf,
        "hist_growth": hist_growth,
        "hist_growth_raw": hist_growth_raw,
        "ebitda": ebitda,
        "revenue_ttm": revenue_ttm,
        "book_value_per_share": book_value_per_share,
        "is_financial": is_financial,
        "dcf_available": dcf_available,
        "dcf_reason": dcf_reason or "Usable free cash flow history and positive base FCF.",
        "ev_available": ev_available,
        "ev_reason": ev_reason or "Positive EBITDA and shares outstanding are available.",
        "ev_revenue_available": ev_revenue_available,
        "ev_revenue_reason": ev_revenue_reason or "Positive revenue and shares outstanding are available.",
        "pb_available": pb_available,
        "pb_reason": pb_reason or "Positive book value per share is available.",
        "ev_ebitda_current": ev_ebitda_current,
        "ev_revenue_current": ev_revenue_current,
        "pb_current": pb_current,
        "summary": summary,
    }


def _render_model_availability(ctx: dict):
    dcf_ok = ctx["dcf_available"]
    ev_ok = ctx["ev_available"]
    rev_ok = ctx["ev_revenue_available"]
    pb_ok = ctx["pb_available"]
    pb_limited = pb_ok and not ctx["is_financial"]
    pb_color = "#C49545" if pb_limited else ("#4F8C5E" if pb_ok else "#5E5849")
    pb_glyph = "◐" if pb_limited else "●"
    dcf_c = "#4F8C5E" if dcf_ok else "#5E5849"
    ev_c = "#4F8C5E" if ev_ok else "#5E5849"
    rev_c = "#4F8C5E" if rev_ok else "#5E5849"
    st.markdown(
        f'<div style="font-family:\'IBM Plex Sans\',sans-serif;font-size:12px;color:#8E8676;'
        f'display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:4px">'
        f'<span>Applicable</span>'
        f'<span><span style="color:{dcf_c}">●</span>&nbsp;DCF</span>'
        f'<span><span style="color:{ev_c}">●</span>&nbsp;EV/EBITDA</span>'
        f'<span><span style="color:{rev_c}">●</span>&nbsp;EV/Revenue</span>'
        f'<span><span style="color:{pb_color}">{pb_glyph}</span>&nbsp;P/Book</span>'
        f'</div>',
        unsafe_allow_html=True,
    )


_DCF_CANVAS_CSS = """
*,*::before,*::after{box-sizing:border-box}
:root{
  --ink-0:#0B0E13;--ink-1:#11151C;--ink-2:#181D26;--ink-3:#222934;
  --line-1:#232934;--line-2:#2E3645;
  --fg-1:#F2ECDC;--fg-2:#C7C0AE;--fg-3:#8E8676;--fg-4:#5E5849;
  --brass:#C2AA7A;--brass-bright:#DCC79E;--brass-deep:#8F7A50;
  --oxford:#1F3B5E;--oxford-light:#243E5A;
  --positive:#4F8C5E;--positive-bg:#15241A;
  --negative:#B5494B;--negative-bg:#2A1517;
  --warning:#C49545;--warning-bg:#2A1F0A;
  --font-display:'EB Garamond',Georgia,serif;
  --font-sans:'IBM Plex Sans',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}
body{margin:0;padding:0;background:transparent;font-family:var(--font-sans);color:var(--fg-2);-webkit-font-smoothing:antialiased}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.va-canvas{display:flex;flex-direction:column;gap:24px;padding-bottom:32px}

/* Verdict */
.va-verdict{background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;position:relative;overflow:hidden;box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
.va-verdict .top{display:grid;grid-template-columns:1fr auto 1fr;gap:48px;align-items:center;padding:32px 48px;position:relative;z-index:1}
.va-verdict .col{display:flex;flex-direction:column;gap:6px}
.va-verdict .lbl{font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-3)}
.va-verdict .big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:56px;font-weight:500;color:var(--fg-1);line-height:.95;letter-spacing:-.02em}
.va-verdict .big.market{color:var(--fg-2)}
.va-verdict .sub{font-family:var(--font-sans);font-size:13px;color:var(--fg-3)}
.va-verdict .arrow{font-family:var(--font-display);font-size:32px;color:var(--fg-4);font-style:italic;font-weight:400;text-align:center}
.va-verdict .pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:13px;padding:4px 10px;border-radius:2px;align-self:flex-start;margin-top:4px}
.va-verdict .pill.neg{color:var(--negative);background:var(--negative-bg);border:1px solid rgba(181,73,75,.35)}
.va-verdict .pill.pos{color:var(--positive);background:var(--positive-bg);border:1px solid rgba(79,140,94,.35)}
.va-verdict .band{display:flex;align-items:baseline;justify-content:space-between;border-top:1px solid var(--line-1);padding:12px 48px;font-family:var(--font-sans);font-size:13px;color:var(--fg-2);position:relative;z-index:1;background:var(--ink-1)}
.va-verdict .band .reading{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--fg-1)}
.va-verdict .band .mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;color:var(--fg-1)}

/* Projection */
.va-projection{background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;overflow:hidden}
.va-projection .head{padding:16px 24px;border-bottom:1px solid var(--line-1);display:flex;justify-content:space-between;align-items:baseline}
.va-projection .head h3{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--fg-1);margin:0}
.va-projection .head .units{font-family:var(--font-mono);font-size:12px;color:var(--fg-3)}
.va-cf-table{width:100%;border-collapse:collapse;border-top:1px solid var(--line-1)}
.va-cf-table th,.va-cf-table td{padding:8px 14px;text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px;border-bottom:1px solid var(--line-1)}
.va-cf-table th{font-family:var(--font-sans);text-transform:uppercase;font-size:11px;letter-spacing:.08em;color:var(--fg-3);font-weight:600;background:var(--ink-2)}
.va-cf-table th:first-child,.va-cf-table td:first-child{text-align:left;color:var(--fg-2);font-size:12px}
.va-cf-table td.brass{color:var(--brass-bright)}
.va-cf-table tr:last-child td{border-bottom:none}
.va-cf-table tr.total td{border-top:1px solid var(--line-2);font-weight:600;color:var(--fg-1);background:var(--ink-2)}

/* Bridge */
.va-bridge{background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:16px}
.va-bridge .bhead{display:flex;justify-content:space-between;align-items:baseline}
.va-bridge .bhead h3{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--fg-1);margin:0}
.va-bridge .bhead .bdate{font-family:var(--font-mono);font-size:12px;color:var(--fg-3)}
.va-bridge .flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:stretch;gap:12px}
.va-bridge .node{display:flex;flex-direction:column;gap:4px;padding:12px 16px;background:var(--ink-2);border:1px solid var(--line-2);border-radius:4px;min-height:80px;justify-content:center}
.va-bridge .node.start{border-color:var(--oxford);background:rgba(74,120,181,.06)}
.va-bridge .node.result{border-color:rgba(194,170,122,.4);background:rgba(194,170,122,.06)}
.va-bridge .node .lbl{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-3)}
.va-bridge .node .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:20px;color:var(--fg-1)}
.va-bridge .node.result .v{color:var(--brass-bright)}
.va-bridge .op{display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:16px;color:var(--fg-3);min-width:20px}
.va-bridge .op .sub{font-family:var(--font-sans);font-size:10px;color:var(--fg-4);text-transform:uppercase;letter-spacing:.18em;margin-top:6px}
.va-bridge .bfoot{font-family:var(--font-sans);font-size:12px;color:var(--fg-3);display:flex;gap:12px;flex-wrap:wrap}

/* Recon */
.va-recon{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;overflow:hidden}
.va-recon .cell{padding:16px 24px;border-right:1px solid var(--line-1);display:flex;flex-direction:column;gap:4px}
.va-recon .cell:last-child{border-right:none}
.va-recon .cell .lbl{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-3);font-weight:600}
.va-recon .cell .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:28px;color:var(--fg-1);font-weight:500;line-height:1}
.va-recon .cell .sub{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.va-recon .cell.intrinsic .v{color:var(--brass-bright)}

/* Cross-check */
.va-cx{background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;overflow:hidden}
.va-cx-head{padding:16px 24px;border-bottom:1px solid var(--line-1);display:flex;justify-content:space-between;align-items:baseline}
.va-cx-head h3{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--fg-1);margin:0}
.va-cx-head .hint{font-family:var(--font-mono);font-size:12px;color:var(--fg-3)}
.va-cx-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr}
.va-cx-cell{padding:16px 24px;border-right:1px solid var(--line-1);display:flex;flex-direction:column;gap:6px}
.va-cx-cell:last-child{border-right:none}
.va-cx-cell .lbl{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-3);font-weight:600}
.va-cx-cell .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:26px;color:var(--fg-1);font-weight:500;line-height:1}
.va-cx-cell.dcf{background:rgba(194,170,122,.05)}
.va-cx-cell.dcf .v{color:var(--brass-bright)}
.va-cx-cell.dcf .lbl{color:var(--brass)}
.va-cx-cell .delta{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12px}
.va-cx-cell .delta.neg{color:var(--negative)}
.va-cx-cell .delta.pos{color:var(--positive)}
.va-cx-cell .delta.na{color:var(--fg-4)}
.va-cx-cell .meta{font-family:var(--font-sans);font-size:11px;color:var(--fg-3);border-top:1px solid var(--line-1);padding-top:6px;margin-top:auto;line-height:1.4}

/* Footer */
.va-foot{font-family:var(--font-sans);font-size:12px;color:var(--fg-3);line-height:1.6;padding:12px 20px;border:1px solid var(--line-1);border-radius:4px;background:var(--ink-1);display:flex;justify-content:space-between;align-items:center;gap:24px}
.va-foot a{color:var(--brass-bright);text-decoration:none;white-space:nowrap;flex-shrink:0}
.va-foot a:hover{color:var(--brass)}
"""

_DCF_RAIL_CSS = """<style>
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap');
.dcf-eyebrow{font-family:'IBM Plex Sans',sans-serif;font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:#8E8676;font-weight:600;line-height:1}
.dcf-title{font-family:'EB Garamond',Georgia,serif;font-size:22px;font-weight:500;letter-spacing:-.01em;color:#F2ECDC;margin:4px 0 0;line-height:1.2}
.dcf-sub{font-family:'IBM Plex Sans',sans-serif;font-size:12px;color:#8E8676;margin-top:6px;line-height:1.5}
.dcf-divider{border:none;border-top:1px solid #232934;margin:4px 0 0}
.dcf-filings-eyebrow{font-family:'IBM Plex Sans',sans-serif;font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:#8E8676;font-weight:600;margin-bottom:10px}
.dcf-filing-row{display:flex;justify-content:space-between;align-items:baseline;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#C7C0AE;margin-bottom:6px}
.dcf-filing-val{color:#F2ECDC;font-variant-numeric:tabular-nums}
.dcf-actions{display:flex;gap:8px;padding-top:4px}
/* Streamlit slider thumb */
[data-baseweb="slider"] [role="slider"]{background-color:#C2AA7A !important;border:2px solid #0B0E13 !important;width:14px !important;height:14px !important}
[data-testid="stSlider"] > label > div > p{font-family:'IBM Plex Sans',sans-serif !important;font-size:13px !important;color:#C7C0AE !important}
[data-testid="stSlider"] [data-testid="stTickBarMin"],[data-testid="stSlider"] [data-testid="stTickBarMax"]{font-family:'IBM Plex Mono',monospace !important;font-size:10px !important;color:#5E5849 !important}
/* Primary button — brass bg, dark ink text */
[data-testid="stBaseButton-primary"]{color:#17120A !important;background-color:#C2AA7A !important}
button[kind="primary"]{color:#17120A !important}
[data-testid="stBaseButton-primary"] p,[data-testid="stBaseButton-primary"] span{color:#17120A !important}
</style>"""

_MULT_CANVAS_CSS = """
.vm-body{display:flex;flex-direction:column;gap:24px;padding:24px 32px 48px}

/* Summary band */
.vm-summary{background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;overflow:hidden;display:grid;grid-template-columns:1.4fr 2fr}
.vm-summary-head{padding:24px;display:flex;flex-direction:column;gap:8px;border-right:1px solid var(--line-1)}
.vm-summary-head .eyebrow{font-family:var(--font-sans);font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-3);font-weight:600}
.vm-summary-head .ttl{font-family:var(--font-display);font-size:22px;font-weight:500;color:var(--fg-1);margin:0;line-height:1.2}
.vm-summary-head .lede{font-family:var(--font-sans);font-size:13px;color:var(--fg-2);line-height:1.5;margin:0}
.vm-summary-strip{background:var(--ink-2);display:grid;grid-template-columns:repeat(4,1fr)}
.vm-sum-cell{padding:16px;display:flex;flex-direction:column;gap:4px;border-right:1px solid var(--line-1)}
.vm-sum-cell:last-child{border-right:none}
.vm-sum-cell.market{background:rgba(74,120,181,.05);border-left:1px solid var(--line-2)}
.vm-sum-cell .lbl{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3)}
.vm-sum-cell .v{font-family:var(--font-mono);font-size:20px;color:var(--fg-1);font-variant-numeric:tabular-nums}
.vm-sum-cell.market .v{color:var(--fg-2)}
.vm-sum-cell .d{font-family:var(--font-mono);font-size:11px}
.d.pos{color:var(--positive)}.d.neg{color:var(--negative)}.d.na{color:var(--fg-4)}

/* Comparison card */
.vm-compare{background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;overflow:hidden}
.vm-compare-head{padding:16px 24px;border-bottom:1px solid var(--line-1);display:flex;align-items:baseline;gap:12px}
.vm-compare-head h3{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--fg-1);margin:0}
.vm-compare-head .units{font-family:var(--font-sans);font-size:11px;color:var(--fg-3)}
.vm-grid{display:grid;grid-template-columns:220px 1fr 1fr 1fr;border-bottom:1px solid var(--line-1)}
.vm-grid:last-child{border-bottom:none}
.vm-row-lbl{padding:12px 16px;background:var(--ink-2);border-right:1px solid var(--line-1);font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);display:flex;flex-direction:column;gap:4px;align-items:flex-start;justify-content:center}
.vm-row-lbl .sub{font-family:var(--font-sans);font-size:10px;color:var(--fg-4);text-transform:none;letter-spacing:0}
.vm-row-lbl.strong{color:var(--brass);background:rgba(194,170,122,.06)}
.vm-cell{padding:12px 16px;display:flex;flex-direction:column;gap:4px;justify-content:center}
.vm-cell .v{font-family:var(--font-mono);font-size:20px;color:var(--fg-1);font-variant-numeric:tabular-nums}
.vm-cell .v.dash{color:var(--fg-4)}
.vm-cell .cap{font-family:var(--font-sans);font-size:11px;color:var(--fg-3)}
.vm-cell.faded{background:rgba(255,255,255,.005)}
.vm-cell.faded .v{color:var(--fg-4)}
.vm-col-head{padding:16px}
.vm-col-title{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.vm-col-title .n{font-family:var(--font-display);font-style:italic;font-size:16px;color:var(--brass)}
.vm-col-title h4{font-family:var(--font-sans);font-size:14px;font-weight:600;color:var(--fg-1);margin:0}
.vm-col-title .fit{font-family:var(--font-sans);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding:2px 6px;border-radius:2px}
.vm-col-title .fit.ok{color:var(--positive);background:var(--positive-bg)}
.vm-col-title .fit.warn{color:var(--warning);background:var(--warning-bg)}
.vm-col-head .lede{font-family:var(--font-sans);font-size:12px;color:var(--fg-3);line-height:1.5;margin:0}
.vm-grid.result .vm-row-lbl{color:var(--brass);background:rgba(194,170,122,.06)}
.vm-grid.result .vm-cell{background:rgba(194,170,122,.04)}
.vm-grid.result .vm-cell .v{font-size:28px;color:var(--brass-bright)}
.vm-grid.result .vm-cell .delta{font-family:var(--font-mono);font-size:12px}
.delta.pos{color:var(--positive)}.delta.neg{color:var(--negative)}.delta.na{color:var(--fg-4)}

/* Subject multiple slider */
.vm-cell.mult{gap:6px}
.mult-top{display:flex;align-items:baseline;gap:8px}
.mult-top .big{font-family:var(--font-mono);font-size:24px;color:var(--brass-bright);font-variant-numeric:tabular-nums}
.mult-top .sector{font-family:var(--font-mono);font-size:11px;color:var(--fg-3)}
.mult-slider{position:relative;height:18px;margin:2px 0}
.mult-slider .track{position:absolute;inset:7px 0;background:var(--ink-3);border-radius:999px;pointer-events:none}
.mult-slider .track .band{position:absolute;inset:0;background:rgba(74,120,181,.18)}
.mult-slider .track .marker{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--oxford-light);border-radius:1px}
.mult-slider input[type=range]{position:absolute;inset:0;width:100%;height:18px;background:transparent;-webkit-appearance:none;appearance:none;cursor:pointer;outline:none}
.mult-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--brass);border:2px solid #0B0E13;box-shadow:0 0 0 1px var(--brass-deep);cursor:pointer}
.mult-slider input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--brass);border:2px solid #0B0E13;box-shadow:0 0 0 1px var(--brass-deep);cursor:pointer;border:none}
.mult-slider input[type=range]::-webkit-slider-runnable-track{background:transparent}
.mult-slider input[type=range]::-moz-range-track{background:transparent;height:4px}
.mult-meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--fg-4)}

/* Sensitivity strip */
.vm-sensitivity{background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;overflow:hidden}
.vm-sensitivity-head{padding:16px 24px;border-bottom:1px solid var(--line-1);display:flex;align-items:baseline;gap:12px}
.vm-sensitivity-head h3{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--fg-1);margin:0}
.vm-sensitivity-head .hint{font-family:var(--font-sans);font-size:11px;color:var(--fg-3)}
.vm-sens-grid{display:grid;grid-template-columns:repeat(3,1fr)}
.vm-sens-cell{padding:16px;border-right:1px solid var(--line-1)}
.vm-sens-cell:last-child{border-right:none}
.vm-sens-cell>.lbl{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3);display:block;margin-bottom:10px}
.vm-sens-row{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:center;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line-1)}
.vm-sens-row .col{display:flex;flex-direction:column;gap:2px}
.vm-sens-row .col .sub{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
.vm-sens-row .col .v{font-family:var(--font-mono);font-size:18px;color:var(--fg-1);font-variant-numeric:tabular-nums}
.vm-sens-row .col .v.brass{color:var(--brass-bright)}
.vm-sens-row .col .d{font-family:var(--font-mono);font-size:11px}
.vm-sens-row .arrow{font-family:var(--font-display);font-style:italic;font-size:20px;color:var(--fg-4);text-align:center}
.vm-sens-cell>.meta{font-family:var(--font-sans);font-size:11px;color:var(--fg-3)}
.vm-sens-cell>.meta .num{font-family:var(--font-mono);color:var(--fg-2)}

/* Cross-check vs DCF */
.vm-cx{background:var(--ink-1);border:1px solid var(--line-1);border-radius:6px;overflow:hidden}
.vm-cx-head{padding:16px 24px;border-bottom:1px solid var(--line-1);display:flex;align-items:baseline;gap:12px}
.vm-cx-head h3{font-family:var(--font-display);font-size:20px;font-weight:500;color:var(--fg-1);margin:0}
.vm-cx-head .hint{font-family:var(--font-sans);font-size:11px;color:var(--fg-3)}
.vm-cx-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr}
.vm-cx-cell{padding:16px 24px;border-right:1px solid var(--line-1);display:flex;flex-direction:column;gap:4px}
.vm-cx-cell:last-child{border-right:none}
.vm-cx-cell .lbl{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--fg-3)}
.vm-cx-cell .v{font-family:var(--font-mono);font-size:24px;color:var(--fg-1);font-variant-numeric:tabular-nums}
.vm-cx-cell .delta{font-family:var(--font-mono);font-size:12px}
.vm-cx-cell .meta{font-family:var(--font-sans);font-size:11px;color:var(--fg-4);margin-top:4px}
.vm-cx-cell.dcf{background:rgba(194,170,122,.05)}
.vm-cx-cell.dcf .lbl{color:var(--brass-deep)}
.vm-cx-cell.dcf .v{color:var(--brass-bright)}
"""


def _fmt_b(v_dollars: float) -> str:
    b = v_dollars / 1e9
    if abs(b) >= 1000:
        return f"${b / 1000:.2f}T"
    return f"${b:.2f}B"


def _build_dcf_canvas_html(
    ctx: dict,
    result: dict,
    wacc_pct: float,
    tg_pct: float,
    yrs: int,
    g_pct: float,
    ev_ebitda_price: float | None,
    ev_rev_price: float | None,
    pb_price: float | None,
) -> str:
    iv = result["intrinsic_value_per_share"]
    market = float(ctx["current_price"] or 0)
    has_market = market > 0

    upside_pct = (iv - market) / market * 100 if has_market else 0.0
    is_pos = upside_pct >= 0
    gap = iv - market

    # Bridge
    ev_b = _fmt_b(result["enterprise_value"])
    net_debt_b = _fmt_b(abs(result["net_debt"]))
    other_claims_b = _fmt_b(ctx["preferred_equity"] + ctx["minority_interest"])
    equity_b = _fmt_b(result["equity_value"])
    total_debt_b = _fmt_b(ctx["total_debt"])
    cash_b = _fmt_b(ctx["cash_and_equivalents"])
    other_b_val = ctx["preferred_equity"] + ctx["minority_interest"]

    shares_b = ctx["shares"] / 1e9
    source_date = ctx["bridge_items"].get("source_date", "")

    # Forecast sequences (capped at yrs)
    discounted = result["discounted_fcfs"][:yrs]
    projected = result["projected_fcfs"][:yrs]
    tv_pv = result["terminal_value_pv"]
    terminal_fcf = projected[-1] * (1 + tg_pct / 100) if projected else 0.0
    disc_factors = [1.0 / (1 + wacc_pct / 100) ** (i + 1) for i in range(len(discounted))]
    disc_tv_factor = 1.0 / (1 + wacc_pct / 100) ** yrs

    # Plotly chart data
    bar_x = [f"Year {i + 1}" for i in range(len(discounted))] + ["Terminal"]
    bar_y = [v / 1e9 for v in discounted] + [tv_pv / 1e9]
    bar_colors = ["#243E5A"] * len(discounted) + ["#C2AA7A"]
    bar_line_colors = ["#1F3B5E"] * len(discounted) + ["#DCC79E"]
    bar_text = [_fmt_b(v) for v in discounted] + [_fmt_b(tv_pv)]

    plotly_data_json = json_for_script([{
        "type": "bar",
        "x": bar_x,
        "y": bar_y,
        "marker": {"color": bar_colors, "line": {"color": bar_line_colors, "width": 1}},
        "text": bar_text,
        "textposition": "outside",
        "textfont": {"family": "IBM Plex Mono", "size": 10, "color": "#C7C0AE"},
        "hovertemplate": "%{x}: %{text}<extra></extra>",
        "cliponaxis": False,
    }])
    plotly_layout_json = json_for_script({
        "paper_bgcolor": "#11151C",
        "plot_bgcolor": "#11151C",
        "margin": {"l": 48, "r": 8, "t": 28, "b": 36},
        "xaxis": {
            "gridcolor": "rgba(0,0,0,0)",
            "linecolor": "#232934",
            "tickfont": {"family": "IBM Plex Sans", "size": 11, "color": "#8E8676"},
            "fixedrange": True,
        },
        "yaxis": {
            "gridcolor": "#232934",
            "linecolor": "rgba(0,0,0,0)",
            "tickfont": {"family": "IBM Plex Mono", "size": 10, "color": "#8E8676"},
            "tickprefix": "$",
            "ticksuffix": "B",
            "fixedrange": True,
            "zeroline": False,
        },
        "bargap": 0.35,
        "showlegend": False,
        "uniformtext": {"mode": "hide", "minsize": 8},
    })

    data_json = json_for_script({
        "baseFcf": result["base_fcf"],
        "netDebt": result["net_debt"],
        "otherClaims": ctx["preferred_equity"] + ctx["minority_interest"],
        "shares": ctx["shares"],
        "market": float(ctx["current_price"] or 0),
    })

    # Verdict
    verdict_gradient = (
        "linear-gradient(110deg,transparent 35%,rgba(79,140,94,.07) 100%)"
        if is_pos else
        "linear-gradient(110deg,transparent 35%,rgba(181,73,75,.07) 100%)"
    )
    pill_cls = "pos" if is_pos else "neg"
    pill_arrow = "▲" if is_pos else "▼"
    pill_sign = "+" if is_pos else "−"
    pill_text = f"{pill_arrow} {pill_sign}{abs(upside_pct):.1f}% {'upside' if is_pos else 'downside'}"
    reading = "Constructive" if is_pos else "Cautious"
    gap_dir = "above" if gap >= 0 else "below"

    iv_str = f"${iv:,.2f}"
    market_str = f"${market:,.2f}" if has_market else "—"
    gap_str = f"${abs(gap):,.2f}"

    # Cash-flow table
    n = len(discounted)
    hdr_cells = "".join(f"<th>Yr {i + 1}</th>" for i in range(n)) + "<th>Terminal</th>"
    fcf_cells = "".join(f"<td>{_fmt_b(v)}</td>" for v in projected)
    fcf_cells += f'<td class="brass">{_fmt_b(terminal_fcf)}</td>'
    df_cells = "".join(f"<td>{disc_factors[i]:.3f}</td>" for i in range(n))
    df_cells += f"<td>{disc_tv_factor:.3f}</td>"
    pv_cells = "".join(f"<td>{_fmt_b(v)}</td>" for v in discounted)
    pv_cells += f'<td class="brass">{_fmt_b(tv_pv)}</td>'

    # Cross-check cells
    def cx_cell(cls, lbl, val_str, delta_pct, meta):
        if delta_pct is not None and has_market:
            dcls = "pos" if delta_pct >= 0 else "neg"
            dsign = "+" if delta_pct >= 0 else ""
            dhtml = f'<span class="delta {dcls}">{dsign}{delta_pct:.1f}% vs market</span>'
        else:
            dhtml = '<span class="delta na">—</span>'
        return (
            f'<div class="{cls}">'
            f'<span class="lbl">{lbl}</span>'
            f'<span class="v num">{val_str}</span>'
            f"{dhtml}"
            f'<span class="meta">{meta}</span>'
            f"</div>"
        )

    dcf_delta = upside_pct if has_market else None
    if dcf_delta is not None and has_market:
        dcf_dcls = "pos" if dcf_delta >= 0 else "neg"
        dcf_dsign = "+" if dcf_delta >= 0 else ""
        dcf_dhtml = f'<span id="cx-dcf-d" class="delta {dcf_dcls}">{dcf_dsign}{dcf_delta:.1f}% vs market</span>'
    else:
        dcf_dhtml = '<span id="cx-dcf-d" class="delta na">—</span>'
    cx_dcf = (
        f'<div class="va-cx-cell dcf">'
        f'<span class="lbl">DCF · THIS MODEL</span>'
        f'<span id="cx-dcf-v" class="v num">{iv_str}</span>'
        f"{dcf_dhtml}"
        f'<span class="meta">Firm-value DCF · {yrs}-yr explicit · WACC {wacc_pct:.1f}%</span>'
        f"</div>"
    )

    def _cx_multiple_cell(label, implied, market_multiple, mult_label):
        if implied is not None and has_market:
            delta = (implied - market) / market * 100
            val = f"${implied:,.2f}"
            meta = f"Market multiple {market_multiple:.1f}× · {mult_label}" if market_multiple else mult_label
        else:
            delta = None
            val = "—"
            meta = "Unavailable for this company"
        return cx_cell("va-cx-cell", label, val, delta, meta)

    cx_ev = _cx_multiple_cell(
        "EV / EBITDA", ev_ebitda_price,
        ctx.get("ev_ebitda_current") or 0, "based on current market multiple",
    )
    cx_rev = _cx_multiple_cell(
        "EV / REVENUE", ev_rev_price,
        ctx.get("ev_revenue_current") or 0, "based on current market multiple",
    )
    cx_pb = _cx_multiple_cell(
        "P / BOOK", pb_price,
        ctx.get("pb_current") or 0, "based on current market multiple",
    )

    # Recon gap cell color
    gap_color = "var(--positive)" if gap >= 0 else "var(--negative)"
    gap_sign = "+" if gap >= 0 else ""
    gap_display = f"{gap_sign}${gap:,.2f}" if has_market else "—"
    gap_pct_str = f"{upside_pct:.1f}% vs market" if has_market else "—"

    # Rail filing strings (static, Python-formatted)
    net_debt_raw = ctx["total_debt"] - ctx["cash_and_equivalents"]
    base_fcf_str = _fmt_b(result["base_fcf"])
    hist_growth_str = f"{result['growth_rate_used']*100:+.1f}%"
    net_debt_str = _fmt_b(net_debt_raw)
    shares_str = f"{ctx['shares']/1e9:.2f} B"
    net_debt_label = f"Net debt{(' · ' + source_date) if source_date else ''}"

    html = f"""<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script src="https://cdn.plot.ly/plotly-2.35.2.min.js" charset="utf-8"></script>
<style>{_DCF_CANVAS_CSS}
/* 2-col inspector layout */
.dcf-inspector{{display:grid;grid-template-columns:272px 1fr;min-height:100%;background:var(--ink-0)}}
.dcf-rail{{padding:20px 16px 32px;border-right:1px solid var(--line-1);display:flex;flex-direction:column;gap:0;background:var(--ink-0)}}
.dcf-canvas-inner{{display:flex;flex-direction:column;gap:24px;padding:24px 24px 48px}}
/* Rail type */
.dcf-eyebrow{{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-3);font-weight:600;line-height:1}}
.dcf-title{{font-family:'EB Garamond',Georgia,serif;font-size:20px;font-weight:500;letter-spacing:-.01em;color:var(--fg-1);margin:6px 0 0;line-height:1.2}}
.dcf-sub{{font-family:var(--font-sans);font-size:12px;color:var(--fg-3);margin-top:6px;line-height:1.5}}
.dcf-divider{{border:none;border-top:1px solid var(--line-1);margin:14px 0}}
.dcf-filings-eyebrow{{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:.18em;color:var(--fg-3);font-weight:600;margin-bottom:10px}}
.dcf-filing-row{{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--font-mono);font-size:12px;color:var(--fg-2);margin-bottom:6px}}
.dcf-filing-val{{color:var(--fg-1);font-variant-numeric:tabular-nums}}
/* Rail sliders */
.rail-sliders{{display:flex;flex-direction:column;gap:14px;margin-top:14px}}
.rail-sl-item{{display:flex;flex-direction:column;gap:5px}}
.rail-sl-head{{display:flex;justify-content:space-between;align-items:baseline}}
.rail-sl-lbl{{font-family:var(--font-sans);font-size:12px;color:var(--fg-2)}}
.rail-sl-val{{font-family:var(--font-mono);font-size:12px;color:var(--brass-bright);font-variant-numeric:tabular-nums}}
.rail-warn{{font-family:var(--font-sans);font-size:11px;color:var(--warning);padding:6px 8px;background:var(--warning-bg);border-radius:4px;margin-top:4px}}
.dcf-rail input[type=range]{{width:100%;-webkit-appearance:none;appearance:none;background:var(--ink-3);height:4px;border-radius:999px;cursor:pointer;outline:none}}
.dcf-rail input[type=range]::-webkit-slider-thumb{{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--brass);border:2px solid #0B0E13;box-shadow:0 0 0 1px var(--brass-deep);cursor:pointer}}
.dcf-rail input[type=range]::-moz-range-thumb{{width:14px;height:14px;border-radius:50%;background:var(--brass);border:2px solid #0B0E13;cursor:pointer;border:none}}
.rail-sl-hint{{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--fg-4);margin-top:3px;letter-spacing:.02em}}
.rail-actions{{display:flex;flex-direction:column;gap:8px;margin-top:16px}}
.rail-btn{{font-family:var(--font-sans);font-size:12px;color:var(--fg-3);background:var(--ink-2);border:1px solid var(--line-2);border-radius:3px;padding:7px 12px;cursor:pointer;text-align:center;transition:color .15s,border-color .15s;width:100%}}
.rail-btn:hover{{color:var(--fg-1);border-color:var(--line-3)}}
.rail-btn[disabled]{{opacity:.4;cursor:not-allowed;pointer-events:none}}
</style>
</head>
<body>
<div class="dcf-inspector">

  <aside class="dcf-rail">
    <span class="dcf-eyebrow">Assumptions</span>
    <div class="dcf-title">3-stage DCF</div>
    <div class="dcf-sub">Firm-value DCF — projects free cash flow, discounts to today, bridges to equity per share.</div>

    <div class="rail-sliders">
      <div class="rail-sl-item">
        <div class="rail-sl-head">
          <span class="rail-sl-lbl">WACC (%)</span>
          <span class="rail-sl-val" id="wacc-disp">{wacc_pct:.2f}%</span>
        </div>
        <input type="range" id="sl-wacc" min="4" max="15" step="0.25" value="{wacc_pct}">
        <div class="rail-sl-hint"><span>4.0 aggressive</span><span>conservative 15.0</span></div>
      </div>
      <div class="rail-sl-item">
        <div class="rail-sl-head">
          <span class="rail-sl-lbl">Terminal growth (%)</span>
          <span class="rail-sl-val" id="tg-disp">{tg_pct:.1f}%</span>
        </div>
        <input type="range" id="sl-tg" min="0" max="5" step="0.1" value="{tg_pct}">
        <div class="rail-sl-hint"><span>0.0 conservative</span><span>aggressive 5.0</span></div>
      </div>
      <div class="rail-sl-item">
        <div class="rail-sl-head">
          <span class="rail-sl-lbl">Forecast horizon (yr)</span>
          <span class="rail-sl-val" id="yrs-disp">{yrs} yr</span>
        </div>
        <input type="range" id="sl-yrs" min="3" max="10" step="1" value="{yrs}">
        <div class="rail-sl-hint"><span>3 yr short</span><span>extended 10 yr</span></div>
      </div>
      <div class="rail-sl-item">
        <div class="rail-sl-head">
          <span class="rail-sl-lbl">FCF growth (%)</span>
          <span class="rail-sl-val" id="g-disp">{g_pct:.1f}%</span>
        </div>
        <input type="range" id="sl-g" min="-15" max="20" step="0.1" value="{g_pct}">
        <div class="rail-sl-hint"><span>-15 decline</span><span>growth +20</span></div>
      </div>
    </div>
    <div class="rail-warn" id="wacc-tg-warn" style="display:none">WACC must exceed terminal growth</div>

    <hr class="dcf-divider">

    <div class="dcf-filings-eyebrow">From the filings</div>
    <div class="dcf-filing-row"><span>Base FCF (TTM)</span><span class="dcf-filing-val">{base_fcf_str}</span></div>
    <div class="dcf-filing-row"><span>FCF · 5-yr median</span><span class="dcf-filing-val">{hist_growth_str}</span></div>
    <div class="dcf-filing-row"><span>{net_debt_label}</span><span class="dcf-filing-val">{net_debt_str}</span></div>
    <div class="dcf-filing-row"><span>Shares outstanding</span><span class="dcf-filing-val">{shares_str}</span></div>

    <div class="rail-actions">
      <button class="rail-btn" onclick="resetSliders()">Reset to defaults</button>
      <button class="rail-btn" disabled>Save scenario &middot; soon</button>
    </div>
  </aside>

  <div class="dcf-canvas-inner">

    <section class="va-verdict" style="--verdict-gradient:{verdict_gradient}">
      <div id="verdict-grad" style="position:absolute;inset:0;background:{verdict_gradient};pointer-events:none;z-index:0"></div>
      <div class="top">
        <div class="col">
          <span class="lbl">DCF Intrinsic Value</span>
          <span class="big num" id="iv-big">{iv_str}</span>
          <span class="sub">per share &middot; firm value method &middot; {yrs}-yr horizon</span>
        </div>
        <span class="arrow">vs</span>
        <div class="col" style="align-items:flex-end">
          <span class="lbl">Market Price</span>
          <span class="big market num">{market_str}</span>
          <span class="pill {pill_cls}" id="upside-pill">{pill_text}</span>
        </div>
      </div>
      <div class="band">
        <span>Reading &middot; DCF implies <span class="mono" id="gap-str">{gap_str}</span> <span id="gap-dir">{gap_dir}</span> the current market.</span>
        <span class="reading" id="reading-str">{reading}</span>
      </div>
    </section>

    <section class="va-projection">
      <div class="head">
        <h3>Enterprise value build &mdash; present value of FCFs + terminal</h3>
        <span class="units" id="chart-units">USD &middot; billions &middot; discounted at WACC {wacc_pct:.1f}%</span>
      </div>
      <div id="dcf-chart" style="width:100%;height:260px"></div>
      <table class="va-cf-table">
        <thead><tr id="cf-thead"><th></th>{hdr_cells}</tr></thead>
        <tbody>
          <tr id="cf-fcf"><td>Forecast FCF</td>{fcf_cells}</tr>
          <tr id="cf-df"><td>Discount factor</td>{df_cells}</tr>
          <tr class="total" id="cf-pv"><td>Present value</td>{pv_cells}</tr>
        </tbody>
      </table>
    </section>

    <section class="va-bridge">
      <div class="bhead">
        <h3>From enterprise to equity</h3>
        <span class="bdate">Balance-sheet bridge{(' &middot; ' + source_date) if source_date else ''}</span>
      </div>
      <div class="flow">
        <div class="node start"><span class="lbl">Enterprise value</span><span class="v num" id="ev-node-val">{ev_b}</span></div>
        <div class="op">&minus;<span class="sub">Net debt</span></div>
        <div class="node"><span class="lbl">Net debt</span><span class="v num">{net_debt_b}</span></div>
        <div class="op">&minus;<span class="sub">Other claims</span></div>
        <div class="node"><span class="lbl">Other claims</span><span class="v num">{other_claims_b}</span></div>
        <div class="op">=</div>
        <div class="node result"><span class="lbl">Equity value</span><span class="v num" id="equity-node-val">{equity_b}</span></div>
      </div>
      <div class="bfoot">
        <span>Total debt {total_debt_b}</span>
        <span>&middot;</span>
        <span>Cash &amp; equiv. {cash_b}</span>
        <span>&middot;</span>
        <span>Preferred + minority {_fmt_b(other_b_val)}</span>
      </div>
    </section>

    <section class="va-recon">
      <div class="cell intrinsic">
        <span class="lbl">Intrinsic &middot; Per Share</span>
        <span class="v num" id="recon-iv">{iv_str}</span>
        <span class="sub">Equity value &divide; shares</span>
      </div>
      <div class="cell">
        <span class="lbl">Market &middot; Last</span>
        <span class="v num">{market_str}</span>
        <span class="sub">&nbsp;</span>
      </div>
      <div class="cell">
        <span class="lbl">Gap</span>
        <span class="v num" id="recon-gap" style="color:{gap_color}">{gap_display}</span>
        <span class="sub" id="recon-gap-pct">{gap_pct_str}</span>
      </div>
      <div class="cell">
        <span class="lbl">Shares Outstanding</span>
        <span class="v num">{shares_b:.2f} B</span>
        <span class="sub">diluted</span>
      </div>
    </section>

    <section class="va-cx">
      <div class="va-cx-head">
        <h3>Cross-check against the multiples</h3>
        <span class="hint">Same business, different lenses &middot; implied per-share</span>
      </div>
      <div class="va-cx-grid">
        {cx_dcf}
        {cx_ev}
        {cx_rev}
        {cx_pb}
      </div>
    </section>

    <div class="va-foot">
      <span>Firm-value DCF &middot; enterprise value bridged to equity using debt &amp; cash from the most recent balance sheet. Negative-FCF years are excluded from the base; terminal value uses Gordon Growth Model.</span>
      <a href="#">Methodology &amp; sources &nearr;</a>
    </div>

  </div>
</div>
<script>
var D = {data_json};
var LAYOUT = {plotly_layout_json};
var INIT_WACC = {wacc_pct};
var INIT_TG = {tg_pct};
var INIT_YRS = {yrs};
var INIT_G = {g_pct};

function resetSliders() {{
  document.getElementById('sl-wacc').value = INIT_WACC;
  document.getElementById('sl-tg').value = INIT_TG;
  document.getElementById('sl-yrs').value = INIT_YRS;
  document.getElementById('sl-g').value = INIT_G;
  update();
}}

function fB(n) {{ var b=n/1e9; return Math.abs(b)>=1000?'$'+(b/1000).toFixed(2)+'T':'$'+b.toFixed(2)+'B'; }}
function fS(n) {{ return '$'+n.toLocaleString('en-US',{{minimumFractionDigits:2,maximumFractionDigits:2}}); }}

function runDCF(wacc, tg, yrs, g) {{
  g = Math.max(-0.5, Math.min(0.5, g));
  var fcfs=[], dfs=[], pvs=[];
  for (var i=1; i<=yrs; i++) {{
    var f = D.baseFcf * Math.pow(1+g, i);
    var df = 1/Math.pow(1+wacc, i);
    fcfs.push(f); dfs.push(df); pvs.push(f*df);
  }}
  var pvSum = pvs.reduce(function(a,b){{return a+b;}},0);
  var termFcf = fcfs[yrs-1]*(1+tg);
  var tvNom = termFcf/(wacc-tg);
  var tvDf = 1/Math.pow(1+wacc,yrs);
  var tvPv = tvNom*tvDf;
  var ev = pvSum+tvPv;
  var equity = ev-D.netDebt-D.otherClaims;
  return {{fcfs:fcfs,dfs:dfs,pvs:pvs,termFcf:termFcf,tvDf:tvDf,tvPv:tvPv,ev:ev,equity:equity,iv:equity/D.shares}};
}}

function setText(id,t){{var e=document.getElementById(id);if(e)e.textContent=t;}}
function setHtml(id,h){{var e=document.getElementById(id);if(e)e.innerHTML=h;}}

function update() {{
  var wacc=+document.getElementById('sl-wacc').value/100;
  var tg=+document.getElementById('sl-tg').value/100;
  var yrs=+document.getElementById('sl-yrs').value;
  var g=+document.getElementById('sl-g').value/100;

  setText('wacc-disp',(wacc*100).toFixed(2)+'%');
  setText('tg-disp',(tg*100).toFixed(1)+'%');
  setText('yrs-disp',yrs+' yr');
  setText('g-disp',(g*100).toFixed(1)+'%');

  var warn=document.getElementById('wacc-tg-warn');
  if (wacc<=tg) {{ warn.style.display='block'; return; }}
  warn.style.display='none';

  var r=runDCF(wacc,tg,yrs,g);
  var iv=r.iv, market=D.market, gap=iv-market;
  var isPos=iv>=market, upside=market>0?(iv-market)/market*100:0;

  setText('iv-big',fS(iv));
  var pill=document.getElementById('upside-pill');
  if(pill){{
    var arr=isPos?'▲':'▼', sign=isPos?'+':'−';
    pill.textContent=arr+' '+sign+Math.abs(upside).toFixed(1)+'% '+(isPos?'upside':'downside');
    pill.className='pill '+(isPos?'pos':'neg');
  }}
  var grad=document.getElementById('verdict-grad');
  if(grad) grad.style.background=isPos
    ?'linear-gradient(110deg,transparent 35%,rgba(79,140,94,.07) 100%)'
    :'linear-gradient(110deg,transparent 35%,rgba(181,73,75,.07) 100%)';
  setText('gap-str','$'+Math.abs(gap).toFixed(2));
  setText('gap-dir',gap>=0?'above':'below');
  setText('reading-str',isPos?'Constructive':'Cautious');
  setText('chart-units','USD · billions · discounted at WACC '+(wacc*100).toFixed(1)+'%');

  var thead=document.getElementById('cf-thead');
  var tfcf=document.getElementById('cf-fcf');
  var tdf=document.getElementById('cf-df');
  var tpv=document.getElementById('cf-pv');
  if(thead){{
    var hh='<th></th>',fh='<td>Forecast FCF</td>',dh='<td>Discount factor</td>',ph='<td>Present value</td>';
    for(var i=0;i<yrs;i++){{
      hh+='<th>Yr '+(i+1)+'</th>';
      fh+='<td>'+fB(r.fcfs[i])+'</td>';
      dh+='<td>'+r.dfs[i].toFixed(3)+'</td>';
      ph+='<td>'+fB(r.pvs[i])+'</td>';
    }}
    hh+='<th>Terminal</th>';
    fh+='<td class="brass">'+fB(r.termFcf)+'</td>';
    dh+='<td>'+r.tvDf.toFixed(3)+'</td>';
    ph+='<td class="brass">'+fB(r.tvPv)+'</td>';
    thead.innerHTML=hh; tfcf.innerHTML=fh; tdf.innerHTML=dh; tpv.innerHTML=ph;
  }}

  var bx=[],by=[],bc=[],blc=[],bt=[];
  for(var i=0;i<yrs;i++){{
    bx.push('Year '+(i+1)); by.push(r.pvs[i]/1e9);
    bc.push('#243E5A'); blc.push('#1F3B5E'); bt.push(fB(r.pvs[i]));
  }}
  bx.push('Terminal'); by.push(r.tvPv/1e9);
  bc.push('#C2AA7A'); blc.push('#DCC79E'); bt.push(fB(r.tvPv));
  Plotly.react('dcf-chart',[{{
    type:'bar',x:bx,y:by,
    marker:{{color:bc,line:{{color:blc,width:1}}}},
    text:bt,textposition:'outside',
    textfont:{{family:'IBM Plex Mono',size:10,color:'#C7C0AE'}},
    hovertemplate:'%{{x}}: %{{text}}<extra></extra>',
    cliponaxis:false
  }}],LAYOUT);

  setText('ev-node-val',fB(r.ev));
  setText('equity-node-val',fB(r.equity));
  setText('recon-iv',fS(iv));
  var gapEl=document.getElementById('recon-gap');
  if(gapEl){{gapEl.textContent=(gap>=0?'+$':'-$')+Math.abs(gap).toFixed(2);gapEl.style.color=gap>=0?'var(--positive)':'var(--negative)';}}
  setText('recon-gap-pct',market>0?upside.toFixed(1)+'% vs market':'—');
  setText('cx-dcf-v',fS(iv));
  if(market>0){{
    var dd=upside,dcls=dd>=0?'pos':'neg',dsign=dd>=0?'+':'';
    setHtml('cx-dcf-d','<span class="delta '+dcls+'">'+dsign+dd.toFixed(1)+'% vs market</span>');
  }}
}}

['sl-wacc','sl-tg','sl-yrs','sl-g'].forEach(function(id){{
  document.getElementById(id).addEventListener('input',update);
}});

// Initial chart render
var data = {plotly_data_json};
Plotly.newPlot('dcf-chart', data, LAYOUT, {{displayModeBar:false,responsive:true}});
</script>
</body>
</html>"""

    return html


def _build_multiples_canvas_html(ctx: dict) -> str:
    market = float(ctx["current_price"] or 0)
    shares = float(ctx["shares"] or 0)
    total_debt = float(ctx["total_debt"] or 0)
    cash = float(ctx["cash_and_equivalents"] or 0)
    net_debt = total_debt - cash
    ebitda = float(ctx["ebitda"]) if ctx.get("ebitda") and ctx["ebitda"] > 0 else 0.0
    revenue = float(ctx["revenue_ttm"]) if ctx.get("revenue_ttm") and ctx["revenue_ttm"] > 0 else 0.0
    book_ps = float(ctx["book_value_per_share"]) if ctx.get("book_value_per_share") and ctx["book_value_per_share"] > 0 else 0.0

    eb_ok = ebitda > 0 and shares > 0
    rv_ok = revenue > 0 and shares > 0
    pb_ok = book_ps > 0
    has_market = market > 0

    def _clamp(v, lo, hi):
        try:
            return max(lo, min(hi, float(v)))
        except (TypeError, ValueError):
            return lo

    eb_init = _clamp(ctx.get("ev_ebitda_current") or 15.0, 8.0, 32.0)
    rv_init = _clamp(ctx.get("ev_revenue_current") or 5.0, 4.0, 20.0)
    pb_init = _clamp(ctx.get("pb_current") or 5.0, 4.0, 60.0)

    # Sector medians — try peers, fall back to defaults
    eb_sector, rv_sector, pb_sector = 12.0, 3.0, 4.0
    try:
        info = ctx.get("info") or {}
        peers = get_peers(ctx["ticker"]) or _suggest_peer_tickers(ctx["ticker"], info)
        if peers:
            pr = get_ratios_for_tickers(peers[:6])
            if pr:
                import statistics as _stats
                eb_vs = [float(r["enterpriseValueMultipleTTM"]) for r in pr
                         if r and r.get("enterpriseValueMultipleTTM") and 2 < r["enterpriseValueMultipleTTM"] < 100]
                rv_vs = [float(r["evToSalesTTM"]) for r in pr
                         if r and r.get("evToSalesTTM") and 0.1 < r["evToSalesTTM"] < 50]
                pb_vs = [float(r["priceToBookRatioTTM"]) for r in pr
                         if r and r.get("priceToBookRatioTTM") and 0.5 < r["priceToBookRatioTTM"] < 200]
                if eb_vs:
                    eb_sector = _stats.median(eb_vs)
                if rv_vs:
                    rv_sector = _stats.median(rv_vs)
                if pb_vs:
                    pb_sector = _stats.median(pb_vs)
    except Exception:
        pass

    eb_sector = _clamp(eb_sector, 8.0, 32.0)
    rv_sector = _clamp(rv_sector, 4.0, 20.0)
    pb_sector = _clamp(pb_sector, 4.0, 60.0)

    dcf_iv = st.session_state.get(f"dcf_intrinsic_{ctx['ticker']}")
    dcf_wacc = st.session_state.get(f"dcf_wacc_{ctx['ticker']}", 10.0)
    dcf_tg = st.session_state.get(f"dcf_tg_{ctx['ticker']}", 2.5)
    dcf_yrs = st.session_state.get(f"dcf_yrs_{ctx['ticker']}", 5)

    def _fb(v):
        if v is None or not (isinstance(v, (int, float)) and v == v):
            return "—"
        b = v / 1e9
        if abs(b) >= 1000:
            return f"${b / 1000:.2f}T"
        return f"${b:.2f}B"

    def _fs(v):
        if v is None or not (isinstance(v, (int, float)) and v == v):
            return "—"
        return f"${v:.2f}"

    def _fx(v):
        return f"{v:.1f}&times;"

    def _dpct(v):
        if not has_market or v is None:
            return None
        return (v - market) / market * 100

    def _d_span(val, id_attr=""):
        d = _dpct(val)
        if d is None:
            return f'<span {id_attr} class="delta na">—</span>'
        cls = "pos" if d >= 0 else "neg"
        arr = "▲" if d >= 0 else "▼"
        sign = "+" if d >= 0 else ""
        market_str = _fs(market)
        return f'<span {id_attr} class="delta num {cls}">{arr} {sign}{d:.1f}% vs {market_str}</span>'

    def _ds_span(val, id_attr=""):
        d = _dpct(val)
        if d is None:
            return f'<span {id_attr} class="d na">—</span>'
        cls = "pos" if d >= 0 else "neg"
        arr = "▲" if d >= 0 else "▼"
        sign = "+" if d >= 0 else ""
        return f'<span {id_attr} class="d num {cls}">{arr} {sign}{d:.1f}%</span>'

    # Initial computed values
    if eb_ok:
        eb_ev0 = eb_init * ebitda
        eb_eq0 = eb_ev0 - net_debt
        eb_per0 = eb_eq0 / shares
    else:
        eb_ev0 = eb_eq0 = eb_per0 = None

    if rv_ok:
        rv_ev0 = rv_init * revenue
        rv_eq0 = rv_ev0 - net_debt
        rv_per0 = rv_eq0 / shares
    else:
        rv_ev0 = rv_eq0 = rv_per0 = None

    pb_per0 = pb_init * book_ps if pb_ok else None

    # Sector reference values (static)
    sec_eb = (eb_sector * ebitda - net_debt) / shares if eb_ok else None
    sec_rv = (rv_sector * revenue - net_debt) / shares if rv_ok else None
    sec_pb = pb_sector * book_ps if pb_ok else None

    # Slider CSS % positions
    def _pct(v, lo, hi):
        return (v - lo) / (hi - lo) * 100

    eb_s_pct = _pct(eb_sector, 8, 32)
    eb_bl_pct = _pct(14, 8, 32)
    eb_bh_pct = _pct(26, 8, 32)
    rv_s_pct = _pct(rv_sector, 4, 20)
    rv_bl_pct = _pct(6, 4, 20)
    rv_bh_pct = _pct(13, 4, 20)
    pb_s_pct = _pct(pb_sector, 4, 60)
    pb_bl_pct = _pct(8, 4, 60)
    pb_bh_pct = _pct(14, 4, 60)

    shares_str = f"{shares / 1e9:.2f}&nbsp;B" if shares > 0 else "—"

    # P/Book fit badge depends on whether company is financial
    pb_fit_cls = "ok" if ctx.get("is_financial") else "warn"
    pb_fit_lbl = "Strong fit" if ctx.get("is_financial") else "Limited fit"

    # Sensitivity re-rating strings (static sector side)
    def _rr(subj_per, sect_per):
        if subj_per is None or sect_per is None or subj_per == 0:
            return "—"
        rr = (sect_per - subj_per) / abs(subj_per) * 100
        sign = "+" if rr >= 0 else ""
        cls = "pos" if rr >= 0 else "neg"
        return f'<span class="num {cls}">{sign}{rr:.1f}%</span>'

    # DCF cross-check cell
    if dcf_iv is not None:
        dcf_d = _dpct(float(dcf_iv))
        if dcf_d is not None:
            dcf_cls = "pos" if dcf_d >= 0 else "neg"
            dcf_arr = "▲" if dcf_d >= 0 else "▼"
            dcf_sign = "+" if dcf_d >= 0 else ""
            dcf_delta_html = f'<span class="delta num {dcf_cls}">{dcf_arr} {dcf_sign}{dcf_d:.1f}% vs market</span>'
        else:
            dcf_delta_html = '<span class="delta na">—</span>'
        dcf_val_str = _fs(float(dcf_iv))
        dcf_meta_str = f"WACC {dcf_wacc:.1f}% &middot; TG {dcf_tg:.1f}% &middot; {dcf_yrs}-yr explicit"
    else:
        dcf_delta_html = '<span class="delta na">Run DCF tab first</span>'
        dcf_val_str = "—"
        dcf_meta_str = "Switch to DCF tab to compute"

    ticker = _h(ctx["ticker"])
    exchange = _h((ctx.get("info") or {}).get("exchange") or "—")

    data_json = json_for_script({
        "market": market, "shares": shares, "netDebt": net_debt,
        "totalDebt": total_debt, "cash": cash,
        "ebitda": ebitda, "revenue": revenue, "bookPs": book_ps,
        "ebOk": eb_ok, "rvOk": rv_ok, "pbOk": pb_ok, "hasMarket": has_market,
        "ebSector": eb_sector, "rvSector": rv_sector, "pbSector": pb_sector,
    })

    html = ("<!DOCTYPE html>"
    "<html>"
    "<head>"
    "<meta charset=\"utf-8\">"
    "<style>"
    + _DCF_CANVAS_CSS
    + _MULT_CANVAS_CSS
    + "</style>"
    "</head>"
    "<body>"
    "<div class=\"vm-body\">"
    ""
    "<section class=\"vm-summary\">"
    "  <div class=\"vm-summary-head\">"
    "    <span class=\"eyebrow\">Multiples</span>"
    "    <h2 class=\"ttl\">Three relative-valuation lenses &mdash; implied per-share</h2>"
    "    <p class=\"lede\">Subject multiple &times; normalized TTM metric, bridged to equity per share. Compare across columns to see which lens the market is leaning on.</p>"
    "  </div>"
    "  <div class=\"vm-summary-strip\">"
    "    <div class=\"vm-sum-cell\">"
    "      <span class=\"lbl\">EV / EBITDA</span>"
    "      <span class=\"v num\" id=\"sum-eb-val\">" + _fs(eb_per0) + "</span>"
    "      " + _ds_span(eb_per0, 'id="sum-eb-d"') + ""
    "    </div>"
    "    <div class=\"vm-sum-cell\">"
    "      <span class=\"lbl\">EV / Revenue</span>"
    "      <span class=\"v num\" id=\"sum-rv-val\">" + _fs(rv_per0) + "</span>"
    "      " + _ds_span(rv_per0, 'id="sum-rv-d"') + ""
    "    </div>"
    "    <div class=\"vm-sum-cell\">"
    "      <span class=\"lbl\">P / Book</span>"
    "      <span class=\"v num\" id=\"sum-pb-val\">" + _fs(pb_per0) + "</span>"
    "      " + _ds_span(pb_per0, 'id="sum-pb-d"') + ""
    "    </div>"
    "    <div class=\"vm-sum-cell market\">"
    "      <span class=\"lbl\">Market &middot; last</span>"
    "      <span class=\"v num\">" + (_fs(market) if has_market else "—") + "</span>"
    "      <span class=\"d num\" style=\"color:var(--fg-3)\">" + ticker + " &middot; " + exchange + "</span>"
    "    </div>"
    "  </div>"
    "</section>"
    ""
    "<section class=\"vm-compare\">"
    "  <div class=\"vm-compare-head\">"
    "    <h3>Method comparison</h3>"
    "    <span class=\"units\">USD &middot; TTM metrics &middot; balance-sheet bridge</span>"
    "  </div>"
    ""
    "  <div class=\"vm-grid head\">"
    "    <div class=\"vm-row-lbl\">Method</div>"
    "    <div class=\"vm-col-head\">"
    "      <div class=\"vm-col-title\"><span class=\"n\">I</span><h4>EV / EBITDA</h4><span class=\"fit ok\">Strong fit</span></div>"
    "      <p class=\"lede\">Enterprise value normalized by operating cash profit. Strips depreciation and capital structure so different capex profiles compare cleanly.</p>"
    "    </div>"
    "    <div class=\"vm-col-head\">"
    "      <div class=\"vm-col-title\"><span class=\"n\">II</span><h4>EV / Revenue</h4><span class=\"fit ok\">Strong fit</span></div>"
    "      <p class=\"lede\">Topline multiple &mdash; useful when margins are volatile or the business is reinvesting through profitability. Less sensitive to one-off charges.</p>"
    "    </div>"
    "    <div class=\"vm-col-head\">"
    "      <div class=\"vm-col-title\"><span class=\"n\">III</span><h4>P / Book</h4><span class=\"fit " + pb_fit_cls + "\">" + pb_fit_lbl + "</span></div>"
    "      <p class=\"lede\">Equity multiple &mdash; works for balance-sheet-heavy businesses (banks, insurers, REITs). Limited signal for asset-light software &amp; services.</p>"
    "    </div>"
    "  </div>"
    ""
    "  <div class=\"vm-grid\">"
    "    <div class=\"vm-row-lbl\">Subject multiple<span class=\"sub\">drag to flex the lens</span></div>"
    "    <div class=\"vm-cell mult\">"
    "      <div class=\"mult-top\"><span class=\"big num\" id=\"big-eb\">" + _fx(eb_init) + "</span><span class=\"sector num\">sector " + _fx(eb_sector) + "</span></div>"
    "      <div class=\"mult-slider\">"
    "        <div class=\"track\">"
    "          <span class=\"band\" style=\"left:" + f"{eb_bl_pct:.1f}" + "%;right:" + f"{100-eb_bh_pct:.1f}" + "%\"></span>"
    "          <span class=\"marker\" style=\"left:" + f"{eb_s_pct:.1f}" + "%\"></span>"
    "        </div>"
    "        <input type=\"range\" id=\"sl-eb\" min=\"8\" max=\"32\" step=\"0.1\" value=\"" + f"{eb_init:.1f}" + "\"" + (' disabled' if not eb_ok else '') + ">"
    "      </div>"
    "      <div class=\"mult-meta\"><span>8&times;</span><span>typical 14&times;&ndash;26&times;</span><span>32&times;</span></div>"
    "    </div>"
    "    <div class=\"vm-cell mult\">"
    "      <div class=\"mult-top\"><span class=\"big num\" id=\"big-rv\">" + _fx(rv_init) + "</span><span class=\"sector num\">sector " + _fx(rv_sector) + "</span></div>"
    "      <div class=\"mult-slider\">"
    "        <div class=\"track\">"
    "          <span class=\"band\" style=\"left:" + f"{rv_bl_pct:.1f}" + "%;right:" + f"{100-rv_bh_pct:.1f}" + "%\"></span>"
    "          <span class=\"marker\" style=\"left:" + f"{rv_s_pct:.1f}" + "%\"></span>"
    "        </div>"
    "        <input type=\"range\" id=\"sl-rv\" min=\"4\" max=\"20\" step=\"0.1\" value=\"" + f"{rv_init:.1f}" + "\"" + (' disabled' if not rv_ok else '') + ">"
    "      </div>"
    "      <div class=\"mult-meta\"><span>4&times;</span><span>typical 6&times;&ndash;13&times;</span><span>20&times;</span></div>"
    "    </div>"
    "    <div class=\"vm-cell mult\">"
    "      <div class=\"mult-top\"><span class=\"big num\" id=\"big-pb\">" + _fx(pb_init) + "</span><span class=\"sector num\">sector " + _fx(pb_sector) + "</span></div>"
    "      <div class=\"mult-slider\">"
    "        <div class=\"track\">"
    "          <span class=\"band\" style=\"left:" + f"{pb_bl_pct:.1f}" + "%;right:" + f"{100-pb_bh_pct:.1f}" + "%\"></span>"
    "          <span class=\"marker\" style=\"left:" + f"{pb_s_pct:.1f}" + "%\"></span>"
    "        </div>"
    "        <input type=\"range\" id=\"sl-pb\" min=\"4\" max=\"60\" step=\"0.1\" value=\"" + f"{pb_init:.1f}" + "\"" + (' disabled' if not pb_ok else '') + ">"
    "      </div>"
    "      <div class=\"mult-meta\"><span>4&times;</span><span>typical 8&times;&ndash;14&times;</span><span>60&times;</span></div>"
    "    </div>"
    "  </div>"
    ""
    "  <div class=\"vm-grid\">"
    "    <div class=\"vm-row-lbl\">&times; Normalized metric<span class=\"sub\">from TTM filings</span></div>"
    "    <div class=\"vm-cell\"><span class=\"v num\">" + (_fb(ebitda) if eb_ok else "—") + "</span><span class=\"cap\">EBITDA &middot; TTM</span></div>"
    "    <div class=\"vm-cell\"><span class=\"v num\">" + (_fb(revenue) if rv_ok else "—") + "</span><span class=\"cap\">Revenue &middot; TTM</span></div>"
    "    <div class=\"vm-cell\"><span class=\"v num\">" + (_fs(book_ps) if pb_ok else "—") + "</span><span class=\"cap\">Book value &middot; /share</span></div>"
    "  </div>"
    ""
    "  <div class=\"vm-grid\">"
    "    <div class=\"vm-row-lbl\">= Enterprise value</div>"
    "    <div class=\"vm-cell\"><span class=\"v num\" id=\"eb-ev-val\">" + _fb(eb_ev0) + "</span><span class=\"cap\">multiple &times; metric</span></div>"
    "    <div class=\"vm-cell\"><span class=\"v num\" id=\"rv-ev-val\">" + _fb(rv_ev0) + "</span><span class=\"cap\">multiple &times; metric</span></div>"
    "    <div class=\"vm-cell faded\"><span class=\"v num dash\">—</span><span class=\"cap\">P/B is an equity multiple &mdash; no EV step</span></div>"
    "  </div>"
    ""
    "  <div class=\"vm-grid\">"
    "    <div class=\"vm-row-lbl\">&minus; Net debt</div>"
    "    <div class=\"vm-cell\"><span class=\"v num\">" + _fb(net_debt) + "</span><span class=\"cap\">total " + _fb(total_debt) + " &minus; cash " + _fb(cash) + "</span></div>"
    "    <div class=\"vm-cell\"><span class=\"v num\">" + _fb(net_debt) + "</span><span class=\"cap\">total " + _fb(total_debt) + " &minus; cash " + _fb(cash) + "</span></div>"
    "    <div class=\"vm-cell faded\"><span class=\"v num dash\">—</span></div>"
    "  </div>"
    ""
    "  <div class=\"vm-grid\">"
    "    <div class=\"vm-row-lbl\">= Equity value</div>"
    "    <div class=\"vm-cell\"><span class=\"v num\" id=\"eb-eq-val\">" + _fb(eb_eq0) + "</span><span class=\"cap\">EV &minus; net debt</span></div>"
    "    <div class=\"vm-cell\"><span class=\"v num\" id=\"rv-eq-val\">" + _fb(rv_eq0) + "</span><span class=\"cap\">EV &minus; net debt</span></div>"
    "    <div class=\"vm-cell faded\"><span class=\"v num dash\">—</span></div>"
    "  </div>"
    ""
    "  <div class=\"vm-grid\">"
    "    <div class=\"vm-row-lbl\">&divide; Shares outstanding</div>"
    "    <div class=\"vm-cell\"><span class=\"v num\">" + shares_str + "</span><span class=\"cap\">diluted</span></div>"
    "    <div class=\"vm-cell\"><span class=\"v num\">" + shares_str + "</span><span class=\"cap\">diluted</span></div>"
    "    <div class=\"vm-cell faded\"><span class=\"v num dash\">—</span></div>"
    "  </div>"
    ""
    "  <div class=\"vm-grid result\">"
    "    <div class=\"vm-row-lbl strong\">= Implied per share</div>"
    "    <div class=\"vm-cell result\">"
    "      <span class=\"v num\" id=\"eb-per-val\">" + _fs(eb_per0) + "</span>"
    "      " + _d_span(eb_per0, 'id="eb-per-d"') + ""
    "    </div>"
    "    <div class=\"vm-cell result\">"
    "      <span class=\"v num\" id=\"rv-per-val\">" + _fs(rv_per0) + "</span>"
    "      " + _d_span(rv_per0, 'id="rv-per-d"') + ""
    "    </div>"
    "    <div class=\"vm-cell result\">"
    "      <span class=\"v num\" id=\"pb-per-val\">" + _fs(pb_per0) + "</span>"
    "      " + _d_span(pb_per0, 'id="pb-per-d"') + ""
    "    </div>"
    "  </div>"
    "</section>"
    ""
    "<section class=\"vm-sensitivity\">"
    "  <div class=\"vm-sensitivity-head\">"
    "    <h3>If the lens shifted to sector</h3>"
    "    <span class=\"hint\">Same metrics, subject multiple replaced by sector median</span>"
    "  </div>"
    "  <div class=\"vm-sens-grid\">"
    ""
    "    <div class=\"vm-sens-cell\">"
    "      <span class=\"lbl\">EV / EBITDA</span>"
    "      <div class=\"vm-sens-row\">"
    "        <div class=\"col\">"
    "          <span class=\"sub\" id=\"sens-eb-subj-lbl\">At subject " + _fx(eb_init) + "</span>"
    "          <span class=\"v num\" id=\"sens-eb-subj-v\">" + _fs(eb_per0) + "</span>"
    "          " + _ds_span(eb_per0, 'id="sens-eb-subj-d"') + ""
    "        </div>"
    "        <span class=\"arrow\">&rarr;</span>"
    "        <div class=\"col\">"
    "          <span class=\"sub\">At sector " + _fx(eb_sector) + "</span>"
    "          <span class=\"v num brass\">" + _fs(sec_eb) + "</span>"
    "          " + _ds_span(sec_eb) + ""
    "        </div>"
    "      </div>"
    "      <span class=\"meta\" id=\"sens-eb-meta\">Re-rating &Delta; " + _rr(eb_per0, sec_eb) + " per share if the subject converged to peers</span>"
    "    </div>"
    ""
    "    <div class=\"vm-sens-cell\">"
    "      <span class=\"lbl\">EV / Revenue</span>"
    "      <div class=\"vm-sens-row\">"
    "        <div class=\"col\">"
    "          <span class=\"sub\" id=\"sens-rv-subj-lbl\">At subject " + _fx(rv_init) + "</span>"
    "          <span class=\"v num\" id=\"sens-rv-subj-v\">" + _fs(rv_per0) + "</span>"
    "          " + _ds_span(rv_per0, 'id="sens-rv-subj-d"') + ""
    "        </div>"
    "        <span class=\"arrow\">&rarr;</span>"
    "        <div class=\"col\">"
    "          <span class=\"sub\">At sector " + _fx(rv_sector) + "</span>"
    "          <span class=\"v num brass\">" + _fs(sec_rv) + "</span>"
    "          " + _ds_span(sec_rv) + ""
    "        </div>"
    "      </div>"
    "      <span class=\"meta\" id=\"sens-rv-meta\">Re-rating &Delta; " + _rr(rv_per0, sec_rv) + " per share if the subject converged to peers</span>"
    "    </div>"
    ""
    "    <div class=\"vm-sens-cell\">"
    "      <span class=\"lbl\">P / Book</span>"
    "      <div class=\"vm-sens-row\">"
    "        <div class=\"col\">"
    "          <span class=\"sub\" id=\"sens-pb-subj-lbl\">At subject " + _fx(pb_init) + "</span>"
    "          <span class=\"v num\" id=\"sens-pb-subj-v\">" + _fs(pb_per0) + "</span>"
    "          " + _ds_span(pb_per0, 'id="sens-pb-subj-d"') + ""
    "        </div>"
    "        <span class=\"arrow\">&rarr;</span>"
    "        <div class=\"col\">"
    "          <span class=\"sub\">At sector " + _fx(pb_sector) + "</span>"
    "          <span class=\"v num brass\">" + _fs(sec_pb) + "</span>"
    "          " + _ds_span(sec_pb) + ""
    "        </div>"
    "      </div>"
    "      <span class=\"meta\" id=\"sens-pb-meta\">Re-rating &Delta; " + _rr(pb_per0, sec_pb) + " per share if the subject converged to peers</span>"
    "    </div>"
    ""
    "  </div>"
    "</section>"
    ""
    "<section class=\"vm-cx\">"
    "  <div class=\"vm-cx-head\">"
    "    <h3>Cross-check against DCF</h3>"
    "    <span class=\"hint\">DCF intrinsic from the firm-value model on the previous tab</span>"
    "  </div>"
    "  <div class=\"vm-cx-grid\">"
    "    <div class=\"vm-cx-cell dcf\">"
    "      <span class=\"lbl\">DCF &middot; firm value</span>"
    "      <span class=\"v num\">" + dcf_val_str + "</span>"
    "      " + dcf_delta_html + ""
    "      <span class=\"meta\">" + dcf_meta_str + "</span>"
    "    </div>"
    "    <div class=\"vm-cx-cell\">"
    "      <span class=\"lbl\">EV / EBITDA</span>"
    "      <span class=\"v num\" id=\"cx-eb-val\">" + _fs(eb_per0) + "</span>"
    "      " + _d_span(eb_per0, 'id="cx-eb-d"') + ""
    "      <span class=\"meta\" id=\"cx-eb-meta\">Subject " + _fx(eb_init) + " &middot; sector " + _fx(eb_sector) + "</span>"
    "    </div>"
    "    <div class=\"vm-cx-cell\">"
    "      <span class=\"lbl\">EV / Revenue</span>"
    "      <span class=\"v num\" id=\"cx-rv-val\">" + _fs(rv_per0) + "</span>"
    "      " + _d_span(rv_per0, 'id="cx-rv-d"') + ""
    "      <span class=\"meta\" id=\"cx-rv-meta\">Subject " + _fx(rv_init) + " &middot; sector " + _fx(rv_sector) + "</span>"
    "    </div>"
    "    <div class=\"vm-cx-cell\">"
    "      <span class=\"lbl\">P / Book</span>"
    "      <span class=\"v num\" id=\"cx-pb-val\">" + _fs(pb_per0) + "</span>"
    "      " + _d_span(pb_per0, 'id="cx-pb-d"') + ""
    "      <span class=\"meta\" id=\"cx-pb-meta\">Subject " + _fx(pb_init) + " &middot; sector " + _fx(pb_sector) + " &middot; low-signal</span>"
    "    </div>"
    "  </div>"
    "</section>"
    ""
    "<div class=\"va-foot\">"
    "  <span>Multiples &middot; TTM metrics, balance sheet. Net-debt adjustment applies to EV-based methods only; P/B reads directly off book equity per share. Sector medians from peer group analysis.</span>"
    "  <a href=\"#\">Methodology &amp; sources &nearr;</a>"
    "</div>"
    ""
    "</div>"
    "<script>"
    "var D = " + data_json + ";"
    ""
    "function fB(n) { var b=n/1e9; return Math.abs(b)>=1000 ? '$'+(b/1000).toFixed(2)+'T' : '$'+b.toFixed(2)+'B'; }"
    "function fS(n) { return '$'+n.toFixed(2); }"
    "function fX(n) { return n.toFixed(1)+'×'; }"
    "function dPct(v) { return D.hasMarket ? (v-D.market)/D.market*100 : 0; }"
    "function dStr(d) {"
    "  var cls=d>=0?'pos':'neg', arr=d>=0?'▲':'▼', sign=d>=0?'+':'';"
    "  return '<span class=\"d num '+cls+'\">'+arr+' '+sign+d.toFixed(1)+'%</span>';"
    "}"
    "function dVsStr(d) {"
    "  var cls=d>=0?'pos':'neg', arr=d>=0?'▲':'▼', sign=d>=0?'+':'';"
    "  return '<span class=\"delta num '+cls+'\">'+arr+' '+sign+d.toFixed(1)+'% vs '+fS(D.market)+'</span>';"
    "}"
    "function setText(id,t) { var e=document.getElementById(id); if(e) e.textContent=t; }"
    "function setHtml(id,h) { var e=document.getElementById(id); if(e) e.innerHTML=h; }"
    ""
    "function update() {"
    "  var ebX=+document.getElementById('sl-eb').value;"
    "  var rvX=+document.getElementById('sl-rv').value;"
    "  var pbX=+document.getElementById('sl-pb').value;"
    ""
    "  if (D.ebOk) {"
    "    var ebEV=ebX*D.ebitda, ebEq=ebEV-D.netDebt, ebPer=ebEq/D.shares, ebD=dPct(ebPer);"
    "    var secEbPer=(D.ebSector*D.ebitda-D.netDebt)/D.shares;"
    "    var rrEb=ebPer!==0?(secEbPer-ebPer)/Math.abs(ebPer)*100:0;"
    "    setText('big-eb', fX(ebX));"
    "    setText('sum-eb-val', fS(ebPer)); setHtml('sum-eb-d', dStr(ebD));"
    "    setText('eb-ev-val', fB(ebEV)); setText('eb-eq-val', fB(ebEq));"
    "    setText('eb-per-val', fS(ebPer)); setHtml('eb-per-d', dVsStr(ebD));"
    "    setText('sens-eb-subj-lbl', 'At subject '+fX(ebX));"
    "    setText('sens-eb-subj-v', fS(ebPer)); setHtml('sens-eb-subj-d', dStr(ebD));"
    "    var rrCls=rrEb>=0?'pos':'neg', rrSign=rrEb>=0?'+':'';"
    "    setHtml('sens-eb-meta', 'Re-rating Δ <span class=\"num '+rrCls+'\">'+rrSign+rrEb.toFixed(1)+'%</span> per share if the subject converged to peers');"
    "    setText('cx-eb-val', fS(ebPer)); setHtml('cx-eb-d', dVsStr(ebD));"
    "    setText('cx-eb-meta', 'Subject '+fX(ebX)+' · sector '+fX(D.ebSector));"
    "  }"
    "  if (D.rvOk) {"
    "    var rvEV=rvX*D.revenue, rvEq=rvEV-D.netDebt, rvPer=rvEq/D.shares, rvD=dPct(rvPer);"
    "    var secRvPer=(D.rvSector*D.revenue-D.netDebt)/D.shares;"
    "    var rrRv=rvPer!==0?(secRvPer-rvPer)/Math.abs(rvPer)*100:0;"
    "    setText('big-rv', fX(rvX));"
    "    setText('sum-rv-val', fS(rvPer)); setHtml('sum-rv-d', dStr(rvD));"
    "    setText('rv-ev-val', fB(rvEV)); setText('rv-eq-val', fB(rvEq));"
    "    setText('rv-per-val', fS(rvPer)); setHtml('rv-per-d', dVsStr(rvD));"
    "    setText('sens-rv-subj-lbl', 'At subject '+fX(rvX));"
    "    setText('sens-rv-subj-v', fS(rvPer)); setHtml('sens-rv-subj-d', dStr(rvD));"
    "    var rrCls=rrRv>=0?'pos':'neg', rrSign=rrRv>=0?'+':'';"
    "    setHtml('sens-rv-meta', 'Re-rating Δ <span class=\"num '+rrCls+'\">'+rrSign+rrRv.toFixed(1)+'%</span> per share if the subject converged to peers');"
    "    setText('cx-rv-val', fS(rvPer)); setHtml('cx-rv-d', dVsStr(rvD));"
    "    setText('cx-rv-meta', 'Subject '+fX(rvX)+' · sector '+fX(D.rvSector));"
    "  }"
    "  if (D.pbOk) {"
    "    var pbPer=pbX*D.bookPs, pbD=dPct(pbPer);"
    "    var secPbPer=D.pbSector*D.bookPs;"
    "    var rrPb=pbPer!==0?(secPbPer-pbPer)/Math.abs(pbPer)*100:0;"
    "    setText('big-pb', fX(pbX));"
    "    setText('sum-pb-val', fS(pbPer)); setHtml('sum-pb-d', dStr(pbD));"
    "    setText('pb-per-val', fS(pbPer)); setHtml('pb-per-d', dVsStr(pbD));"
    "    setText('sens-pb-subj-lbl', 'At subject '+fX(pbX));"
    "    setText('sens-pb-subj-v', fS(pbPer)); setHtml('sens-pb-subj-d', dStr(pbD));"
    "    var rrCls=rrPb>=0?'pos':'neg', rrSign=rrPb>=0?'+':'';"
    "    setHtml('sens-pb-meta', 'Re-rating Δ <span class=\"num '+rrCls+'\">'+rrSign+rrPb.toFixed(1)+'%</span> per share if the subject converged to peers');"
    "    setText('cx-pb-val', fS(pbPer)); setHtml('cx-pb-d', dVsStr(pbD));"
    "    setText('cx-pb-meta', 'Subject '+fX(pbX)+' · sector '+fX(D.pbSector)+' · low-signal');"
    "  }"
    "}"
    ""
    "document.getElementById('sl-eb').addEventListener('input', update);"
    "document.getElementById('sl-rv').addEventListener('input', update);"
    "document.getElementById('sl-pb').addEventListener('input', update);"
    "</script>"
    "</body>"
    "</html>")
    return html


def _build_dcf_canvas_only_html(
    ctx: dict,
    result: dict,
    wacc_pct: float,
    tg_pct: float,
    yrs: int,
    g_pct: float,
    ev_ebitda_price,
    ev_rev_price,
    pb_price,
) -> str:
    """Build a standalone HTML document for the DCF canvas (no rail).

    Uses string concatenation throughout — never f-strings — because
    _DCF_CANVAS_CSS contains curly braces that would break interpolation.
    """
    iv = result["intrinsic_value_per_share"]
    market = float(ctx["current_price"] or 0)
    has_market = market > 0

    upside_pct = (iv - market) / market * 100 if has_market else 0.0
    is_pos = upside_pct >= 0
    gap = iv - market

    # Bridge values
    ev_b = _fmt_b(result["enterprise_value"])
    net_debt_b = _fmt_b(abs(result["net_debt"]))
    other_claims_val = ctx["preferred_equity"] + ctx["minority_interest"]
    other_claims_b = _fmt_b(other_claims_val)
    equity_b = _fmt_b(result["equity_value"])
    total_debt_b = _fmt_b(ctx["total_debt"])
    cash_b = _fmt_b(ctx["cash_and_equivalents"])
    other_b_val_str = _fmt_b(other_claims_val)
    shares_b = ctx["shares"] / 1e9
    source_date = ctx["bridge_items"].get("source_date", "")

    # Forecast sequences
    discounted = result["discounted_fcfs"][:yrs]
    projected = result["projected_fcfs"][:yrs]
    tv_pv = result["terminal_value_pv"]
    terminal_fcf = projected[-1] * (1 + tg_pct / 100) if projected else 0.0
    disc_factors = [1.0 / (1 + wacc_pct / 100) ** (i + 1) for i in range(len(discounted))]
    disc_tv_factor = 1.0 / (1 + wacc_pct / 100) ** yrs

    # Verdict strings
    pill_cls = "pos" if is_pos else "neg"
    pill_arrow = "▲" if is_pos else "▼"
    pill_sign = "+" if is_pos else "−"
    pill_text = pill_arrow + " " + pill_sign + str(round(abs(upside_pct), 1)) + "% " + ("upside" if is_pos else "downside")
    reading = "Constructive" if is_pos else "Cautious"
    gap_dir = "above" if gap >= 0 else "below"
    iv_str = "$" + "{:,.2f}".format(iv)
    market_str = "$" + "{:,.2f}".format(market) if has_market else "—"
    gap_str = "$" + "{:,.2f}".format(abs(gap))
    gap_color = "var(--positive)" if gap >= 0 else "var(--negative)"
    gap_sign = "+" if gap >= 0 else ""
    gap_display = gap_sign + "$" + "{:,.2f}".format(gap) if has_market else "—"
    gap_pct_str = "{:.1f}% vs market".format(upside_pct) if has_market else "—"
    verdict_gradient = (
        "linear-gradient(110deg,transparent 35%,rgba(79,140,94,.07) 100%)"
        if is_pos else
        "linear-gradient(110deg,transparent 35%,rgba(181,73,75,.07) 100%)"
    )
    horizon_sub = "per share · firm value method · " + str(yrs) + "-yr horizon"
    wacc_units = "USD · billions · discounted at WACC " + "{:.1f}".format(wacc_pct) + "%"

    # Cash-flow table cells (string concatenation)
    n = len(discounted)
    hdr_cells = ""
    fcf_cells = ""
    df_cells = ""
    pv_cells = ""
    for i in range(n):
        hdr_cells += "<th>Yr " + str(i + 1) + "</th>"
        fcf_cells += "<td>" + _fmt_b(projected[i]) + "</td>"
        df_cells += "<td>" + "{:.3f}".format(disc_factors[i]) + "</td>"
        pv_cells += "<td>" + _fmt_b(discounted[i]) + "</td>"
    hdr_cells += "<th>Terminal</th>"
    fcf_cells += '<td class="brass">' + _fmt_b(terminal_fcf) + "</td>"
    df_cells += "<td>" + "{:.3f}".format(disc_tv_factor) + "</td>"
    pv_cells += '<td class="brass">' + _fmt_b(tv_pv) + "</td>"

    # Plotly data (static — sliders now drive Streamlit reruns)
    bar_x = [("Year " + str(i + 1)) for i in range(len(discounted))] + ["Terminal"]
    bar_y = [v / 1e9 for v in discounted] + [tv_pv / 1e9]
    bar_colors = ["#243E5A"] * len(discounted) + ["#C2AA7A"]
    bar_line_colors = ["#1F3B5E"] * len(discounted) + ["#DCC79E"]
    bar_text = [_fmt_b(v) for v in discounted] + [_fmt_b(tv_pv)]

    plotly_data_json = json_for_script([{
        "type": "bar",
        "x": bar_x,
        "y": bar_y,
        "marker": {"color": bar_colors, "line": {"color": bar_line_colors, "width": 1}},
        "text": bar_text,
        "textposition": "outside",
        "textfont": {"family": "IBM Plex Mono", "size": 10, "color": "#C7C0AE"},
        "hovertemplate": "%{x}: %{text}<extra></extra>",
        "cliponaxis": False,
    }])
    plotly_layout_json = json_for_script({
        "paper_bgcolor": "#11151C",
        "plot_bgcolor": "#11151C",
        "margin": {"l": 48, "r": 8, "t": 28, "b": 36},
        "xaxis": {
            "gridcolor": "rgba(0,0,0,0)",
            "linecolor": "#232934",
            "tickfont": {"family": "IBM Plex Sans", "size": 11, "color": "#8E8676"},
            "fixedrange": True,
        },
        "yaxis": {
            "gridcolor": "#232934",
            "linecolor": "rgba(0,0,0,0)",
            "tickfont": {"family": "IBM Plex Mono", "size": 10, "color": "#8E8676"},
            "tickprefix": "$",
            "ticksuffix": "B",
            "fixedrange": True,
            "zeroline": False,
        },
        "bargap": 0.35,
        "showlegend": False,
        "uniformtext": {"mode": "hide", "minsize": 8},
    })

    # Cross-check cells (string concatenation)
    def _cx_cell_html(cls, lbl, val_str, delta_pct, meta):
        if delta_pct is not None and has_market:
            dcls = "pos" if delta_pct >= 0 else "neg"
            dsign = "+" if delta_pct >= 0 else ""
            dhtml = '<span class="delta ' + dcls + '">' + dsign + "{:.1f}".format(delta_pct) + "% vs market</span>"
        else:
            dhtml = '<span class="delta na">—</span>'
        return (
            '<div class="' + cls + '">'
            + '<span class="lbl">' + lbl + "</span>"
            + '<span class="v num">' + val_str + "</span>"
            + dhtml
            + '<span class="meta">' + meta + "</span>"
            + "</div>"
        )

    dcf_delta = upside_pct if has_market else None
    if dcf_delta is not None:
        dcf_dcls = "pos" if dcf_delta >= 0 else "neg"
        dcf_dsign = "+" if dcf_delta >= 0 else ""
        dcf_dhtml = '<span class="delta ' + dcf_dcls + '">' + dcf_dsign + "{:.1f}".format(dcf_delta) + "% vs market</span>"
    else:
        dcf_dhtml = '<span class="delta na">—</span>'
    cx_dcf = (
        '<div class="va-cx-cell dcf">'
        + '<span class="lbl">DCF · THIS MODEL</span>'
        + '<span class="v num">' + iv_str + "</span>"
        + dcf_dhtml
        + '<span class="meta">Firm-value DCF · ' + str(yrs) + '-yr explicit · WACC ' + "{:.1f}".format(wacc_pct) + "%</span>"
        + "</div>"
    )

    def _cx_mult_cell(label, implied, market_multiple, mult_label):
        if implied is not None and has_market:
            delta = (implied - market) / market * 100
            val = "$" + "{:,.2f}".format(implied)
            meta = ("Market multiple " + "{:.1f}".format(market_multiple) + "× · " + mult_label) if market_multiple else mult_label
        else:
            delta = None
            val = "—"
            meta = "Unavailable for this company"
        return _cx_cell_html("va-cx-cell", label, val, delta, meta)

    cx_ev = _cx_mult_cell(
        "EV / EBITDA", ev_ebitda_price,
        ctx.get("ev_ebitda_current") or 0, "based on current market multiple",
    )
    cx_rev = _cx_mult_cell(
        "EV / REVENUE", ev_rev_price,
        ctx.get("ev_revenue_current") or 0, "based on current market multiple",
    )
    cx_pb = _cx_mult_cell(
        "P / BOOK", pb_price,
        ctx.get("pb_current") or 0, "based on current market multiple",
    )

    # Bridge source date label
    bdate_str = "Balance-sheet bridge" + (" · " + escape_html(source_date) if source_date else "")

    # Assemble HTML document — string concatenation only
    doc = (
        "<!DOCTYPE html><html><head>"
        "<meta charset=\"UTF-8\">"
        "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">"
        "<link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>"
        "<link href=\"https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">"
        "<script src=\"https://cdn.plot.ly/plotly-2.35.2.min.js\" charset=\"utf-8\"></script>"
        "<style>" + _DCF_CANVAS_CSS + "</style>"
        "</head><body>"
        "<div class=\"va-canvas\">"

        # Verdict card
        "<section class=\"va-verdict\">"
        "<div id=\"verdict-grad\" style=\"position:absolute;inset:0;background:" + verdict_gradient + ";pointer-events:none;z-index:0\"></div>"
        "<div class=\"top\">"
        "<div class=\"col\">"
        "<span class=\"lbl\">DCF Intrinsic Value</span>"
        "<span class=\"big num\">" + iv_str + "</span>"
        "<span class=\"sub\">" + horizon_sub + "</span>"
        "</div>"
        "<span class=\"arrow\">vs</span>"
        "<div class=\"col\" style=\"align-items:flex-end\">"
        "<span class=\"lbl\">Market Price</span>"
        "<span class=\"big market num\">" + market_str + "</span>"
        "<span class=\"pill " + pill_cls + "\">" + pill_text + "</span>"
        "</div>"
        "</div>"
        "<div class=\"band\">"
        "<span>Reading · DCF implies <span class=\"mono\">" + gap_str + "</span> " + gap_dir + " the current market.</span>"
        "<span class=\"reading\">" + reading + "</span>"
        "</div>"
        "</section>"

        # Projection
        "<section class=\"va-projection\">"
        "<div class=\"head\">"
        "<h3>Enterprise value build — present value of FCFs + terminal</h3>"
        "<span class=\"units\">" + wacc_units + "</span>"
        "</div>"
        "<div id=\"dcf-chart\" style=\"width:100%;height:260px\"></div>"
        "<table class=\"va-cf-table\">"
        "<thead><tr><th></th>" + hdr_cells + "</tr></thead>"
        "<tbody>"
        "<tr><td>Forecast FCF</td>" + fcf_cells + "</tr>"
        "<tr><td>Discount factor</td>" + df_cells + "</tr>"
        "<tr class=\"total\"><td>Present value</td>" + pv_cells + "</tr>"
        "</tbody>"
        "</table>"
        "</section>"

        # Bridge
        "<section class=\"va-bridge\">"
        "<div class=\"bhead\">"
        "<h3>From enterprise to equity</h3>"
        "<span class=\"bdate\">" + bdate_str + "</span>"
        "</div>"
        "<div class=\"flow\">"
        "<div class=\"node start\"><span class=\"lbl\">Enterprise value</span><span class=\"v num\">" + ev_b + "</span></div>"
        "<div class=\"op\">−<span class=\"sub\">Net debt</span></div>"
        "<div class=\"node\"><span class=\"lbl\">Net debt</span><span class=\"v num\">" + net_debt_b + "</span></div>"
        "<div class=\"op\">−<span class=\"sub\">Other claims</span></div>"
        "<div class=\"node\"><span class=\"lbl\">Other claims</span><span class=\"v num\">" + other_claims_b + "</span></div>"
        "<div class=\"op\">=</div>"
        "<div class=\"node result\"><span class=\"lbl\">Equity value</span><span class=\"v num\">" + equity_b + "</span></div>"
        "</div>"
        "<div class=\"bfoot\">"
        "<span>Total debt " + total_debt_b + "</span>"
        "<span>·</span>"
        "<span>Cash &amp; equiv. " + cash_b + "</span>"
        "<span>·</span>"
        "<span>Preferred + minority " + other_b_val_str + "</span>"
        "</div>"
        "</section>"

        # Per-share recon
        "<section class=\"va-recon\">"
        "<div class=\"cell intrinsic\">"
        "<span class=\"lbl\">Intrinsic · Per Share</span>"
        "<span class=\"v num\">" + iv_str + "</span>"
        "<span class=\"sub\">Equity value ÷ shares</span>"
        "</div>"
        "<div class=\"cell\">"
        "<span class=\"lbl\">Market · Last</span>"
        "<span class=\"v num\">" + market_str + "</span>"
        "<span class=\"sub\">&nbsp;</span>"
        "</div>"
        "<div class=\"cell\">"
        "<span class=\"lbl\">Gap</span>"
        "<span class=\"v num\" style=\"color:" + gap_color + "\">" + gap_display + "</span>"
        "<span class=\"sub\">" + gap_pct_str + "</span>"
        "</div>"
        "<div class=\"cell\">"
        "<span class=\"lbl\">Shares Outstanding</span>"
        "<span class=\"v num\">" + "{:.2f}".format(shares_b) + " B</span>"
        "<span class=\"sub\">diluted</span>"
        "</div>"
        "</section>"

        # Cross-check
        "<section class=\"va-cx\">"
        "<div class=\"va-cx-head\">"
        "<h3>Cross-check against the multiples</h3>"
        "<span class=\"hint\">Same business, different lenses · implied per-share</span>"
        "</div>"
        "<div class=\"va-cx-grid\">"
        + cx_dcf + cx_ev + cx_rev + cx_pb +
        "</div>"
        "</section>"

        # Footer
        "<div class=\"va-foot\">"
        "<span>Firm-value DCF · enterprise value bridged to equity using debt &amp; cash from the most recent balance sheet. Negative-FCF years are excluded from the base; terminal value uses Gordon Growth Model.</span>"
        "<a href=\"#\">Methodology &amp; sources ↗</a>"
        "</div>"

        "</div>"  # va-canvas
        "<script>"
        "var data = " + plotly_data_json + ";"
        "var layout = " + plotly_layout_json + ";"
        "Plotly.newPlot('dcf-chart', data, layout, {displayModeBar:false,responsive:true});"
        "</script>"
        "</body></html>"
    )
    return doc


def _render_dcf_model(ctx: dict):
    hist_growth_raw = ctx["hist_growth_raw"]
    hist_growth_raw_pct = hist_growth_raw * 100 if hist_growth_raw is not None else -5.0
    slider_default = float(max(-15.0, min(20.0, hist_growth_raw_pct)))

    st.markdown(_DCF_RAIL_CSS, unsafe_allow_html=True)

    col_rail, col_canvas = st.columns([1, 2.5])

    with col_rail:
        st.markdown(
            '<span class="dcf-eyebrow">Assumptions</span>'
            '<div class="dcf-title">3-stage DCF</div>'
            '<div class="dcf-sub">Firm-value DCF — projects free cash flow, discounts to today, bridges to equity per share.</div>',
            unsafe_allow_html=True,
        )
        st.markdown('<hr class="dcf-divider">', unsafe_allow_html=True)

        wacc_pct = st.slider(
            "WACC (%)",
            min_value=4.0, max_value=15.0, step=0.25,
            value=float(st.session_state.get(f"dcf_wacc_{ctx['ticker']}", 10.0)),
            key=f"dcf_wacc_{ctx['ticker']}",
            help="Weighted Average Cost of Capital — conservative 4%, aggressive 15%",
        )
        tg_pct = st.slider(
            "Terminal growth (%)",
            min_value=0.0, max_value=5.0, step=0.1,
            value=float(st.session_state.get(f"dcf_tg_{ctx['ticker']}", 2.5)),
            key=f"dcf_tg_{ctx['ticker']}",
            help="Long-run growth rate for terminal value — guided by inflation",
        )
        yrs = st.slider(
            "Forecast horizon (yr)",
            min_value=3, max_value=10, step=1,
            value=int(st.session_state.get(f"dcf_yrs_{ctx['ticker']}", 5)),
            key=f"dcf_yrs_{ctx['ticker']}",
            help="Number of explicit projection years before terminal value",
        )
        g_pct = round(st.slider(
            "FCF growth (%)",
            min_value=-15.0, max_value=20.0, step=0.1,
            value=round(float(st.session_state.get(f"dcf_g_{ctx['ticker']}", round(slider_default, 1))), 1),
            key=f"dcf_g_{ctx['ticker']}",
            help="Annual FCF growth rate applied to base FCF — median historical shown as default",
        ), 1)

        st.markdown('<hr class="dcf-divider">', unsafe_allow_html=True)

        # From the filings block (static; populated after DCF run below)
        net_debt_raw = ctx["total_debt"] - ctx["cash_and_equivalents"]
        base_fcf_raw = ctx.get("base_fcf")
        base_fcf_str = _fmt_b(base_fcf_raw) if base_fcf_raw else "—"
        hist_growth_str = ("{:+.1f}%".format(hist_growth_raw_pct)) if hist_growth_raw is not None else "—"
        net_debt_str = _fmt_b(net_debt_raw)
        shares_str = "{:.2f} B".format(ctx["shares"] / 1e9)
        source_date = ctx["bridge_items"].get("source_date", "")
        nd_label = "Net debt" + (" · " + escape_html(source_date) if source_date else "")

        st.markdown(
            '<div class="dcf-filings-eyebrow">From the filings</div>'
            '<div class="dcf-filing-row"><span>Base FCF (TTM)</span><span class="dcf-filing-val">' + base_fcf_str + '</span></div>'
            '<div class="dcf-filing-row"><span>FCF · historical</span><span class="dcf-filing-val">' + hist_growth_str + '</span></div>'
            '<div class="dcf-filing-row"><span>' + nd_label + '</span><span class="dcf-filing-val">' + net_debt_str + '</span></div>'
            '<div class="dcf-filing-row"><span>Shares outstanding</span><span class="dcf-filing-val">' + shares_str + '</span></div>',
            unsafe_allow_html=True,
        )

        if st.button("Recompute", key=f"dcf_recompute_{ctx['ticker']}", type="secondary"):
            get_free_cash_flow_ttm.clear()
            get_balance_sheet_bridge_items.clear()
            st.rerun()

    with col_canvas:
        result = run_dcf(
            fcf_series=ctx["fcf_series"],
            shares_outstanding=ctx["shares"],
            wacc=wacc_pct / 100,
            terminal_growth=tg_pct / 100,
            projection_years=yrs,
            growth_rate_override=g_pct / 100,
            total_debt=ctx["total_debt"],
            cash_and_equivalents=ctx["cash_and_equivalents"],
            preferred_equity=ctx["preferred_equity"],
            minority_interest=ctx["minority_interest"],
            base_fcf_override=ctx["base_fcf"],
        )

        if not result:
            st.warning("Insufficient data to run DCF model.")
            return
        if result.get("error"):
            st.warning(result["error"])
            return

        st.session_state[f"dcf_intrinsic_{ctx['ticker']}"] = result["intrinsic_value_per_share"]
        st.session_state[f"dcf_params_{ctx['ticker']}"] = {"wacc": wacc_pct, "tg": tg_pct, "yrs": yrs}

        # Cross-check: implied price from current market multiples
        ev_ebitda_price = None
        if ctx["ev_available"] and ctx.get("ev_ebitda_current"):
            ev_r = run_ev_ebitda(
                ebitda=float(ctx["ebitda"]),
                total_debt=ctx["total_debt"],
                total_cash=ctx["cash_and_equivalents"],
                preferred_equity=ctx["preferred_equity"],
                minority_interest=ctx["minority_interest"],
                shares_outstanding=float(ctx["shares"]),
                target_multiple=float(ctx["ev_ebitda_current"]),
            )
            ev_ebitda_price = ev_r.get("implied_price_per_share")

        ev_rev_price = None
        if ctx["ev_revenue_available"] and ctx.get("ev_revenue_current") and ctx.get("revenue_ttm"):
            rev_r = run_ev_revenue(
                revenue=float(ctx["revenue_ttm"]),
                total_debt=ctx["total_debt"],
                total_cash=ctx["cash_and_equivalents"],
                preferred_equity=ctx["preferred_equity"],
                minority_interest=ctx["minority_interest"],
                shares_outstanding=float(ctx["shares"]),
                target_multiple=float(ctx["ev_revenue_current"]),
            )
            ev_rev_price = rev_r.get("implied_price_per_share")

        pb_price = None
        if ctx["pb_available"] and ctx.get("pb_current") and ctx.get("book_value_per_share"):
            pb_r = run_price_to_book(
                book_value_per_share=float(ctx["book_value_per_share"]),
                target_multiple=float(ctx["pb_current"]),
            )
            pb_price = pb_r.get("implied_price_per_share")

        canvas_html = _build_dcf_canvas_only_html(
            ctx, result, wacc_pct, tg_pct, yrs, g_pct,
            ev_ebitda_price, ev_rev_price, pb_price,
        )
        components.html(canvas_html, height=1500, scrolling=False)


def _render_all_multiples(ctx: dict):
    """Render all three multiples methods side-by-side in a single HTML canvas.

    Three lenses (EV/EBITDA, EV/Revenue, P/Book) are shown in a math-flow
    comparison grid. All computation and slider interactivity happens client-side
    in JS. No Streamlit sliders or rail column — one full-width components.html()
    call only.
    """
    doc = _build_multiples_canvas_html(ctx)
    components.html(doc, height=1900, scrolling=False)


def _render_multiples_model(ctx: dict):
    _render_all_multiples(ctx)


def _render_ev_ebitda_model(ctx: dict):
    st.markdown("**EV/EBITDA Valuation**")
    st.caption(
        "This is the better fallback when EBITDA is positive but free cash flow is weak, volatile, or currently negative."
    )

    default_multiple = float(ctx["ev_ebitda_current"]) if ctx["ev_ebitda_current"] else 15.0
    default_multiple = max(1.0, min(50.0, round(default_multiple, 1)))

    help_text = (
        f"Current market multiple: {ctx['ev_ebitda_current']:.1f}x"
        if ctx["ev_ebitda_current"] else "Current multiple unavailable"
    )
    target_multiple = st.slider(
        "Target EV/EBITDA",
        min_value=1.0,
        max_value=50.0,
        value=default_multiple,
        step=0.5,
        help=help_text,
        key=f"ev_ebitda_multiple_{ctx['ticker']}",
    )

    ev_result = run_ev_ebitda(
        ebitda=float(ctx["ebitda"]),
        total_debt=ctx["total_debt"],
        total_cash=ctx["cash_and_equivalents"],
        preferred_equity=ctx["preferred_equity"],
        minority_interest=ctx["minority_interest"],
        shares_outstanding=float(ctx["shares"]),
        target_multiple=target_multiple,
    )

    if not ev_result:
        st.warning("Could not compute EV/EBITDA valuation.")
        return

    imp_price = ev_result["implied_price_per_share"]
    current_price = ctx["current_price"]
    market_cap = ctx["market_cap"]
    market_enterprise_value = None
    if market_cap and market_cap > 0:
        market_enterprise_value = (
            float(market_cap)
            + float(ctx["total_debt"])
            - float(ctx["cash_and_equivalents"])
            + float(ctx["preferred_equity"])
            + float(ctx["minority_interest"])
        )

    st.caption(
        "This model applies a target EV/EBITDA multiple to current EBITDA, then bridges from enterprise value to equity value per share."
    )

    calc_a, calc_b, calc_c, calc_d = st.columns(4)
    calc_a.metric("EBITDA Used", fmt_large(ctx["ebitda"]))
    calc_b.metric("Target Multiple", f"{target_multiple:.1f}x")
    calc_c.metric("Implied Enterprise Value", fmt_large(ev_result["implied_ev"]))
    calc_d.metric("Implied Equity Value", fmt_large(ev_result["equity_value"]))

    st.caption(
        f"EBITDA: {fmt_large(ctx['ebitda'])}  ·  "
        f"{_net_debt_label(ev_result['net_debt'])}: {fmt_large(abs(ev_result['net_debt']))}  ·  "
        f"Other claims: {fmt_large(ev_result['other_claims'])}  ·  "
        f"Equity Value: {fmt_large(ev_result['equity_value'])}"
    )
    source_date = ctx["bridge_items"].get("source_date")
    if source_date:
        st.caption(f"EV/EBITDA bridge source date: **{source_date}**")

    if market_cap and market_cap > 0:
        st.markdown("**Market Comparison**")
        compare_a, compare_b = st.columns(2)
        if market_enterprise_value and market_enterprise_value > 0:
            ev_delta = (ev_result["implied_ev"] - market_enterprise_value) / market_enterprise_value
            compare_a.metric(
                "Market Enterprise Value",
                fmt_large(market_enterprise_value),
                delta=f"{ev_delta * 100:+.1f}%",
            )
        equity_delta = (ev_result["equity_value"] - market_cap) / market_cap
        compare_b.metric("Market Cap", fmt_large(market_cap), delta=f"{equity_delta * 100:+.1f}%")

    summary_rows = [
        {
            "Step": "1. Start with EBITDA",
            "Value": fmt_large(ctx["ebitda"]),
            "What it means": "Current EBITDA used as the operating earnings base.",
        },
        {
            "Step": "2. Apply target multiple",
            "Value": f"{target_multiple:.1f}x",
            "What it means": "Chosen EV/EBITDA multiple applied to EBITDA.",
        },
        {
            "Step": "3. Arrive at enterprise value",
            "Value": fmt_large(ev_result["implied_ev"]),
            "What it means": "Implied value of the operating business before capital structure.",
        },
        {
            "Step": "4. Bridge to equity value",
            "Value": fmt_large(ev_result["equity_value"]),
            "What it means": "Enterprise value less net debt and other claims.",
        },
        {
            "Step": "5. Convert to value per share",
            "Value": fmt_currency(imp_price),
            "What it means": "Equity value divided by shares outstanding.",
        },
    ]
    st.dataframe(pd.DataFrame(summary_rows), width="stretch", hide_index=True)

    st.markdown("**EV/EBITDA Conclusion**")
    ev_m1, ev_m2, ev_m3, ev_m4 = st.columns(4)
    ev_m1.metric("Implied Price / Share", fmt_currency(imp_price))
    if current_price:
        ev_upside = (imp_price - current_price) / current_price
        ev_m2.metric("Current Price", fmt_currency(current_price))
        ev_m3.metric(
            "Upside / Downside",
            f"{ev_upside * 100:+.1f}%",
            delta=f"{ev_upside * 100:+.1f}%",
        )
    ev_m4.metric("Implied EV", fmt_large(ev_result["implied_ev"]))

    if current_price and current_price > 0:
        valuation_gap = imp_price - current_price
        market_message = "above" if valuation_gap > 0 else "below"
        if abs(valuation_gap) < 0.005:
            market_message = "roughly in line with"
        implied_value = _escape_markdown_currency(fmt_currency(imp_price))
        gap_value = _escape_markdown_currency(fmt_currency(abs(valuation_gap)))
        current_value = _escape_markdown_currency(fmt_currency(current_price))
        st.markdown(
            f"At **{target_multiple:.1f}x EBITDA**, the model implies **{implied_value} per share**, "
            f"which is **{gap_value} {market_message}** the current market price of "
            f"**{current_value}**."
        )


def _render_ev_revenue_model(ctx: dict):
    st.markdown("**EV/Revenue Valuation**")
    st.caption(
        "This is the better fallback for scaled companies that have revenue but little or no EBITDA or free cash flow."
    )

    default_multiple = float(ctx["ev_revenue_current"]) if ctx["ev_revenue_current"] else 4.0
    default_multiple = max(0.5, min(30.0, round(default_multiple, 1)))

    help_text = (
        f"Current market multiple: {ctx['ev_revenue_current']:.2f}x"
        if ctx["ev_revenue_current"] else "Current multiple unavailable"
    )
    target_multiple = st.slider(
        "Target EV/Revenue",
        min_value=0.5,
        max_value=30.0,
        value=default_multiple,
        step=0.1,
        help=help_text,
        key=f"ev_revenue_multiple_{ctx['ticker']}",
    )

    ev_revenue_result = run_ev_revenue(
        revenue=float(ctx["revenue_ttm"]),
        total_debt=ctx["total_debt"],
        total_cash=ctx["cash_and_equivalents"],
        preferred_equity=ctx["preferred_equity"],
        minority_interest=ctx["minority_interest"],
        shares_outstanding=float(ctx["shares"]),
        target_multiple=target_multiple,
    )

    if not ev_revenue_result:
        st.warning("Could not compute EV/Revenue valuation.")
        return

    implied_price = ev_revenue_result["implied_price_per_share"]
    current_price = ctx["current_price"]
    market_cap = ctx["market_cap"]
    market_enterprise_value = None
    if market_cap and market_cap > 0:
        market_enterprise_value = (
            float(market_cap)
            + float(ctx["total_debt"])
            - float(ctx["cash_and_equivalents"])
            + float(ctx["preferred_equity"])
            + float(ctx["minority_interest"])
        )

    st.caption(
        "This model applies a target EV/Revenue multiple to TTM revenue, then bridges from enterprise value to equity value per share."
    )

    calc_a, calc_b, calc_c, calc_d = st.columns(4)
    calc_a.metric("Revenue Used", fmt_large(ctx["revenue_ttm"]))
    calc_b.metric("Target Multiple", f"{target_multiple:.1f}x")
    calc_c.metric("Implied Enterprise Value", fmt_large(ev_revenue_result["implied_ev"]))
    calc_d.metric("Implied Equity Value", fmt_large(ev_revenue_result["equity_value"]))

    st.caption(
        f"Revenue: {fmt_large(ctx['revenue_ttm'])}  ·  "
        f"{_net_debt_label(ev_revenue_result['net_debt'])}: {fmt_large(abs(ev_revenue_result['net_debt']))}  ·  "
        f"Other claims: {fmt_large(ev_revenue_result['other_claims'])}  ·  "
        f"Equity Value: {fmt_large(ev_revenue_result['equity_value'])}"
    )
    source_date = ctx["bridge_items"].get("source_date")
    if source_date:
        st.caption(f"EV/Revenue bridge source date: **{source_date}**")

    if market_cap and market_cap > 0:
        st.markdown("**Market Comparison**")
        compare_a, compare_b = st.columns(2)
        if market_enterprise_value and market_enterprise_value > 0:
            ev_delta = (ev_revenue_result["implied_ev"] - market_enterprise_value) / market_enterprise_value
            compare_a.metric(
                "Market Enterprise Value",
                fmt_large(market_enterprise_value),
                delta=f"{ev_delta * 100:+.1f}%",
            )
        equity_delta = (ev_revenue_result["equity_value"] - market_cap) / market_cap
        compare_b.metric("Market Cap", fmt_large(market_cap), delta=f"{equity_delta * 100:+.1f}%")

    summary_rows = [
        {
            "Step": "1. Start with TTM revenue",
            "Value": fmt_large(ctx["revenue_ttm"]),
            "What it means": "Trailing twelve-month revenue used as the operating base.",
        },
        {
            "Step": "2. Apply target multiple",
            "Value": f"{target_multiple:.1f}x",
            "What it means": "Chosen EV/Revenue multiple applied to TTM revenue.",
        },
        {
            "Step": "3. Arrive at enterprise value",
            "Value": fmt_large(ev_revenue_result["implied_ev"]),
            "What it means": "Implied value of the operating business before capital structure.",
        },
        {
            "Step": "4. Bridge to equity value",
            "Value": fmt_large(ev_revenue_result["equity_value"]),
            "What it means": "Enterprise value less net debt and other claims.",
        },
        {
            "Step": "5. Convert to value per share",
            "Value": fmt_currency(implied_price),
            "What it means": "Equity value divided by shares outstanding.",
        },
    ]
    st.dataframe(pd.DataFrame(summary_rows), width="stretch", hide_index=True)

    st.markdown("**EV/Revenue Conclusion**")
    evr_m1, evr_m2, evr_m3, evr_m4 = st.columns(4)
    evr_m1.metric("Implied Price / Share", fmt_currency(implied_price))
    if current_price:
        evr_upside = (implied_price - current_price) / current_price
        evr_m2.metric("Current Price", fmt_currency(current_price))
        evr_m3.metric(
            "Upside / Downside",
            f"{evr_upside * 100:+.1f}%",
            delta=f"{evr_upside * 100:+.1f}%",
        )
    evr_m4.metric("Implied EV", fmt_large(ev_revenue_result["implied_ev"]))

    if current_price and current_price > 0:
        valuation_gap = implied_price - current_price
        market_message = "above" if valuation_gap > 0 else "below"
        if abs(valuation_gap) < 0.005:
            market_message = "roughly in line with"
        implied_value = _escape_markdown_currency(fmt_currency(implied_price))
        gap_value = _escape_markdown_currency(fmt_currency(abs(valuation_gap)))
        current_value = _escape_markdown_currency(fmt_currency(current_price))
        st.markdown(
            f"At **{target_multiple:.1f}x revenue**, the model implies **{implied_value} per share**, "
            f"which is **{gap_value} {market_message}** the current market price of "
            f"**{current_value}**."
        )


def _render_price_to_book_model(ctx: dict):
    st.markdown("**Price / Book Valuation**")
    if ctx["is_financial"]:
        st.caption(
            "P/B is often a better anchor for financial companies than cash-flow models because book value is closer to the operating asset base."
        )
    else:
        st.caption(
            "P/B is a useful fallback when book value is meaningful and cash-flow-based models are not reliable."
        )

    default_multiple = float(ctx["pb_current"]) if ctx["pb_current"] else (1.2 if ctx["is_financial"] else 2.0)
    default_multiple = max(0.2, min(10.0, round(default_multiple, 1)))
    help_text = (
        f"Current market multiple: {ctx['pb_current']:.2f}x"
        if ctx["pb_current"] else "Current multiple unavailable"
    )
    target_multiple = st.slider(
        "Target P/B",
        min_value=0.2,
        max_value=10.0,
        value=default_multiple,
        step=0.1,
        help=help_text,
        key=f"pb_multiple_{ctx['ticker']}",
    )

    pb_result = run_price_to_book(
        book_value_per_share=float(ctx["book_value_per_share"]),
        target_multiple=target_multiple,
    )
    if not pb_result:
        st.warning("Could not compute P/B valuation.")
        return

    implied_price = pb_result["implied_price_per_share"]
    current_price = ctx["current_price"]
    pb_m1, pb_m2, pb_m3, pb_m4 = st.columns(4)
    pb_m1.metric("Implied Price / Share", fmt_currency(implied_price))
    pb_m2.metric("Book Value / Share", fmt_currency(ctx["book_value_per_share"]))
    if current_price:
        pb_upside = (implied_price - current_price) / current_price
        pb_m3.metric("Current Price", fmt_currency(current_price))
        pb_m4.metric(
            "Upside / Downside",
            f"{pb_upside * 100:+.1f}%",
            delta=f"{pb_upside * 100:+.1f}%",
        )
    else:
        pb_m3.metric("Target P/B", fmt_ratio(target_multiple))
        pb_m4.metric("Current P/B", fmt_ratio(ctx["pb_current"]) if ctx["pb_current"] else "—")

    st.caption(
        f"Book value/share: {fmt_currency(ctx['book_value_per_share'])}  ·  "
        f"Target P/B: {fmt_ratio(target_multiple)}"
    )
    if current_price and ctx["pb_current"]:
        st.caption(f"Current market P/B: **{ctx['pb_current']:.2f}x**")


def _render_models(ticker: str):
    ctx = _build_model_context(ticker)
    st.caption(ctx["summary"])
    _render_model_availability(ctx)

    view_key = f"models_view_{ticker}"
    if view_key not in st.session_state:
        st.session_state[view_key] = "dcf"

    st.markdown(_DCF_RAIL_CSS, unsafe_allow_html=True)

    _pc1, _pc2 = st.columns(2)
    with _pc1:
        if st.button(
            "Discounted Cash Flow",
            key=f"pick_dcf_{ticker}",
            type="primary" if st.session_state[view_key] == "dcf" else "secondary",
            width="stretch",
        ):
            st.session_state[view_key] = "dcf"
            st.rerun()
    with _pc2:
        if st.button(
            "Multiples",
            key=f"pick_mult_{ticker}",
            type="primary" if st.session_state[view_key] == "multiples" else "secondary",
            width="stretch",
        ):
            st.session_state[view_key] = "multiples"
            st.rerun()

    st.markdown("---")

    view = st.session_state.get(view_key, "dcf")
    if view == "dcf":
        if ctx["dcf_available"]:
            _render_dcf_model(ctx)
        else:
            st.warning(f"DCF model not available: {ctx['dcf_reason']}")
            if st.expander("Show available alternatives", expanded=True):
                _render_multiples_model(ctx)
    else:
        _render_multiples_model(ctx)

    unavailable = []
    if not ctx["dcf_available"]:
        unavailable.append(f"- **DCF:** {ctx['dcf_reason']}")
    if not ctx["ev_available"]:
        unavailable.append(f"- **EV/EBITDA:** {ctx['ev_reason']}")
    if not ctx["ev_revenue_available"]:
        unavailable.append(f"- **EV/Revenue:** {ctx['ev_revenue_reason']}")
    if not ctx["pb_available"]:
        unavailable.append(f"- **P/B:** {ctx['pb_reason']}")
    if unavailable:
        with st.expander("Why some models are unavailable", expanded=False):
            st.markdown("\n".join(unavailable))


# ── Comps Table ──────────────────────────────────────────────────────────────

_CC_CSS = """<style>
.cmp-body{padding:var(--sp-5) var(--sp-6) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5);flex:1}
.cmp-lede{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-5);align-items:stretch;background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);padding:var(--sp-5)}
.cmp-lede .left{display:flex;flex-direction:column;gap:8px}
.cmp-lede .ttl{font-family:var(--font-display);font-size:var(--fs-30);font-weight:500;letter-spacing:-0.01em;line-height:1.1;color:var(--fg-1);margin:4px 0 0;max-width:38ch}
.cmp-lede .sub{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-2);line-height:1.55;max-width:62ch}
.cmp-lede .right{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);align-content:end}
.cmp-source{display:flex;flex-direction:column;gap:2px;padding:var(--sp-3) var(--sp-4);background:var(--ink-2);border:1px solid var(--line-1);border-radius:var(--r-2)}
.cmp-source .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600}
.cmp-source .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-14);color:var(--fg-1);font-weight:500}
.cmp-source .cap{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
.cmp-hero{display:grid;grid-template-columns:repeat(4,1fr);background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.cmp-rank{padding:var(--sp-4) var(--sp-5);border-right:1px solid var(--line-1);display:flex;flex-direction:column;gap:var(--sp-3)}
.cmp-rank:last-child{border-right:none}
.cmp-rank-head{display:flex;justify-content:space-between;align-items:baseline}
.cmp-rank-head .lbl{font-family:var(--font-sans);font-size:var(--fs-12);text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600;white-space:nowrap}
.cmp-rank-head .pct{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-18);font-weight:500}
.cmp-rank-head .pct.pos{color:var(--positive)}.cmp-rank-head .pct.neg{color:var(--negative)}
.cmp-rank-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.cmp-rank-row .col{display:flex;flex-direction:column;gap:2px}
.cmp-rank-row .col .sub{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3)}
.cmp-rank-row .col .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-24);color:var(--brass-bright);font-weight:500;line-height:1}
.cmp-rank-row .col .v.dim{color:var(--fg-2)}
.cmp-rank-track{position:relative;height:24px;margin-top:6px}
.cmp-rank-track .t{position:absolute;inset:8px 0;background:var(--ink-3);border-radius:999px}
.cmp-rank-track .band{position:absolute;top:8px;bottom:8px;background:rgba(74,120,181,0.28);border-top:1px solid rgba(74,120,181,0.35);border-bottom:1px solid rgba(74,120,181,0.35)}
.cmp-rank-track .median{position:absolute;top:5px;bottom:5px;width:1.5px;background:var(--oxford-light);transform:translateX(-0.75px)}
.cmp-rank-track .peer-dot{position:absolute;top:50%;width:6px;height:6px;border-radius:50%;background:var(--fg-3);transform:translate(-3px,-50%);opacity:0.7}
.cmp-rank-track .subject{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:var(--brass);border:2px solid var(--ink-1);transform:translate(-7px,-50%);box-shadow:0 0 0 1px var(--brass-deep),0 0 0 4px rgba(194,170,122,0.18);z-index:2}
.cmp-rank-track .axis{position:absolute;top:100%;left:0;right:0;display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:10px;color:var(--fg-4);margin-top:4px}
.cmp-rank .readout{font-family:var(--font-display);font-style:italic;font-size:var(--fs-14);color:var(--fg-2);margin-top:18px;padding-top:6px;border-top:1px solid var(--line-1)}
.cmp-table-wrap{background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.cmp-table-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-1);display:flex;justify-content:space-between;align-items:baseline}
.cmp-table-head>div{display:flex;align-items:baseline;gap:var(--sp-2)}
.cmp-table-head .eyebrow{font-family:var(--font-display);font-style:italic;font-size:var(--fs-20);color:var(--brass);text-transform:none;letter-spacing:0;font-weight:400}
.cmp-table-head h3{font-family:var(--font-display);font-size:var(--fs-20);font-weight:500;margin:0;color:var(--fg-1)}
.cmp-table-head .hint{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-3)}
.cmp-table{display:flex;flex-direction:column}
.cmp-header,.cmp-row{display:grid;align-items:center;gap:var(--sp-3);padding:0 var(--sp-5)}
.cmp-header{background:var(--ink-2);border-bottom:1px solid var(--line-2);padding-top:10px;padding-bottom:10px;position:sticky;top:0;z-index:2}
.cmp-header .th{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600;cursor:pointer;user-select:none}
.cmp-header .th:hover{color:var(--fg-1)}.cmp-header .th .arr{color:var(--brass)}.cmp-header .th.r{text-align:right}.cmp-header .th.sym,.cmp-header .th.name{cursor:default}
.cmp-row{padding-top:10px;padding-bottom:10px;border-bottom:1px solid var(--line-1);transition:background .08s ease}
.cmp-row:last-child{border-bottom:none}.cmp-row:hover{background:rgba(194,170,122,0.03)}
.cmp-row .sym{font-family:var(--font-mono);font-size:var(--fs-13);color:var(--fg-1);font-weight:500;display:flex;align-items:center;gap:6px}
.cmp-row .name{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-2)}
.cmp-row .name .muted{color:var(--fg-3);font-size:11px;margin-left:4px}
.cmp-row .mc{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-13);color:var(--fg-1);text-align:right}
.cmp-row .mc.dim{color:var(--fg-3)}
.cmp-row.subject{background:rgba(194,170,122,0.06);border-bottom:1px solid rgba(194,170,122,0.2)}
.cmp-row.subject .sym{color:var(--brass-bright);font-weight:600}
.cmp-row.subject .sym .pin{font-family:var(--font-sans);font-size:9px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--brass);background:rgba(194,170,122,0.10);border:1px solid rgba(194,170,122,0.30);padding:1px 5px;border-radius:var(--r-1);font-weight:600}
.cmp-row.subject .name{color:var(--fg-1)}
.cmp-row.median{background:var(--ink-2);border-bottom:1px solid var(--line-2)}
.cmp-row.median .sym{color:var(--fg-4)}.cmp-row.median .name{color:var(--fg-3);font-style:italic}
.cmp-cell{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.cmp-cell .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-13);color:var(--fg-1)}
.cmp-cell .v.dim{color:var(--fg-3)}.cmp-cell.hl .v{color:var(--brass-bright);font-weight:600}
.cmp-track{position:relative;height:4px;width:100%;background:var(--ink-3);border-radius:999px}
.cmp-track .median{position:absolute;top:-1px;bottom:-1px;left:50%;width:1px;background:var(--fg-4)}
.cmp-track .dot{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;transform:translate(-3.5px,-50%);border:1.5px solid var(--ink-1)}
.cmp-track .dot.pos{background:var(--positive)}.cmp-track .dot.neg{background:var(--negative)}
.cmp-track .dot.subject{background:var(--brass);width:9px;height:9px;transform:translate(-4.5px,-50%);box-shadow:0 0 0 1px var(--brass-deep)}
.cmp-cell.median-cell{align-items:flex-end;justify-content:center;gap:0}
</style>"""


def _render_comps(ticker: str):

    info = get_company_info(ticker)
    auto_peers = get_peers(ticker)
    if not auto_peers:
        auto_peers = _suggest_peer_tickers(ticker, info or {})
    peer_syms = [p.upper() for p in auto_peers[:10]]
    all_syms = [ticker.upper()] + peer_syms

    with st.spinner("Loading comps…"):
        ratios_list = get_ratios_for_tickers(all_syms)

    if not ratios_list:
        st.info("No ratio data available for the peer set.")
        return

    ratios_map = {r["symbol"].upper(): r for r in ratios_list}

    COLS = [
        {"key": "pe",      "lbl": "P/E · TTM", "short": "P/E",       "kind": "x", "invert": True},
        {"key": "evEbt",   "lbl": "EV/EBITDA",       "short": "EV/EBITDA", "kind": "x", "invert": True},
        {"key": "evSales", "lbl": "EV/Sales",         "short": "EV/Sales",  "kind": "x", "invert": True},
        {"key": "pb",      "lbl": "P/Book",           "short": "P/B",       "kind": "x", "invert": True},
        {"key": "fcfy",    "lbl": "FCF yield",        "short": "FCF Y",     "kind": "%", "invert": False},
        {"key": "revG",    "lbl": "Rev YoY",          "short": "Rev YoY",   "kind": "%", "invert": False},
        {"key": "opM",     "lbl": "Op margin",        "short": "Op Mgn",    "kind": "%", "invert": False},
    ]

    FIELD_MAP = {
        "pe":      ("peRatioTTM",                1.0),
        "evEbt":   ("enterpriseValueMultipleTTM", 1.0),
        "evSales": ("evToSalesTTM",              1.0),
        "pb":      ("priceToBookRatioTTM",       1.0),
        "fcfy":    None,  # computed below from FCF TTM / market cap
        "revG":    ("revenueGrowthTTM",          100.0),
        "opM":     ("operatingProfitMarginTTM",  100.0),
    }

    _XMAP = {"NYQ": "NYSE", "NMS": "NASDAQ", "NGM": "NASDAQ", "NCM": "NASDAQ", "ASE": "AMEX"}

    peers = []
    for sym_i in all_syms:
        r = ratios_map.get(sym_i, {})
        ci = get_company_info(sym_i) or {}
        mcap_raw = ci.get("marketCap") or 0
        mcap_b = round(mcap_raw / 1e9, 2) if mcap_raw else None
        row = {
            "sym": _h(sym_i),
            "name": _h((ci.get("longName") or ci.get("shortName") or sym_i)[:40]),
            "mcap": mcap_b,
            "subject": sym_i == ticker.upper(),
        }
        # FCF yield computed from TTM free cash flow / market cap
        fcf_ttm_peer = get_free_cash_flow_ttm(sym_i)
        if fcf_ttm_peer is not None and mcap_raw and mcap_raw > 0:
            fcfy_v = fcf_ttm_peer / mcap_raw * 100.0
            row["fcfy"] = round(fcfy_v, 2) if abs(fcfy_v) <= 100 else None
        else:
            row["fcfy"] = None

        for col in COLS:
            key = col["key"]
            if key == "fcfy":
                continue  # already set above
            field_entry = FIELD_MAP[key]
            if field_entry is None:
                continue
            field, scale = field_entry
            v = r.get(field)
            if v is not None:
                try:
                    fv = float(v) * scale
                    if key in ("pe", "evEbt", "evSales", "pb") and (fv <= 0 or fv > 500):
                        row[key] = None
                    elif key in ("revG", "opM") and abs(fv) > 500:
                        row[key] = None
                    else:
                        row[key] = round(fv, 2)
                except (TypeError, ValueError):
                    row[key] = None
            else:
                row[key] = None
        peers.append(row)

    def _q(arr, q):
        if not arr:
            return None
        s = sorted(arr)
        pos = (len(s) - 1) * q
        lo, hi = int(pos), min(int(pos) + 1, len(s) - 1)
        return s[lo] if lo == hi else s[lo] + (s[hi] - s[lo]) * (pos - lo)

    stats = {}
    for col in COLS:
        key = col["key"]
        vals = [p[key] for p in peers if p.get(key) is not None]
        if not vals:
            stats[key] = {"min": None, "max": None, "p25": None, "p50": None, "p75": None}
        else:
            stats[key] = {
                "min": round(min(vals), 2),
                "max": round(max(vals), 2),
                "p25": round(_q(vals, 0.25), 2),
                "p50": round(_q(vals, 0.50), 2),
                "p75": round(_q(vals, 0.75), 2),
            }

    peer_median_row = {"sym": _h("—"), "name": _h("Peer median"), "mcap": None, "subject": False}
    all_mcaps = [p["mcap"] for p in peers if p["mcap"] is not None]
    peer_median_row["mcap"] = round(_q(all_mcaps, 0.5), 2) if all_mcaps else None
    for col in COLS:
        key = col["key"]
        vals = [p[key] for p in peers if p.get(key) is not None]
        peer_median_row[key] = round(_q(vals, 0.5), 2) if vals else None

    HERO_COLS = ["pe", "evEbt", "fcfy", "opM"]
    subject_row = next((p for p in peers if p["subject"]), None)

    def _pctof(vals, v):
        if not vals:
            return 50
        return round(sum(1 for x in vals if x <= v) / len(vals) * 100)

    hero = []
    for col_key in HERO_COLS:
        col = next(c for c in COLS if c["key"] == col_key)
        st_data = stats[col_key]
        if st_data["min"] is None or subject_row is None:
            continue
        subj_v = subject_row.get(col_key)
        if subj_v is None:
            continue
        all_vals = [p[col_key] for p in peers if p.get(col_key) is not None]
        if not all_vals:
            continue
        pct = _pctof(all_vals, subj_v)
        median_v = st_data["p50"]
        invert = col["invert"]
        good = (pct < 50) if invert else (pct >= 50)
        if invert:
            readout = "Richer than peers" if pct >= 70 else ("In line with peers" if pct >= 30 else "Cheaper than peers")
        else:
            readout = "Outperforms peers" if pct >= 70 else ("In line with peers" if pct >= 30 else "Trails peers")
        span = (st_data["max"] - st_data["min"]) or 1

        def _pos(v_in, mn=st_data["min"], sp=span):
            return round(max(4.0, min(96.0, (v_in - mn) / sp * 100)), 1)

        hero.append({
            "key": col_key,
            "lbl": col["lbl"],
            "kind": col["kind"],
            "value": subj_v,
            "median": median_v,
            "pct": pct,
            "good": good,
            "readout": readout,
            "subjPos": _pos(subj_v),
            "peerPositions": [_pos(p[col_key]) for p in peers if not p["subject"] and p.get(col_key) is not None],
            "p25Pos": _pos(st_data["p25"]),
            "p75Pos": _pos(st_data["p75"]),
            "medPos": _pos(st_data["p50"]),
            "minV": st_data["min"],
            "maxV": st_data["max"],
        })

    sym = ticker.upper()
    sym_h = _h(sym)
    name = _h((info.get("longName") or info.get("shortName") or sym) if info else sym)
    price = get_latest_price(ticker)
    prev_close = (info.get("previousClose") if info else None)
    if price and prev_close and prev_close > 0:
        chg_pct = (price - prev_close) / prev_close * 100
        chg_str = ("▲" if chg_pct >= 0 else "▼") + " " + ("+" if chg_pct >= 0 else "") + f"{chg_pct:.2f}%"
        chg_cls = "chg-pos" if chg_pct >= 0 else "chg-neg"
    else:
        chg_str, chg_cls = "—", ""
    raw_x = (info.get("exchange", "") if info else "") or ""
    exchange = _h(_XMAP.get(raw_x, raw_x) or "—")
    price_str = f"${price:.2f}" if price else "—"

    n_peers = len(peers) - 1
    data_json = json_for_script({
        "subject": sym_h,
        "peers": peers,
        "peerMedian": peer_median_row,
        "cols": COLS,
        "stats": stats,
        "hero": hero,
        "nPeers": n_peers,
    })

    total_height = 2600 + max(0, n_peers - 10) * 54

    ctx_html = (
        '<div class="val-ctx">'
        '<span class="sym">' + sym_h + '</span>'
        '<span class="name">' + name + '</span>'
        '<span class="eyebrow-ctx" style="margin-left:12px">Valuation · Comps</span>'
        '<div class="meta">'
        '<span>' + exchange + '</span>'
        '<span class="px num">' + price_str + '</span>'
        '<span class="' + chg_cls + ' num">' + chg_str + '</span>'
        '</div></div>'
    )

    lede_html = (
        '<section class="cmp-lede">'
        '<div class="left">'
        '<span class="eyebrow-lbl">Peer set</span>'
        '<h2 class="ttl">' + str(n_peers) + ' names, one table — read across to see where ' + sym_h + ' sits</h2>'
        '<p class="sub">Peers sourced from FMP stock-peers or Prism sector fallback. '
        'Subject pinned at top, followed by the peer median; the rest sort by any column. '
        'Every numeric cell shows the value plus a track of where it sits in the column distribution.</p>'
        '</div>'
        '<div class="right">'
        '<div class="cmp-source"><span class="lbl">Peer set</span>'
        '<span class="v num">' + str(n_peers) + ' names</span>'
        '<span class="cap">Sector · similar market cap</span></div>'
        '<div class="cmp-source"><span class="lbl">Tagging</span>'
        '<span class="v num">Auto-matched</span>'
        '<span class="cap">FMP peers · 6h cache</span></div>'
        '<div class="cmp-source"><span class="lbl">Period</span>'
        '<span class="v num">TTM</span>'
        '<span class="cap">Prices live · ratios T-1</span></div>'
        '</div>'
        '</section>'
    )

    hero_html = '<section class="cmp-hero" id="cmp-hero"></section>'

    table_html = (
        '<section class="cmp-table-wrap">'
        '<div class="cmp-table-head">'
        '<div><span class="eyebrow">Side by side</span>'
        '<h3>Peer comparison · TTM ratios</h3></div>'
        '<span class="hint">Click a column header to sort · dot in each cell shows column percentile</span>'
        '</div>'
        '<div class="cmp-table" id="cmp-table"></div>'
        '</section>'
    )

    foot_html = (
        '<div class="va-foot">'
        '<span>Peer set sourced from FMP stock-peers or Prism sector fallback. '
        'Market cap from yfinance. Ratios self-computed from TTM statements. '
        'Distribution dot shows position within min↔max of the peer set.</span>'
        '</div>'
    )

    body = ctx_html + '<div class="cmp-body">' + lede_html + hero_html + table_html + foot_html + '</div>'

    js = (
        "const DATA=" + data_json + ";\n"
        "var sortKey='mcap',sortDir='desc';\n"
        "function fmtV(v,kind){\n"
        "  if(v===null||v===undefined)return'—';\n"
        "  if(kind==='x')return v.toFixed(1)+'×';\n"
        "  if(kind==='%')return v.toFixed(1)+'%';\n"
        "  return v.toFixed(2);\n"
        "}\n"
        "function fmtMcap(v){\n"
        "  if(v===null||v===undefined)return'—';\n"
        "  if(v>=1000)return'$'+(v/1000).toFixed(2)+'T';\n"
        "  return'$'+v.toFixed(1)+'B';\n"
        "}\n"
        "function renderHero(){\n"
        "  var h=DATA.hero,html='';\n"
        "  for(var i=0;i<h.length;i++){\n"
        "    var c=h[i],pctCls=c.good?'pos':'neg',dots='';\n"
        "    for(var j=0;j<c.peerPositions.length;j++){\n"
        "      dots+='<div class=\"peer-dot\" style=\"left:'+c.peerPositions[j]+'%\"></div>';\n"
        "    }\n"
        "    html+='<div class=\"cmp-rank\">';\n"
        "    html+='<div class=\"cmp-rank-head\"><span class=\"lbl\">'+c.lbl+'</span>';\n"
        "    html+='<span class=\"pct num '+pctCls+'\">P'+c.pct+'</span></div>';\n"
        "    html+='<div class=\"cmp-rank-row\">';\n"
        "    html+='<div class=\"col\"><span class=\"sub\">'+DATA.subject+'</span>';\n"
        "    html+='<span class=\"v num\">'+fmtV(c.value,c.kind)+'</span></div>';\n"
        "    html+='<div class=\"col\"><span class=\"sub\">Peer median</span>';\n"
        "    html+='<span class=\"v num dim\">'+fmtV(c.median,c.kind)+'</span></div></div>';\n"
        "    html+='<div class=\"cmp-rank-track\">';\n"
        "    html+='<div class=\"t\"></div>';\n"
        "    html+='<div class=\"band\" style=\"left:'+c.p25Pos+'%;right:'+(100-c.p75Pos)+'%\"></div>';\n"
        "    html+='<div class=\"median\" style=\"left:'+c.medPos+'%\"></div>';\n"
        "    html+=dots;\n"
        "    html+='<div class=\"subject\" style=\"left:'+c.subjPos+'%\"></div>';\n"
        "    html+='<div class=\"axis\"><span>'+fmtV(c.minV,c.kind)+'</span>';\n"
        "    html+='<span>'+fmtV(c.maxV,c.kind)+'</span></div></div>';\n"
        "    html+='<span class=\"readout\">'+c.readout+'</span></div>';\n"
        "  }\n"
        "  document.getElementById('cmp-hero').innerHTML=html;\n"
        "}\n"
        "function distCell(v,colKey,hl){\n"
        "  var st=DATA.stats[colKey],col=null;\n"
        "  for(var i=0;i<DATA.cols.length;i++){if(DATA.cols[i].key===colKey){col=DATA.cols[i];break;}}\n"
        "  if(v===null||v===undefined||st.min===null){\n"
        "    return'<div class=\"cmp-cell'+(hl?' hl':'')+'\"><span class=\"v num dim\">—</span></div>';\n"
        "  }\n"
        "  var span=(st.max-st.min)||1;\n"
        "  var pct=Math.max(4,Math.min(96,((v-st.min)/span)*100));\n"
        "  var tone=col.invert?(v>st.p50?'neg':'pos'):(v>st.p50?'pos':'neg');\n"
        "  var dotCls=hl?'subject':tone;\n"
        "  return'<div class=\"cmp-cell'+(hl?' hl':'')+'\">'"\
        "+'<span class=\"v num\">'+fmtV(v,col.kind)+'</span>'"\
        "+'<div class=\"cmp-track\"><div class=\"median\"></div>'"\
        "+'<div class=\"dot '+dotCls+'\" style=\"left:'+pct.toFixed(1)+'%\"></div>'"\
        "+'</div></div>';\n"
        "}\n"
        "function renderTable(){\n"
        "  var peers=DATA.peers,pm=DATA.peerMedian,cols=DATA.cols;\n"
        "  var subject=null,others=[];\n"
        "  for(var i=0;i<peers.length;i++){\n"
        "    if(peers[i].subject)subject=peers[i]; else others.push(peers[i]);\n"
        "  }\n"
        "  others.sort(function(a,b){\n"
        "    var va=a[sortKey],vb=b[sortKey];\n"
        "    if(va===null&&vb===null)return 0;\n"
        "    if(va===null)return 1;if(vb===null)return -1;\n"
        "    return sortDir==='desc'?vb-va:va-vb;\n"
        "  });\n"
        "  var n=cols.length,arr=sortDir==='desc'?' ▼':' ▲';\n"
        "  var colTpl='90px 1.5fr 90px ';\n"
        "  for(var i=0;i<n;i++)colTpl+='1fr ';\n"
        "  var hdr='<div class=\"cmp-header\" style=\"grid-template-columns:'+colTpl+'\">';\n"
        "  hdr+='<span class=\"th sym\">Ticker</span>';\n"
        "  hdr+='<span class=\"th name\">Company</span>';\n"
        "  hdr+='<span class=\"th r num\" onclick=\"cmpSort(\\'mcap\\')\">Mkt cap'+(sortKey==='mcap'?'<span class=\"arr\">'+arr+'</span>':'')+'</span>';\n"
        "  for(var i=0;i<cols.length;i++){\n"
        "    var c=cols[i];\n"
        "    hdr+='<span class=\"th r\" onclick=\"cmpSort(\\''+c.key+'\\')\">';\n"
        "    hdr+=c.short+(sortKey===c.key?'<span class=\"arr\">'+arr+'</span>':'')+'</span>';\n"
        "  }\n"
        "  hdr+='</div>';\n"
        "  function buildRow(p,cls){\n"
        "    var r='<div class=\"cmp-row'+cls+'\" style=\"grid-template-columns:'+colTpl+'\">';\n"
        "    if(p.subject)r+='<span class=\"sym\">'+p.sym+' <span class=\"pin\">subject</span></span>';\n"
        "    else r+='<span class=\"sym\">'+p.sym+'</span>';\n"
        "    r+='<span class=\"name\">'+p.name;\n"
        "    if(cls===' median')r+=' <span class=\"muted\">'+DATA.nPeers+' names</span>';\n"
        "    r+='</span>';\n"
        "    var mcCls=(cls===' median')?' dim':'';\n"
        "    r+='<span class=\"num r mc'+mcCls+'\">'+fmtMcap(p.mcap)+'</span>';\n"
        "    if(cls===' median'){\n"
        "      for(var i=0;i<cols.length;i++){\n"
        "        var c=cols[i],val=p[c.key];\n"
        "        r+='<div class=\"cmp-cell median-cell\"><span class=\"v num dim\">';\n"
        "        r+=(val!==null&&val!==undefined?fmtV(val,c.kind):'—')+'</span></div>';\n"
        "      }\n"
        "    } else {\n"
        "      var hl=!!p.subject;\n"
        "      for(var i=0;i<cols.length;i++){r+=distCell(p[cols[i].key],cols[i].key,hl);}\n"
        "    }\n"
        "    r+='</div>';return r;\n"
        "  }\n"
        "  var tbl=hdr;\n"
        "  if(subject)tbl+=buildRow(subject,' subject');\n"
        "  tbl+=buildRow(pm,' median');\n"
        "  for(var i=0;i<others.length;i++)tbl+=buildRow(others[i],'');\n"
        "  document.getElementById('cmp-table').innerHTML=tbl;\n"
        "}\n"
        "function cmpSort(key){\n"
        "  if(sortKey===key){sortDir=sortDir==='desc'?'asc':'desc';}\n"
        "  else{sortKey=key;sortDir='desc';}\n"
        "  renderTable();\n"
        "}\n"
        "renderHero();\n"
        "renderTable();\n"
    )

    doc = (
        "<!doctype html><html><head><meta charset=\"utf-8\">"
        "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">"
        "<link href=\"https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500"
        "&family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap\" rel=\"stylesheet\">"
        "<style>*,*::before,*::after{box-sizing:border-box}"
        ":root{"
        "--ink-0:#0B0E13;--ink-1:#11151C;--ink-2:#181D26;--ink-3:#222934;--ink-4:#2C3340;"
        "--line-1:#232934;--line-2:#2E3645;--line-3:#3D4658;"
        "--fg-1:#F2ECDC;--fg-2:#C7C0AE;--fg-3:#8E8676;--fg-4:#5E5849;"
        "--brass:#C2AA7A;--brass-bright:#DCC79E;--brass-deep:#8F7A50;"
        "--oxford:#1F3D5C;--oxford-light:#2E5A87;"
        "--positive:#4F8C5E;--negative:#B5494B;"
        "--font-display:'EB Garamond',Georgia,serif;"
        "--font-sans:'IBM Plex Sans','Helvetica Neue',system-ui,sans-serif;"
        "--font-mono:'IBM Plex Mono','SF Mono',Menlo,monospace;"
        "--fs-12:0.75rem;--fs-13:0.8125rem;--fs-14:0.875rem;--fs-16:1rem;--fs-18:1.125rem;"
        "--fs-20:1.25rem;--fs-24:1.5rem;--fs-30:1.875rem;"
        "--tr-wider:0.12em;--tr-wide:0.04em;--tr-snug:-0.01em;"
        "--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;"
        "--r-1:2px;--r-2:4px;--r-3:6px;--r-full:999px;"
        "}"
        "html,body{margin:0;padding:0;background:var(--ink-0);color:var(--fg-2);"
        "font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}"
        "</style>"
        + _KR_CSS + _CC_CSS
        + "</head><body>"
        + body
        + "<script>" + js + "</script>"
        + "</body></html>"
    )
    components.html(doc, height=total_height, scrolling=False)



# ── Analyst Targets CSS ──────────────────────────────────────────────────────
_AT_CSS = """<style>
.at-body{padding:var(--sp-5) var(--sp-5) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5)}
.at-lede{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-5);align-items:stretch;background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);padding:var(--sp-5)}
.at-lede .left{display:flex;flex-direction:column;gap:8px}
.at-lede .ttl{font-family:var(--font-display);font-size:var(--fs-30);font-weight:500;letter-spacing:-0.01em;line-height:1.1;color:var(--fg-1);margin:4px 0 0;max-width:40ch}
.at-lede .sub{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-2);line-height:1.55;max-width:64ch}
.at-lede .right{display:flex;flex-direction:column;gap:var(--sp-2)}
.at-source{background:var(--ink-2);border:1px solid var(--line-1);border-radius:var(--r-2);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:2px}
.at-source .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-4);font-weight:600}
.at-source .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-14);color:var(--fg-1);font-weight:500}
.at-source .v.pos{color:var(--positive)}.at-source .v.neg{color:var(--negative)}
.at-source .cap{font-family:var(--font-mono);font-size:10px;color:var(--fg-4)}
.at-card{background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.at-card-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-1);display:flex;justify-content:space-between;align-items:baseline}
.at-card-head .left-group{display:flex;align-items:baseline;gap:var(--sp-2)}
.at-card-head .roman{font-family:var(--font-display);font-style:italic;font-size:var(--fs-20);color:var(--brass);font-weight:400;margin-right:6px}
.at-card-head h3{font-family:var(--font-display);font-size:var(--fs-20);font-weight:500;letter-spacing:-0.01em;color:var(--fg-1);margin:0}
.at-card-head .hint{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-3)}
.at-track-wrap{padding:var(--sp-4) var(--sp-5) 0}
.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-2);padding:var(--sp-3) var(--sp-5) var(--sp-4)}
.stat-card{background:var(--ink-2);border:1px solid var(--line-1);border-radius:var(--r-2);padding:var(--sp-3)}
.stat-card .lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-4);margin-bottom:4px;font-weight:500}
.stat-card .val{display:block;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-20);font-weight:500;color:var(--brass-bright);line-height:1.1}
.stat-card .val.dim{color:var(--fg-1)}
.stat-card .val.pos{color:var(--positive)}.stat-card .val.neg{color:var(--negative)}
.pos{color:var(--positive)}.neg{color:var(--negative)}
.at-readout{font-family:var(--font-display);font-style:italic;font-size:var(--fs-14);color:var(--fg-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-1);line-height:1.55}
.rec-wrap{padding:var(--sp-4) var(--sp-5) var(--sp-5)}
.rec-stacked{height:24px;border-radius:var(--r-2);overflow:hidden;display:flex;margin-bottom:var(--sp-3)}
.rec-seg{height:100%}
.rec-legend{display:flex;gap:var(--sp-4);flex-wrap:wrap}
.rec-legend-item{display:flex;align-items:center;gap:6px}
.rec-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.rec-legend .name{font-family:var(--font-sans);font-size:var(--fs-12);color:var(--fg-2)}
.rec-legend .count{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-1)}
.rec-legend .pct{font-family:var(--font-mono);font-size:10px;color:var(--fg-3)}
</style>"""

# ── Analyst Targets ──────────────────────────────────────────────────────────

def _render_analyst_targets(ticker: str):

    targets = get_analyst_price_targets(ticker)
    recs = get_recommendations_summary(ticker)
    info = get_company_info(ticker)

    if not targets and (recs is None or recs.empty):
        st.info("Analyst data unavailable.")
        return

    # Extract targets
    current = float(targets.get("current") or 0)
    low = float(targets.get("low") or 0)
    mean_t = float(targets.get("mean") or 0)
    median_t = float(targets.get("median") or 0)
    high = float(targets.get("high") or 0)

    upside = (mean_t - current) / current if current > 0 and mean_t else None
    upside_str = f"{upside * 100:+.1f}%" if upside is not None else "—"
    upside_cls = "pos" if (upside or 0) > 0 else "neg"

    # Extract recommendations
    counts = {"Strong Buy": 0, "Buy": 0, "Hold": 0, "Sell": 0, "Strong Sell": 0}
    if recs is not None and not recs.empty:
        if "period" in recs.columns:
            row_r = recs[recs["period"] == "0m"]
            row_r = row_r.iloc[0] if not row_r.empty else recs.iloc[0]
        else:
            row_r = recs.iloc[0]
        counts["Strong Buy"] = int(row_r.get("strongBuy", 0))
        counts["Buy"] = int(row_r.get("buy", 0))
        counts["Hold"] = int(row_r.get("hold", 0))
        counts["Sell"] = int(row_r.get("sell", 0))
        counts["Strong Sell"] = int(row_r.get("strongSell", 0))

    total = sum(counts.values())

    # Narrative readouts
    if upside and upside > 0.20:
        readout = f"Consensus sees significant upside — analysts expect {upside * 100:.0f}% appreciation from current levels."
    elif upside and upside > 0.05:
        readout = f"Moderate upside in view — the mean target implies {upside * 100:.0f}% from current price."
    elif upside and upside > 0:
        readout = f"Limited upside priced in — analysts see {upside * 100:.0f}% appreciation from here."
    elif upside and upside < 0:
        readout = f"Targets trail price — mean consensus implies {abs(upside) * 100:.0f}% downside from current."
    else:
        readout = "Analyst consensus on price targets."

    strong_bullish = counts["Strong Buy"] + counts["Buy"]
    bearish = counts["Sell"] + counts["Strong Sell"]
    if total > 0:
        bull_pct = strong_bullish / total
        if bull_pct >= 0.70:
            consensus_readout = f"Strong bullish consensus — {strong_bullish} of {total} analysts rate this a Buy or better."
        elif bull_pct >= 0.40:
            consensus_readout = f"Mixed but leaning bullish — {strong_bullish} analysts bullish against {total - strong_bullish} neutral or bearish."
        elif bearish / total >= 0.30:
            consensus_readout = f"Elevated skepticism — {bearish} of {total} analysts carry a sell rating."
        else:
            consensus_readout = "Cautious stance — analysts predominantly hold with limited conviction on direction."
    else:
        consensus_readout = "Insufficient coverage to assess consensus."

    # SVG track (800px internal coordinate)
    _span = high - low if high > low else 1

    def _pct_pos(v):
        return max(0.0, min(1.0, (v - low) / _span)) if _span > 0 else 0.5

    px_low_x = 20
    px_high_x = 780
    px_w = px_high_x - px_low_x
    px_current = max(28, min(772, px_low_x + _pct_pos(current) * px_w))
    px_mean = max(28, min(772, px_low_x + _pct_pos(mean_t) * px_w))

    if mean_t > current and current > 0:
        fill_x = min(px_current, px_mean)
        fill_w = abs(px_mean - px_current)
        svg_fill = f'<rect x="{fill_x:.0f}" y="46" width="{fill_w:.0f}" height="8" fill="rgba(79,140,94,0.2)" rx="2"/>'
    elif mean_t < current and current > 0:
        fill_x = min(px_current, px_mean)
        fill_w = abs(px_mean - px_current)
        svg_fill = f'<rect x="{fill_x:.0f}" y="46" width="{fill_w:.0f}" height="8" fill="rgba(181,73,75,0.2)" rx="2"/>'
    else:
        svg_fill = ""

    svg_html = (
        '<svg viewBox="0 0 800 100" preserveAspectRatio="xMidYMid meet" width="100%" height="90"'
        ' xmlns="http://www.w3.org/2000/svg">'
        '<rect x="20" y="46" width="760" height="8" rx="4" fill="#222934"/>'
        '<rect x="20" y="46" width="760" height="8" rx="4" fill="rgba(31,61,92,0.22)"/>'
        + svg_fill
        + '<line x1="20" x2="20" y1="38" y2="62" stroke="#2E3645" stroke-width="1.5"/>'
        '<line x1="780" x2="780" y1="38" y2="62" stroke="#2E3645" stroke-width="1.5"/>'
        + f'<text x="20" y="78" font-size="10" fill="#5E5849" font-family="IBM Plex Mono,monospace" text-anchor="start">{fmt_currency(low)}</text>'
        + f'<text x="780" y="78" font-size="10" fill="#5E5849" font-family="IBM Plex Mono,monospace" text-anchor="end">{fmt_currency(high)}</text>'
        + f'<circle cx="{px_current:.0f}" cy="50" r="6" fill="#8E8676" stroke="#0B0E13" stroke-width="2"/>'
        + f'<text x="{px_current:.0f}" y="94" font-size="9" fill="#8E8676" font-family="IBM Plex Mono,monospace" text-anchor="middle">Current {fmt_currency(current)}</text>'
        + f'<circle cx="{px_mean:.0f}" cy="50" r="14" fill="none" stroke="rgba(194,170,122,0.18)" stroke-width="4"/>'
        + f'<circle cx="{px_mean:.0f}" cy="50" r="9" fill="#C2AA7A" stroke="#0B0E13" stroke-width="2"/>'
        + f'<text x="{px_mean:.0f}" y="94" font-size="9" fill="#C2AA7A" font-family="IBM Plex Mono,monospace" text-anchor="middle" font-weight="500">Mean {fmt_currency(mean_t)}</text>'
        + '</svg>'
    )

    # Stat cards
    def _sc(lbl, val_str, val_cls=""):
        cls_str = (' ' + val_cls) if val_cls else ''
        return (
            '<div class="stat-card">'
            '<span class="lbl">' + lbl + '</span>'
            '<span class="val' + cls_str + ' num">' + val_str + '</span>'
            '</div>'
        )

    stat_html = (
        '<div class="stat-row">'
        + _sc("Low", fmt_currency(low), "dim")
        + _sc("Mean", fmt_currency(mean_t))
        + _sc("Median", fmt_currency(median_t), "dim")
        + _sc("High", fmt_currency(high), "dim")
        + _sc("Upside to mean", upside_str, upside_cls)
        + '</div>'
    )

    # Recommendation bar + legend
    rec_colors = {
        "Strong Buy": "#2E5A35",
        "Buy": "#4F8C5E",
        "Hold": "#8F7A50",
        "Sell": "#8B3A3F",
        "Strong Sell": "#6E2A2E",
    }
    bar_segs = ""
    legend_items = ""
    for label, count in counts.items():
        color = rec_colors[label]
        if total > 0 and count > 0:
            pct_w = count / total * 100
            bar_segs += f'<div class="rec-seg" style="width:{pct_w:.1f}%;background:{color}"></div>'
        pct_str = f"({count / total * 100:.0f}%)" if total > 0 else "(0%)"
        legend_items += (
            '<div class="rec-legend-item">'
            '<div class="rec-dot" style="background:' + color + '"></div>'
            '<span class="name">' + label + '</span>'
            '<span class="count">' + str(count) + '</span>'
            '<span class="pct">' + pct_str + '</span>'
            '</div>'
        )

    # Context strip
    sym = ticker.upper()
    name = _h((info.get("longName") or info.get("shortName") or sym) if info else sym)
    price = get_latest_price(ticker)
    prev_close = (info.get("previousClose") if info else None)
    if price and prev_close and prev_close > 0:
        chg_pct = (price - prev_close) / prev_close * 100
        chg_str = ("▲" if chg_pct >= 0 else "▼") + " " + ("+" if chg_pct >= 0 else "") + f"{chg_pct:.2f}%"
        chg_cls = "chg-pos" if chg_pct >= 0 else "chg-neg"
    else:
        chg_str, chg_cls = "—", ""
    _XMAP = {"NYQ": "NYSE", "NMS": "NASDAQ", "NGM": "NASDAQ", "NCM": "NASDAQ", "ASE": "AMEX"}
    raw_x = (info.get("exchange", "") if info else "") or ""
    exchange = _h(_XMAP.get(raw_x, raw_x) or "—")
    price_str = f"${price:.2f}" if price else "—"

    ctx_html = (
        '<div class="val-ctx">'
        '<span class="sym">' + sym + '</span>'
        '<span class="name">' + name + '</span>'
        '<span class="eyebrow-ctx" style="margin-left:12px">Valuation · Analyst Targets</span>'
        '<div class="meta">'
        '<span>' + exchange + '</span>'
        '<span class="px num">' + price_str + '</span>'
        '<span class="' + chg_cls + ' num">' + chg_str + '</span>'
        '</div></div>'
    )

    lede_html = (
        '<section class="at-lede">'
        '<div class="left">'
        '<span class="eyebrow-lbl">Analyst coverage</span>'
        '<h2 class="ttl">Where the street sets its sights — ' + str(total) + ' analysts, one consensus</h2>'
        '<p class="sub">Price targets and recommendation breakdown as of the current reporting period. '
        'The range bar shows where the current price sits relative to the analyst target spectrum.</p>'
        '</div>'
        '<div class="right">'
        '<div class="at-source"><span class="lbl">Coverage</span>'
        '<span class="v num">' + str(total) + ' analysts</span>'
        '<span class="cap">current month</span></div>'
        '<div class="at-source"><span class="lbl">Mean target</span>'
        '<span class="v num">' + fmt_currency(mean_t) + '</span>'
        '<span class="cap">vs ' + fmt_currency(current) + ' current</span></div>'
        '<div class="at-source"><span class="lbl">Upside / downside</span>'
        '<span class="v ' + upside_cls + ' num">' + upside_str + '</span>'
        '<span class="cap">to mean target</span></div>'
        '</div>'
        '</section>'
    )

    card1_html = (
        '<section class="at-card">'
        '<div class="at-card-head">'
        '<div class="left-group"><span class="roman">I</span><h3>Price target range</h3></div>'
        '<span class="hint">Low · Current price · Mean target · High</span>'
        '</div>'
        '<div class="at-track-wrap">' + svg_html + '</div>'
        + stat_html
        + '<div class="at-readout">' + readout + '</div>'
        '</section>'
    )

    card2_html = (
        '<section class="at-card">'
        '<div class="at-card-head">'
        '<div class="left-group"><span class="roman">II</span><h3>Recommendation breakdown</h3></div>'
        '<span class="hint">' + str(total) + ' analysts · current month</span>'
        '</div>'
        '<div class="rec-wrap">'
        '<div class="rec-stacked">' + bar_segs + '</div>'
        '<div class="rec-legend">' + legend_items + '</div>'
        '</div>'
        '<div class="at-readout">' + consensus_readout + '</div>'
        '</section>'
    )

    foot_html = (
        '<div class="va-foot">'
        '<span>Price targets and recommendations sourced from yfinance. '
        'Coverage counts as of the most recent reporting month.</span>'
        '</div>'
    )

    body = (
        ctx_html
        + '<div class="at-body">'
        + lede_html
        + card1_html
        + card2_html
        + foot_html
        + '</div>'
    )

    _ROOT = (
        "<style>*,*::before,*::after{box-sizing:border-box}"
        ":root{"
        "--ink-0:#0B0E13;--ink-1:#11151C;--ink-2:#181D26;--ink-3:#222934;--ink-4:#2C3340;"
        "--line-1:#232934;--line-2:#2E3645;--line-3:#3D4658;"
        "--fg-1:#F2ECDC;--fg-2:#C7C0AE;--fg-3:#8E8676;--fg-4:#5E5849;"
        "--brass:#C2AA7A;--brass-bright:#DCC79E;--brass-deep:#8F7A50;--brass-ink:#17120A;"
        "--oxford:#1F3D5C;--oxford-light:#2E5A87;"
        "--positive:#4F8C5E;--positive-bg:#15241A;--negative:#B5494B;--negative-bg:#2A1517;"
        "--warning:#C49545;--warning-bg:#2A1F0F;--info:#4A78B5;--info-bg:#11202E;"
        "--font-display:'EB Garamond',Georgia,serif;"
        "--font-sans:'IBM Plex Sans','Helvetica Neue',system-ui,sans-serif;"
        "--font-mono:'IBM Plex Mono','SF Mono',Menlo,monospace;"
        "--fs-12:0.75rem;--fs-13:0.8125rem;--fs-14:0.875rem;--fs-16:1rem;--fs-18:1.125rem;"
        "--fs-20:1.25rem;--fs-24:1.5rem;--fs-30:1.875rem;--fs-38:2.375rem;"
        "--tr-wider:0.12em;--tr-wide:0.04em;--tr-tight:-0.02em;"
        "--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;"
        "--r-1:2px;--r-2:4px;--r-3:6px;--r-full:999px;"
        "--shadow-1:0 1px 3px rgba(0,0,0,0.4);"
        "}"
        "html,body{margin:0;padding:0;background:var(--ink-0);color:var(--fg-2);"
        "font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}"
        "</style>"
    )

    doc = (
        "<!doctype html><html><head><meta charset='utf-8'>"
        "<link rel='preconnect' href='https://fonts.googleapis.com'>"
        "<link href='https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500"
        "&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap'"
        " rel='stylesheet'>"
        + _ROOT
        + _KR_CSS + _AT_CSS
        + "</head><body>"
        + body
        + "</body></html>"
    )

    components.html(doc, height=1200, scrolling=False)


# ── Earnings History ──────────────────────────────────────────────────────────

_EH_CSS = """<style>
.eh-body{padding:var(--sp-5) var(--sp-5) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5)}
.eh-lede{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-5);align-items:stretch;background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);padding:var(--sp-5)}
.eh-lede .left{display:flex;flex-direction:column;gap:8px}
.eh-lede .ttl{font-family:var(--font-display);font-size:var(--fs-30);font-weight:500;letter-spacing:-0.01em;line-height:1.1;color:var(--fg-1);margin:4px 0 0;max-width:42ch}
.eh-lede .sub{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-2);line-height:1.55;max-width:64ch}
.eh-lede .right{display:flex;flex-direction:column;gap:var(--sp-2)}
.eh-source{background:var(--ink-2);border:1px solid var(--line-1);border-radius:var(--r-2);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:2px}
.eh-source .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-4);font-weight:600}
.eh-source .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-14);color:var(--fg-1);font-weight:500}
.eh-source .cap{font-family:var(--font-mono);font-size:10px;color:var(--fg-4)}
.eh-card{background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3)}
.eh-card-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-1);display:flex;justify-content:space-between;align-items:center}
.eh-card-head .left-group{display:flex;align-items:baseline;gap:var(--sp-2)}
.eh-card-head .roman{font-family:var(--font-display);font-style:italic;font-size:var(--fs-20);color:var(--brass);font-weight:400;margin-right:6px}
.eh-card-head h3{font-family:var(--font-display);font-size:var(--fs-20);font-weight:500;letter-spacing:-0.01em;color:var(--fg-1);margin:0}
.eh-card-head .hint{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-3)}
.eh-stat-strip{display:flex;gap:0;border-bottom:1px solid var(--line-1)}
.eh-stat-cell{padding:var(--sp-3) var(--sp-5);display:flex;flex-direction:column;gap:2px;border-right:1px solid var(--line-1)}
.eh-stat-cell:last-child{border-right:none}
.eh-stat-cell .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-4);font-weight:600}
.eh-stat-cell .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-18);color:var(--fg-1);font-weight:500}
.eh-stat-cell .v.pos{color:var(--positive)}.eh-stat-cell .v.neg{color:var(--negative)}
.eh-table{width:100%;border-collapse:collapse}
.eh-table thead th{background:var(--ink-2);font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-4);padding:8px var(--sp-4);text-align:left;font-weight:600;border-bottom:1px solid var(--line-1)}
.eh-table thead th.r{text-align:right}.eh-table thead th.c{text-align:center}
.eh-table tbody tr{border-bottom:1px solid var(--line-1);transition:background .06s}
.eh-table tbody tr:hover{filter:brightness(1.08)}
.eh-table tbody tr:last-child{border-bottom:none}
.eh-table td{padding:10px var(--sp-4);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-13);color:var(--fg-2)}
.eh-table td.r{text-align:right}.eh-table td.c{text-align:center}
.eh-table td.pos{color:var(--positive)}.eh-table td.neg{color:var(--negative)}
.pos{color:var(--positive)}.neg{color:var(--negative)}
</style>"""


def _render_earnings_history(ticker: str):

    eh = get_earnings_history(ticker)
    next_date = get_next_earnings_date(ticker)
    info = get_company_info(ticker)

    if eh is None or eh.empty:
        st.info("Earnings history unavailable for this ticker.")
        return

    # Build normalized row list, oldest first (for chart)
    df = eh.copy().sort_index()
    rows = []
    for idx in df.index:
        def _safe_float(col):
            try:
                v = df.loc[idx, col] if col in df.columns else None
                return float(v) if v is not None and pd.notna(v) else None
            except (TypeError, ValueError):
                return None

        actual_f = _safe_float("epsActual")
        est_f = _safe_float("epsEstimate")
        diff_f = _safe_float("epsDifference")
        surprise_f = _safe_float("surprisePercent")
        beat = (actual_f >= est_f) if (actual_f is not None and est_f is not None) else None

        rows.append({
            "quarter": str(idx)[:10],
            "epsActual": actual_f,
            "epsEstimate": est_f,
            "diff": diff_f,
            "surprisePct": surprise_f,
            "beat": beat,
        })

    n_total = len(rows)

    # Compute stats
    beats = [r for r in rows if r["beat"] is True]
    beat_rate = len(beats) / n_total * 100 if n_total > 0 else 0

    surprise_vals = [r["surprisePct"] for r in rows if r["surprisePct"] is not None]
    avg_surprise = sum(surprise_vals) / len(surprise_vals) if surprise_vals else None
    med_surprise = sorted(surprise_vals)[len(surprise_vals) // 2] if surprise_vals else None

    # Current streak (from most recent)
    streak_count = 0
    streak_type = None
    for r in reversed(rows):
        if r["beat"] is None:
            break
        if streak_type is None:
            streak_type = r["beat"]
        if r["beat"] == streak_type:
            streak_count += 1
        else:
            break

    if streak_count > 0 and streak_type is not None:
        streak_str = f"{streak_count} {'beats' if streak_type else 'misses'}"
        streak_cls = "pos" if streak_type else "neg"
    else:
        streak_str = "—"
        streak_cls = ""

    # Build SVG chart (oldest to newest on x-axis)
    n = len(rows)
    SVG_W, SVG_H = 800, 260
    PAD_L, PAD_R, PAD_T, PAD_B = 64, 24, 20, 56

    all_eps = []
    for r in rows:
        if r["epsActual"] is not None:
            all_eps.append(r["epsActual"])
        if r["epsEstimate"] is not None:
            all_eps.append(r["epsEstimate"])

    if all_eps:
        y_min_raw = min(all_eps)
        y_max_raw = max(all_eps)
        y_pad = (y_max_raw - y_min_raw) * 0.18 or 0.1
        y_min = y_min_raw - y_pad
        y_max = y_max_raw + y_pad
    else:
        y_min, y_max = -1.0, 1.0

    y_span = (y_max - y_min) or 1.0
    ch_h = SVG_H - PAD_T - PAD_B
    ch_w = SVG_W - PAD_L - PAD_R

    def _cx(i):
        return PAD_L + (i / max(n - 1, 1)) * ch_w if n > 1 else PAD_L + ch_w / 2

    def _cy(v):
        return PAD_T + (1.0 - (v - y_min) / y_span) * ch_h

    svg_parts = [
        f'<svg viewBox="0 0 {SVG_W} {SVG_H}" width="100%"'
        f' style="display:block;overflow:visible" xmlns="http://www.w3.org/2000/svg">'
    ]

    # Horizontal grid lines
    for frac in [0.0, 0.25, 0.5, 0.75, 1.0]:
        gy = PAD_T + frac * ch_h
        gv = y_max - frac * y_span
        svg_parts.append(
            f'<line x1="{PAD_L}" x2="{SVG_W - PAD_R}" y1="{gy:.1f}" y2="{gy:.1f}"'
            f' stroke="#1A2030" stroke-width="1"/>'
            f'<text x="{PAD_L - 6}" y="{gy + 3.5:.1f}" font-size="9" fill="#5E5849"'
            f' font-family="IBM Plex Mono,monospace" text-anchor="end">{gv:.2f}</text>'
        )

    # Zero line
    if y_min < 0 < y_max:
        zy = _cy(0)
        svg_parts.append(
            f'<line x1="{PAD_L}" x2="{SVG_W - PAD_R}" y1="{zy:.1f}" y2="{zy:.1f}"'
            f' stroke="#2E3645" stroke-width="1.5" stroke-dasharray="4,3"/>'
        )

    # Estimate line (dashed oxford-light)
    est_pts = [(i, rows[i]["epsEstimate"]) for i in range(n) if rows[i]["epsEstimate"] is not None]
    if len(est_pts) >= 2:
        est_d = " ".join(
            f"{'M' if j == 0 else 'L'}{_cx(i):.1f} {_cy(v):.1f}"
            for j, (i, v) in enumerate(est_pts)
        )
        svg_parts.append(
            f'<path d="{est_d}" fill="none" stroke="#2E5A87" stroke-width="1.5" stroke-dasharray="5,3"/>'
        )

    # Actual line (solid brass)
    act_pts = [(i, rows[i]["epsActual"]) for i in range(n) if rows[i]["epsActual"] is not None]
    if len(act_pts) >= 2:
        act_d = " ".join(
            f"{'M' if j == 0 else 'L'}{_cx(i):.1f} {_cy(v):.1f}"
            for j, (i, v) in enumerate(act_pts)
        )
        svg_parts.append(
            f'<path d="{act_d}" fill="none" stroke="#C2AA7A" stroke-width="2"/>'
        )

    # Dots and x-axis labels
    for i, r in enumerate(rows):
        xi = _cx(i)
        if r["epsEstimate"] is not None:
            yi = _cy(r["epsEstimate"])
            svg_parts.append(
                f'<circle cx="{xi:.1f}" cy="{yi:.1f}" r="4" fill="#2E5A87" stroke="#0B0E13" stroke-width="1.5"/>'
            )
        if r["epsActual"] is not None:
            ya = _cy(r["epsActual"])
            dot_color = "#4F8C5E" if r["beat"] is True else ("#B5494B" if r["beat"] is False else "#C2AA7A")
            svg_parts.append(
                f'<circle cx="{xi:.1f}" cy="{ya:.1f}" r="5.5" fill="{dot_color}" stroke="#0B0E13" stroke-width="2"/>'
            )
        label = r["quarter"][:7]
        ly = SVG_H - PAD_B + 14
        svg_parts.append(
            f'<text x="{xi:.1f}" y="{ly}" font-size="9" fill="#5E5849"'
            f' font-family="IBM Plex Mono,monospace" text-anchor="end"'
            f' transform="rotate(-40,{xi:.1f},{ly})">{label}</text>'
        )

    svg_parts.append('</svg>')
    svg_html = "".join(svg_parts)

    # EPS table (most recent first)
    def _pill(beat):
        if beat is True:
            return (
                '<span style="background:rgba(79,140,94,0.18);color:#4F8C5E;'
                'font-family:IBM Plex Mono,monospace;font-size:10px;text-transform:uppercase;'
                'letter-spacing:0.08em;padding:2px 8px;border-radius:999px">Beat</span>'
            )
        if beat is False:
            return (
                '<span style="background:rgba(181,73,75,0.18);color:#B5494B;'
                'font-family:IBM Plex Mono,monospace;font-size:10px;text-transform:uppercase;'
                'letter-spacing:0.08em;padding:2px 8px;border-radius:999px">Miss</span>'
            )
        return '<span style="color:#5E5849;font-family:IBM Plex Mono,monospace;font-size:10px">—</span>'

    table_rows_html = ""
    for r in reversed(rows):
        beat = r["beat"]
        row_bg = (
            "rgba(79,140,94,0.05)" if beat is True
            else ("rgba(181,73,75,0.05)" if beat is False else "transparent")
        )
        eps_actual_str = fmt_currency(r["epsActual"]) if r["epsActual"] is not None else "—"
        eps_est_str = fmt_currency(r["epsEstimate"]) if r["epsEstimate"] is not None else "—"
        diff_str = (("+" if (r["diff"] or 0) >= 0 else "") + fmt_currency(abs(r["diff"])) if r["diff"] is not None else "—")
        if r["diff"] is not None:
            diff_str = ("+" if r["diff"] >= 0 else "") + fmt_currency(r["diff"])
        diff_cls = "pos" if (r["diff"] or 0) >= 0 else "neg"
        if r["surprisePct"] is not None:
            surp_str = f"{r['surprisePct'] * 100:+.2f}%"
        else:
            surp_str = "—"
        surp_cls = "pos" if (r["surprisePct"] or 0) >= 0 else "neg"
        pill = _pill(beat)
        table_rows_html += (
            f'<tr style="background:{row_bg}">'
            f'<td class="num">{r["quarter"]}</td>'
            f'<td class="num r">{eps_est_str}</td>'
            f'<td class="num r">{eps_actual_str}</td>'
            f'<td class="num r {diff_cls}">{diff_str}</td>'
            f'<td class="num r {surp_cls}">{surp_str}</td>'
            f'<td class="c">{pill}</td>'
            '</tr>'
        )

    # Stat strip
    beat_rate_str = f"{beat_rate:.0f}%"
    avg_surp_str = (f"{avg_surprise * 100:+.1f}%" if avg_surprise is not None else "—")
    avg_surp_cls = "pos" if (avg_surprise or 0) >= 0 else "neg"

    stat_strip_html = (
        '<div class="eh-stat-strip">'
        '<div class="eh-stat-cell"><span class="lbl">Beat rate</span>'
        '<span class="v pos num">' + beat_rate_str + '</span></div>'
        '<div class="eh-stat-cell"><span class="lbl">Avg surprise</span>'
        '<span class="v ' + avg_surp_cls + ' num">' + avg_surp_str + '</span></div>'
        '<div class="eh-stat-cell"><span class="lbl">Current streak</span>'
        '<span class="v ' + streak_cls + ' num">' + streak_str + '</span></div>'
        '</div>'
    )

    # Context strip
    sym = ticker.upper()
    name = _h((info.get("longName") or info.get("shortName") or sym) if info else sym)
    price = get_latest_price(ticker)
    prev_close = (info.get("previousClose") if info else None)
    if price and prev_close and prev_close > 0:
        chg_pct = (price - prev_close) / prev_close * 100
        chg_str = ("▲" if chg_pct >= 0 else "▼") + " " + ("+" if chg_pct >= 0 else "") + f"{chg_pct:.2f}%"
        chg_cls = "chg-pos" if chg_pct >= 0 else "chg-neg"
    else:
        chg_str, chg_cls = "—", ""
    _XMAP = {"NYQ": "NYSE", "NMS": "NASDAQ", "NGM": "NASDAQ", "NCM": "NASDAQ", "ASE": "AMEX"}
    raw_x = (info.get("exchange", "") if info else "") or ""
    exchange = _h(_XMAP.get(raw_x, raw_x) or "—")
    price_str = f"${price:.2f}" if price else "—"

    ctx_html = (
        '<div class="val-ctx">'
        '<span class="sym">' + sym + '</span>'
        '<span class="name">' + name + '</span>'
        '<span class="eyebrow-ctx" style="margin-left:12px">Valuation · Earnings History</span>'
        '<div class="meta">'
        '<span>' + exchange + '</span>'
        '<span class="px num">' + price_str + '</span>'
        '<span class="' + chg_cls + ' num">' + chg_str + '</span>'
        '</div></div>'
    )

    next_date_str = _h(next_date if next_date else "Not scheduled")
    med_surp_str = (f"{med_surprise * 100:+.1f}%" if med_surprise is not None else "—")

    lede_html = (
        '<section class="eh-lede">'
        '<div class="left">'
        '<span class="eyebrow-lbl">Earnings track record</span>'
        '<h2 class="ttl">' + str(n_total) + ' quarters — beat rate ' + f"{beat_rate:.0f}%" + ', streak ' + streak_str + '</h2>'
        '<p class="sub">Quarterly EPS actuals versus analyst consensus estimates. '
        'Green dots indicate beats, red misses. The strip below tracks beat rate, average surprise, and current streak.</p>'
        '</div>'
        '<div class="right">'
        '<div class="eh-source"><span class="lbl">Next earnings</span>'
        '<span class="v num">' + next_date_str + '</span>'
        '<span class="cap">estimated date</span></div>'
        '<div class="eh-source"><span class="lbl">Median surprise</span>'
        '<span class="v num">' + med_surp_str + '</span>'
        '<span class="cap">vs consensus</span></div>'
        '<div class="eh-source"><span class="lbl">Current streak</span>'
        '<span class="v ' + streak_cls + ' num">' + streak_str + '</span>'
        '<span class="cap">consecutive</span></div>'
        '</div>'
        '</section>'
    )

    chart_legend = (
        '<div style="display:flex;gap:20px;padding:8px 20px 4px;align-items:center">'
        '<span style="display:flex;align-items:center;gap:6px;font-family:IBM Plex Mono,monospace;font-size:11px;color:#8E8676">'
        '<svg width="18" height="3" style="flex-shrink:0">'
        '<line x1="0" y1="1.5" x2="18" y2="1.5" stroke="#C2AA7A" stroke-width="2"/>'
        '</svg>Actual EPS</span>'
        '<span style="display:flex;align-items:center;gap:6px;font-family:IBM Plex Mono,monospace;font-size:11px;color:#8E8676">'
        '<svg width="18" height="3" style="flex-shrink:0">'
        '<line x1="0" y1="1.5" x2="18" y2="1.5" stroke="#2E5A87" stroke-width="1.5" stroke-dasharray="4,2"/>'
        '</svg>Est. EPS</span>'
        '<span style="display:flex;align-items:center;gap:5px;font-family:IBM Plex Mono,monospace;font-size:11px;color:#8E8676">'
        '<svg width="9" height="9" style="flex-shrink:0">'
        '<circle cx="4.5" cy="4.5" r="4" fill="#4F8C5E"/>'
        '</svg>Beat</span>'
        '<span style="display:flex;align-items:center;gap:5px;font-family:IBM Plex Mono,monospace;font-size:11px;color:#8E8676">'
        '<svg width="9" height="9" style="flex-shrink:0">'
        '<circle cx="4.5" cy="4.5" r="4" fill="#B5494B"/>'
        '</svg>Miss</span>'
        '</div>'
    )

    chart_card_html = (
        '<section class="eh-card">'
        '<div class="eh-card-head">'
        '<div class="left-group"><span class="roman">I</span><h3>EPS: actual vs. estimate</h3></div>'
        + chart_legend
        + '</div>'
        '<div style="padding:12px 16px 8px">' + svg_html + '</div>'
        '</section>'
    )

    table_card_html = (
        '<section class="eh-card" style="overflow:hidden">'
        '<div class="eh-card-head">'
        '<div class="left-group"><span class="roman">II</span><h3>Quarterly detail</h3></div>'
        '<span class="hint">Most recent first · ' + str(n_total) + ' quarters</span>'
        '</div>'
        + stat_strip_html
        + '<table class="eh-table">'
        '<thead><tr>'
        '<th>Quarter</th>'
        '<th class="r">EPS Est</th>'
        '<th class="r">EPS Actual</th>'
        '<th class="r">Surprise $</th>'
        '<th class="r">Surprise %</th>'
        '<th class="c">Result</th>'
        '</tr></thead>'
        '<tbody>' + table_rows_html + '</tbody>'
        '</table>'
        '</section>'
    )

    foot_html = (
        '<div class="va-foot">'
        '<span>Earnings history from yfinance. Surprise % relative to analyst consensus at report time.</span>'
        + ('<span style="font-family:IBM Plex Mono,monospace;color:#C2AA7A">Next: ' + next_date + '</span>' if next_date else '')
        + '</div>'
    )

    body = (
        ctx_html
        + '<div class="eh-body">'
        + lede_html
        + chart_card_html
        + table_card_html
        + foot_html
        + '</div>'
    )

    _ROOT = (
        "<style>*,*::before,*::after{box-sizing:border-box}"
        ":root{"
        "--ink-0:#0B0E13;--ink-1:#11151C;--ink-2:#181D26;--ink-3:#222934;--ink-4:#2C3340;"
        "--line-1:#232934;--line-2:#2E3645;--line-3:#3D4658;"
        "--fg-1:#F2ECDC;--fg-2:#C7C0AE;--fg-3:#8E8676;--fg-4:#5E5849;"
        "--brass:#C2AA7A;--brass-bright:#DCC79E;--brass-deep:#8F7A50;--brass-ink:#17120A;"
        "--oxford:#1F3D5C;--oxford-light:#2E5A87;"
        "--positive:#4F8C5E;--positive-bg:#15241A;--negative:#B5494B;--negative-bg:#2A1517;"
        "--warning:#C49545;--warning-bg:#2A1F0F;--info:#4A78B5;--info-bg:#11202E;"
        "--font-display:'EB Garamond',Georgia,serif;"
        "--font-sans:'IBM Plex Sans','Helvetica Neue',system-ui,sans-serif;"
        "--font-mono:'IBM Plex Mono','SF Mono',Menlo,monospace;"
        "--fs-12:0.75rem;--fs-13:0.8125rem;--fs-14:0.875rem;--fs-16:1rem;--fs-18:1.125rem;"
        "--fs-20:1.25rem;--fs-24:1.5rem;--fs-30:1.875rem;--fs-38:2.375rem;"
        "--tr-wider:0.12em;--tr-wide:0.04em;--tr-tight:-0.02em;"
        "--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;"
        "--r-1:2px;--r-2:4px;--r-3:6px;--r-full:999px;"
        "--shadow-1:0 1px 3px rgba(0,0,0,0.4);"
        "}"
        "html,body{margin:0;padding:0;background:var(--ink-0);color:var(--fg-2);"
        "font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}"
        "</style>"
    )

    doc = (
        "<!doctype html><html><head><meta charset='utf-8'>"
        "<link rel='preconnect' href='https://fonts.googleapis.com'>"
        "<link href='https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500"
        "&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap'"
        " rel='stylesheet'>"
        + _ROOT
        + _KR_CSS + _EH_CSS
        + "</head><body>"
        + body
        + "</body></html>"
    )

    total_height = 1500 + n_total * 52
    components.html(doc, height=total_height, scrolling=False)


# ── Historical Ratios ────────────────────────────────────────────────────────

_HIST_RATIO_OPTIONS = {
    "P/E": ("peRatio", "priceToEarningsRatio", None),
    "P/B": ("priceToBookRatio", None, None),
    "P/S": ("priceToSalesRatio", None, None),
    "EV/EBITDA": ("enterpriseValueMultiple", "evToEBITDA", None),
    "Net Margin": ("netProfitMargin", None, "pct"),
    "Operating Margin": ("operatingProfitMargin", None, "pct"),
    "Gross Margin": ("grossProfitMargin", None, "pct"),
    "ROE": ("returnOnEquity", None, "pct"),
    "ROA": ("returnOnAssets", None, "pct"),
    "Debt/Equity": ("debtEquityRatio", None, None),
}

_CHART_COLORS = [
    "#C2AA7A", "#C49545", "#4F8C5E", "#B5494B",
    "#9b59b6", "#1abc9c", "#f39c12", "#e67e22",
]


def _extract_hist_series(rows: list[dict], primary: str, alt: str | None) -> dict[str, float]:
    """Extract {year: value} from FMP historical rows."""
    out = {}
    for row in rows:
        date = str(row.get("date", ""))[:4]
        val = row.get(primary)
        if val is None and alt:
            val = row.get(alt)
        if val is not None:
            try:
                out[date] = float(val)
            except (TypeError, ValueError):
                pass
    return out


_KH_CSS = """<style>
.kh-body{padding:var(--sp-5) var(--sp-6) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5);flex:1}
.kh-lede{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-5);align-items:stretch;background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);padding:var(--sp-5)}
.kh-lede .left{display:flex;flex-direction:column;gap:8px}
.kh-lede .ttl{font-family:var(--font-display);font-size:var(--fs-30);font-weight:500;letter-spacing:-0.01em;line-height:1.1;color:var(--fg-1);margin:4px 0 0;max-width:40ch}
.kh-lede .sub{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-2);line-height:1.55;max-width:60ch}
.kh-lede .right{display:flex;flex-direction:column;gap:var(--sp-3);align-self:end;align-items:flex-end}
.kh-legend{display:flex;gap:var(--sp-4);font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-2);align-items:center}
.kh-legend>span{white-space:nowrap}
.kh-legend .sw{display:inline-block;width:18px;height:3px;border-radius:999px;vertical-align:middle;margin-right:6px}
.kh-legend .sw.subj{background:var(--brass-bright)}
.kh-window{display:flex;align-items:center;gap:var(--sp-3)}
.kh-window .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600}
.kh-window .seg{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line-2);background:var(--ink-2);border-radius:var(--r-1)}
.kh-window .seg button{font-family:var(--font-mono);font-size:var(--fs-12);background:transparent;border:none;color:var(--fg-3);padding:4px 10px;cursor:pointer;border-radius:var(--r-1);white-space:nowrap}
.kh-window .seg button.active{background:var(--ink-3);color:var(--fg-1);box-shadow:inset 0 0 0 1px var(--line-3)}
.kh-hero{background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.kh-hero-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-1);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--sp-5)}
.kh-hero-head .left{display:flex;flex-direction:column;gap:2px}
.kh-hero-head h3{font-family:var(--font-display);font-size:var(--fs-24);font-weight:500;margin:0;letter-spacing:-0.01em;color:var(--fg-1)}
.kh-hero-head h3 .kind{font-family:var(--font-display);font-style:italic;font-weight:400;color:var(--fg-3);font-size:var(--fs-18)}
.kh-stats{display:flex;gap:var(--sp-5)}
.kh-stats .cell{display:flex;flex-direction:column;gap:2px}
.kh-stats .cell .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600;white-space:nowrap}
.kh-stats .cell .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-18);color:var(--fg-1);font-weight:500}
.kh-stats .cell .d{font-family:var(--font-mono);font-size:11px}
.kh-stats .cell .d.pos{color:var(--positive)}.kh-stats .cell .d.neg{color:var(--negative)}
.kh-chart-wrap{padding:var(--sp-4) var(--sp-5);background:linear-gradient(180deg,transparent 0%,rgba(194,170,122,0.02) 100%)}
.kh-chart-svg{display:block;width:100%;height:300px}
.kh-matrix{background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.kh-matrix-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-1);display:flex;justify-content:space-between;align-items:baseline}
.kh-matrix-head h3{font-family:var(--font-display);font-size:var(--fs-20);font-weight:500;margin:0;color:var(--fg-1)}
.kh-matrix-head .hint{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-3)}
.kh-matrix-grid{display:grid;align-items:center;border-bottom:1px solid var(--line-1);cursor:pointer;transition:background .08s ease}
.kh-matrix-grid:last-child{border-bottom:none}
.kh-matrix-grid:hover{background:rgba(194,170,122,0.04)}
.kh-matrix-grid.active{background:rgba(194,170,122,0.08);box-shadow:inset 3px 0 0 var(--brass)}
.kh-matrix-grid.head{background:var(--ink-2);font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-3);font-weight:600;cursor:default}
.kh-matrix-grid.head:hover{background:var(--ink-2)}
.kh-matrix-grid.head span{padding:8px var(--sp-3)}
.kh-matrix-grid>.lbl,.kh-matrix-grid>.cell{padding:9px var(--sp-3)}
.kh-matrix-grid>.lbl{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-1);padding-left:var(--sp-5)}
.kh-matrix-grid .cell{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-13);color:var(--fg-2);text-align:right}
.kh-matrix-grid .cell.last{color:var(--fg-1);font-weight:600}
.kh-matrix-section{padding:14px var(--sp-5) 6px;font-family:var(--font-display);font-style:italic;font-size:var(--fs-16);color:var(--brass);background:var(--ink-2);border-bottom:1px solid var(--line-1);font-weight:400;letter-spacing:-0.01em}
</style>"""


def _render_historical_ratios(ticker: str):
    info = get_company_info(ticker)
    with st.spinner("Loading historical ratios…"):
        hist_rows = get_historical_ratios(ticker, limit=10)
    if not hist_rows:
        st.info("Historical ratio data unavailable.")
        return
    rows_sorted = sorted(hist_rows, key=lambda r: str(r.get("date", "")))
    periods = []
    for r in rows_sorted:
        y = str(r.get("date", ""))[:4]
        periods.append("FY" + y[2:] if len(y) == 4 else y)

    # ── Sector median data from TTM peer ratios ───────────────────────────────
    peers_raw = get_peers(ticker)
    peers = [p for p in (peers_raw or []) if p.upper() != ticker.upper()][:6]
    peer_ratios_list = get_ratios_for_tickers(peers) if peers else []

    def _peer_median(field_ttm):
        vals = []
        for pr in peer_ratios_list:
            v = pr.get(field_ttm)
            if v is not None:
                try:
                    vals.append(float(v))
                except (TypeError, ValueError):
                    pass
        if not vals:
            return None
        vals.sort()
        m = len(vals)
        return vals[m // 2] if m % 2 else (vals[m // 2 - 1] + vals[m // 2]) / 2

    PEER_FIELD_MAP = {
        "pe":    ("peRatioTTM",                 1.0),
        "evebt": ("enterpriseValueMultipleTTM",  1.0),
        "pb":    ("priceToBookRatioTTM",         1.0),
        "ps":    ("priceToSalesRatioTTM",        1.0),
        "gm":    ("grossProfitMarginTTM",        100.0),
        "om":    ("operatingProfitMarginTTM",    100.0),
        "nm":    ("netProfitMarginTTM",          100.0),
        "roe":   ("returnOnEquityTTM",           100.0),
        "roa":   ("returnOnAssetsTTM",           100.0),
        "de":    ("debtToEquityRatioTTM",        1.0),
        "cr":    ("currentRatioTTM",             1.0),
        "ic":    ("interestCoverageRatioTTM",    1.0),
        "divy":  ("dividendYieldTTM",            100.0),
    }

    SERIES_DEFS = [
        ("pe",    "Valuation",     "P / E",             "x", "peRatio"),
        ("evebt", "Valuation",     "EV / EBITDA",       "x", "enterpriseValueMultiple"),
        ("pb",    "Valuation",     "P / Book",          "x", "priceToBookRatio"),
        ("ps",    "Valuation",     "P / Sales",         "x", "priceToSalesRatio"),
        ("gm",    "Profitability", "Gross margin",      "%", "grossProfitMargin"),
        ("om",    "Profitability", "Operating margin",  "%", "operatingProfitMargin"),
        ("nm",    "Profitability", "Net margin",        "%", "netProfitMargin"),
        ("roe",   "Profitability", "Return on equity",  "%", "returnOnEquity"),
        ("roa",   "Profitability", "Return on assets",  "%", "returnOnAssets"),
        ("de",    "Health",        "Debt / Equity",     "x", "debtEquityRatio"),
        ("cr",    "Health",        "Current ratio",     "x", "currentRatio"),
        ("ic",    "Health",        "Interest coverage", "x", "interestCoverage"),
        ("divy",  "Cash returns",  "Dividend yield",    "%", "dividendYield"),
    ]

    series_data = []
    for key, group, lbl, kind, field in SERIES_DEFS:
        vals = []
        for r in rows_sorted:
            v = r.get(field)
            if v is not None:
                try:
                    fv = float(v)
                    vals.append(round(fv * 100, 4) if kind == "%" else round(fv, 4))
                except (TypeError, ValueError):
                    vals.append(None)
            else:
                vals.append(None)
        if len([v for v in vals if v is not None]) < 2:
            continue
        sector_ttm = None
        if key in PEER_FIELD_MAP:
            pf, pm = PEER_FIELD_MAP[key]
            pm_val = _peer_median(pf)
            if pm_val is not None:
                sector_ttm = round(pm_val * pm, 4)
        series_data.append({
            "key": key,
            "group": group,
            "lbl": lbl,
            "kind": kind,
            "subj": vals,
            "sector_ttm": sector_ttm,
        })

    if not series_data:
        st.info("No plottable ratio data available.")
        return

    # ── Context strip data ────────────────────────────────────────────────────
    price = get_latest_price(ticker)
    prev_close = info.get("previousClose") if info else None
    if price and prev_close and prev_close > 0:
        chg_pct = (price - prev_close) / prev_close * 100
        arrow = "▲" if chg_pct >= 0 else "▼"
        sign = "+" if chg_pct >= 0 else ""
        chg_str = arrow + " " + sign + str(round(chg_pct, 2)) + "%"
        chg_cls = "chg-pos" if chg_pct >= 0 else "chg-neg"
    else:
        chg_str, chg_cls = "—", ""
    sym = ticker.upper()
    name = _h((info.get("longName") or info.get("shortName") or sym) if info else sym)
    _XMAP = {"NYQ": "NYSE", "NMS": "NASDAQ", "NGM": "NASDAQ", "NCM": "NASDAQ", "ASE": "AMEX"}
    raw_x = (info.get("exchange", "") if info else "") or ""
    exchange = _h(_XMAP.get(raw_x, raw_x) or "—")
    price_str = ("$" + str(round(price, 2))) if price else "—"

    n_periods = len(periods)
    n_rows = len(series_data)
    n_groups = len({s["group"] for s in series_data})
    total_height = 48 + 24 + 200 + 24 + 460 + 24 + (68 + n_groups * 50 + n_rows * 42) + 24 + 60 + 80

    data_json = json_for_script({"periods": periods, "series": series_data})

    ctx_html = (
        '<div class="val-ctx">'
        + '<span class="sym">' + _h(sym) + '</span>'
        + '<span class="name">' + name + '</span>'
        + '<span class="eyebrow-ctx" style="margin-left:12px">Valuation · Historical Ratios</span>'
        + '<div class="meta">'
        + '<span>' + exchange + '</span>'
        + '<span class="px num">' + price_str + '</span>'
        + '<span class="' + chg_cls + ' num">' + chg_str + '</span>'
        + '</div></div>'
    )

    lede_html = (
        '<section class="kh-lede">'
        + '<div class="left">'
        + '<span class="eyebrow-lbl">Drift</span>'
        + '<h2 class="ttl">' + str(n_periods) + ' periods of every ratio — pick a line, the heatmap follows</h2>'
        + '<p class="sub">Annual ratios from ' + periods[0] + ' through ' + periods[-1] + '. '
        + 'The subject line plots in champagne; dashed oxford is the sector median TTM. '
        + 'Clicking a row in the matrix brings that series up to the hero chart. '
        + 'Cell shading shows each ratio&#39;s relative position within its own history.</p>'
        + '</div>'
        + '<div class="right">'
        + '<div class="kh-legend">'
        + '<span><span class="sw subj"></span>' + _h(sym) + '</span>'
        + '<span><span class="sw sect"></span>Sector median</span>'
        + '</div>'
        + '<div class="kh-window">'
        + '<span class="lbl">Window</span>'
        + '<div class="seg">'
        + '<button onclick="setWindow(' + str(n_periods) + ',this)" class="active">All</button>'
        + '<button onclick="setWindow(5,this)">5 yr</button>'
        + '<button onclick="setWindow(3,this)">3 yr</button>'
        + '</div>'
        + '</div>'
        + '</div>'
        + '</section>'
    )

    hero_html = (
        '<section class="kh-hero">'
        '<div class="kh-hero-head">'
        '<div class="left">'
        '<span class="eyebrow-lbl" id="kh-hero-group"></span>'
        '<h3 id="kh-hero-title"></h3>'
        '</div>'
        '<div class="kh-stats">'
        '<div class="cell"><span class="lbl">Latest</span><span class="v num" id="kh-stat-latest">—</span></div>'
        '<div class="cell"><span class="lbl" id="kh-stat-n-lbl">Avg</span><span class="v num" id="kh-stat-avg">—</span><span class="d num" id="kh-stat-davg"></span></div>'
        '<div class="cell"><span class="lbl">Range</span><span class="v num" id="kh-stat-range">—</span></div>'
        '<div class="cell"><span class="lbl">vs Sector</span><span class="v num" id="kh-stat-sector">—</span><span class="d num" id="kh-stat-dsector"></span></div>'
        '</div>'
        '</div>'
        '<div class="kh-chart-wrap"><div id="kh-chart"></div></div>'
        '</section>'
    )

    matrix_html = (
        '<section class="kh-matrix">'
        '<div class="kh-matrix-head">'
        '<h3>Ratio matrix · ' + str(n_periods) + ' periods</h3>'
        '<span class="hint">Click a row to chart it · cell shading shows relative position within row history</span>'
        '</div>'
        '<div class="kh-matrix-grid head" id="kh-matrix-head-row"></div>'
        '<div id="kh-matrix-body"></div>'
        '</section>'
    )

    foot_html = (
        '<div class="va-foot">'
        '<span>Annual ratios computed from yfinance financial statements. '
        'Price-based multiples use average price in a ±45-day window around each fiscal year-end. '
        'Sector median is the TTM peer-set median across up to 6 comparable companies.</span>'
        '</div>'
    )

    body = ctx_html + '<div class="kh-body">' + lede_html + hero_html + matrix_html + foot_html + '</div>'

    _JS_TEMPLATE = (
        'const DATA=__DATA_JSON__;'
        'const PERIODS=DATA.periods;'
        'const SERIES=DATA.series;'
        'let selKey=SERIES[0].key;'
        'let winLen=PERIODS.length;'
        'function getSlice(){'
        '  const n=Math.min(winLen,PERIODS.length);'
        '  return{periods:PERIODS.slice(-n),series:SERIES.map(s=>({...s,subj:s.subj.slice(-n)}))};'
        '}'
        'function fmtV(v,kind){'
        '  if(v===null||v===undefined||isNaN(v))return"—";'
        '  if(kind==="%")return v.toFixed(1)+"%";'
        '  return v.toFixed(1)+"×";'
        '}'
        'function heatTone(v,arr){'
        '  const clean=arr.filter(x=>x!==null&&!isNaN(x));'
        '  if(clean.length<2)return"";'
        '  const mn=Math.min(...clean),mx=Math.max(...clean);'
        '  const t=(v-mn)/((mx-mn)||1);'
        '  const a=(0.04+t*0.32).toFixed(3);'
        '  return"rgba(194,170,122,"+a+")";'
        '}'
        'function drawChart(){'
        '  const{periods,series}=getSlice();'
        '  const s=series.find(x=>x.key===selKey)||series[0];'
        '  const subj=s.subj;'
        '  const W=1100,H=300,Pl=60,Pr=40,Pt=24,Pb=36;'
        '  const clean=subj.filter(x=>x!==null);'
        '  if(!clean.length)return;'
        '  let yMn=Math.min(...clean),yMx=Math.max(...clean);'
        '  if(s.sector_ttm!==null&&s.sector_ttm!==undefined){'
        '    yMn=Math.min(yMn,s.sector_ttm);'
        '    yMx=Math.max(yMx,s.sector_ttm);'
        '  }'
        '  const pad=(yMx-yMn)*0.14||1;'
        '  yMn-=pad;yMx+=pad;'
        '  if(yMn>0&&yMn<pad*2)yMn=0;'
        '  const xAt=i=>Pl+(i/Math.max(periods.length-1,1))*(W-Pl-Pr);'
        '  const yAt=v=>Pt+(1-(v-yMn)/(yMx-yMn))*(H-Pt-Pb);'
        '  const pts=subj.map((v,i)=>({x:xAt(i),y:v!==null?yAt(v):null,v}));'
        '  let segs=[],cur=[];'
        '  pts.forEach(p=>{if(p.y!==null){cur.push(p);}else{if(cur.length){segs.push(cur);cur=[];}}});'
        '  if(cur.length)segs.push(cur);'
        '  const lp=segs.map(seg=>seg.map((p,i)=>(i===0?"M":"L")+p.x.toFixed(1)+" "+p.y.toFixed(1)).join(" ")).join(" ");'
        '  const fp=pts.find(p=>p.y!==null);'
        '  const lsP=[...pts].reverse().find(p=>p.y!==null);'
        '  const ap=fp&&lsP&&lp?lp+" L"+lsP.x.toFixed(1)+" "+(H-Pb)+" L"+fp.x.toFixed(1)+" "+(H-Pb)+" Z":"";'
        '  const ticks=[];'
        '  for(let i=0;i<5;i++)ticks.push(yMn+(yMx-yMn)*(i/4));'
        '  let svg=\'<defs><linearGradient id="kh-grad" x1="0" x2="0" y1="0" y2="1">\';'
        '  svg+=\'<stop offset="0%" stop-color="var(--brass)" stop-opacity="0.18"/>\';'
        '  svg+=\'<stop offset="100%" stop-color="var(--brass)" stop-opacity="0"/>\';'
        '  svg+=\'</linearGradient></defs>\';'
        '  ticks.forEach(t=>{'
        '    const y=yAt(t).toFixed(1);'
        '    svg+=\'<line x1="\'+Pl+\'" x2="\'+(W-Pr)+\'" y1="\'+y+\'" y2="\'+y+\'" stroke="var(--line-1)" stroke-width="1"/>\';'
        '    svg+=\'<text x="\'+(Pl-8)+\'" y="\'+(parseFloat(y)+3).toFixed(1)+\'" font-family="var(--font-mono)" font-size="10" fill="var(--fg-3)" text-anchor="end">\'+fmtV(t,s.kind)+\'</text>\';'
        '  });'
        '  periods.forEach((p,i)=>{'
        '    svg+=\'<text x="\'+xAt(i).toFixed(1)+\'" y="\'+(H-12)+\'" font-family="var(--font-mono)" font-size="11" fill="var(--fg-3)" text-anchor="middle">\'+p+\'</text>\';'
        '  });'
        '  if(s.sector_ttm!==null&&s.sector_ttm!==undefined){'
        '    const sy=yAt(s.sector_ttm);'
        '    const x0=Pl,x1=W-Pr;'
        '    svg+=\'<line x1="\'+x0+\'" x2="\'+x1+\'" y1="\'+sy.toFixed(1)+\'" y2="\'+sy.toFixed(1)+\'" stroke="var(--oxford-light)" stroke-width="1.5" stroke-dasharray="4,4"/>\';'
        '    svg+=\'<circle cx="\'+x1+\'" cy="\'+sy.toFixed(1)+\'" r="3" fill="var(--oxford-light)"/>\';'
        '    svg+=\'<text x="\'+(x1-4)+\'" y="\'+(sy-6).toFixed(1)+\'" font-family="var(--font-mono)" font-size="9" fill="var(--oxford-light)" text-anchor="end">sector</text>\';'
        '  }'
        '  if(ap)svg+=\'<path d="\'+ap+\'" fill="url(#kh-grad)"/>\';'
        '  if(lp)svg+=\'<path d="\'+lp+\'" stroke="var(--brass-bright)" stroke-width="2" fill="none" stroke-linejoin="round" stroke-linecap="round"/>\';'
        '  let lastVI=-1;'
        '  for(let k=pts.length-1;k>=0;k--){if(pts[k].y!==null){lastVI=k;break;}}'
        '  pts.forEach((p,idx)=>{'
        '    if(p.y===null)return;'
        '    svg+=\'<circle cx="\'+p.x.toFixed(1)+\'" cy="\'+p.y.toFixed(1)+\'" r="3" fill="var(--brass-bright)" stroke="var(--ink-1)" stroke-width="1.5"/>\';'
        '    if(idx===lastVI)svg+=\'<text x="\'+p.x.toFixed(1)+\'" y="\'+(p.y-10).toFixed(1)+\'" font-family="var(--font-mono)" font-size="11" fill="var(--fg-1)" text-anchor="end" font-weight="500">\'+fmtV(p.v,s.kind)+\'</text>\';'
        '  });'
        '  document.getElementById("kh-chart").innerHTML=\'<svg viewBox="0 0 \'+W+\' \'+H+\'" class="kh-chart-svg" preserveAspectRatio="none">\'+svg+\'</svg>\';'
        '  const nonNull=subj.filter(x=>x!==null);'
        '  const latest=nonNull[nonNull.length-1];'
        '  const avg=nonNull.reduce((a,b)=>a+b,0)/nonNull.length;'
        '  const hi=Math.max(...nonNull),lo=Math.min(...nonNull);'
        '  const dAvg=avg!==0?((latest-avg)/Math.abs(avg))*100:0;'
        '  const n=periods.length;'
        '  document.getElementById("kh-hero-group").textContent=s.group;'
        '  document.getElementById("kh-hero-title").innerHTML=s.lbl+\'<span class="kind"> · \'+(s.kind==="%"?"percent":"multiple")+"</span>";'
        '  document.getElementById("kh-stat-latest").textContent=fmtV(latest,s.kind);'
        '  document.getElementById("kh-stat-n-lbl").textContent=n+"-yr avg";'
        '  document.getElementById("kh-stat-avg").textContent=fmtV(avg,s.kind);'
        '  const davgEl=document.getElementById("kh-stat-davg");'
        '  davgEl.textContent=(dAvg>=0?"+":"")+dAvg.toFixed(0)+"%";'
        '  davgEl.className="d num "+(dAvg>=0?"pos":"neg");'
        '  document.getElementById("kh-stat-range").textContent=fmtV(lo,s.kind)+" — "+fmtV(hi,s.kind);'
        '  const secEl=document.getElementById("kh-stat-sector");'
        '  const dsecEl=document.getElementById("kh-stat-dsector");'
        '  if(s.sector_ttm!==null&&s.sector_ttm!==undefined){'
        '    secEl.textContent=fmtV(s.sector_ttm,s.kind);'
        '    const dSec=s.sector_ttm!==0?((latest-s.sector_ttm)/Math.abs(s.sector_ttm))*100:0;'
        '    dsecEl.textContent=(dSec>=0?"+":"")+dSec.toFixed(0)+"%";'
        '    dsecEl.className="d num "+(dSec>=0?"pos":"neg");'
        '  }else{'
        '    secEl.textContent="—";'
        '    dsecEl.textContent="";'
        '  }'
        '}'
        'function renderMatrix(){'
        '  const{periods,series}=getSlice();'
        '  const n=periods.length;'
        '  const col="1.6fr "+"1fr ".repeat(n)+"1fr 0.8fr";'
        '  const headRow=document.getElementById("kh-matrix-head-row");'
        '  headRow.style.gridTemplateColumns=col;'
        '  let hh=\'<span class="lbl" style="padding-left:var(--sp-5)">Ratio</span>\';'
        '  periods.forEach(p=>{hh+=\'<span class="r num" style="text-align:right;padding:8px var(--sp-3)">\'+p+\'</span>\';});'
        '  hh+=\'<span class="r" style="text-align:right;padding:8px var(--sp-3)">Sector TTM</span>\';'
        '  hh+=\'<span class="r" style="text-align:right;padding:8px var(--sp-3)">Δ vs sector</span>\';'
        '  headRow.innerHTML=hh;'
        '  const groups=[...new Set(series.map(s=>s.group))];'
        '  let html="";'
        '  groups.forEach(group=>{'
        '    html+=\'<div class="kh-matrix-section">\'+group+\'</div>\';'
        '    series.filter(s=>s.group===group).forEach(s=>{'
        '      const act=s.key===selKey?" active":"";'
        '      html+=\'<div class="kh-matrix-grid\'+act+\'" style="grid-template-columns:\'+col+\'" onclick="selectSeries(\\\'"+s.key+"\\\')">\';'
        '      html+=\'<span class="lbl">\'+s.lbl+\'</span>\';'
        '      s.subj.forEach((v,i)=>{'
        '        const last=i===n-1?" last":"";'
        '        const bg=v!==null?" style=\\"background:"+heatTone(v,s.subj)+"\\"":\"\";'
        '        html+=\'<span class="cell num\'+last+\'"\'+bg+">"+(v!==null?fmtV(v,s.kind):"—")+"</span>";'
        '      });'
        '      if(s.sector_ttm!==null&&s.sector_ttm!==undefined){'
        '        const lastSubj=s.subj.filter(x=>x!==null);'
        '        const lv=lastSubj.length?lastSubj[lastSubj.length-1]:null;'
        '        html+=\'<span class="cell num sector">\'+fmtV(s.sector_ttm,s.kind)+\'</span>\';'
        '        if(lv!==null){'
        '          const d=s.sector_ttm!==0?((lv-s.sector_ttm)/Math.abs(s.sector_ttm))*100:0;'
        '          html+=\'<span class="cell num d \'+( d>=0?"pos":"neg")+\'">\'+( d>=0?"+":"")+d.toFixed(0)+"%</span>";'
        '        }else{html+=\'<span class="cell num">—</span>\';}'
        '      }else{'
        '        html+=\'<span class="cell num">—</span><span class="cell num">—</span>\';'
        '      }'
        '      html+="</div>";'
        '    });'
        '  });'
        '  document.getElementById("kh-matrix-body").innerHTML=html;'
        '}'
        'function selectSeries(key){'
        '  selKey=key;'
        '  drawChart();'
        '  renderMatrix();'
        '}'
        'function setWindow(n,btn){'
        '  winLen=n;'
        '  document.querySelectorAll(".seg button").forEach(b=>b.classList.remove("active"));'
        '  btn.classList.add("active");'
        '  drawChart();'
        '  renderMatrix();'
        '}'
        'drawChart();'
        'renderMatrix();'
    )
    js = _JS_TEMPLATE.replace('__DATA_JSON__', data_json)

    kh_css_extra = (
        '<style>'
        + '.kh-legend .sw.sect{'
        + 'background:transparent;'
        + 'border-bottom:2px dashed var(--oxford-light);'
        + 'height:0px;line-height:0;'
        + 'vertical-align:middle;'
        + 'display:inline-block;'
        + 'width:18px;margin-right:6px;'
        + '}'
        + '.kh-matrix-grid .cell.sector{color:var(--oxford-light)}'
        + '.kh-matrix-grid .cell.d.pos{color:var(--positive)}'
        + '.kh-matrix-grid .cell.d.neg{color:var(--negative)}'
        + '</style>'
    )

    doc = (
        "<!doctype html><html><head><meta charset='utf-8'>"
        + "<link rel='preconnect' href='https://fonts.googleapis.com'>"
        + "<link href='https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=IBM+Plex+Mono:wght@300;400;500&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap' rel='stylesheet'>"
        + "<style>*,*::before,*::after{box-sizing:border-box}"
        + ":root{"
        + "--ink-0:#0B0E13;--ink-1:#11151C;--ink-2:#181D26;--ink-3:#222934;--ink-4:#2C3340;"
        + "--line-1:#232934;--line-2:#2E3645;--line-3:#3D4658;"
        + "--fg-1:#F2ECDC;--fg-2:#C7C0AE;--fg-3:#8E8676;--fg-4:#5E5849;"
        + "--brass:#C2AA7A;--brass-bright:#DCC79E;--brass-deep:#8F7A50;"
        + "--oxford:#1F3D5C;--oxford-light:#2E5A87;"
        + "--positive:#4F8C5E;--negative:#B5494B;"
        + "--font-display:'EB Garamond',Georgia,serif;"
        + "--font-sans:'IBM Plex Sans','Helvetica Neue',system-ui,sans-serif;"
        + "--font-mono:'IBM Plex Mono','SF Mono',Menlo,monospace;"
        + "--fs-12:0.75rem;--fs-13:0.8125rem;--fs-14:0.875rem;--fs-16:1rem;--fs-18:1.125rem;--fs-20:1.25rem;--fs-24:1.5rem;--fs-30:1.875rem;"
        + "--tr-wider:0.12em;--tr-wide:0.04em;--tr-snug:-0.01em;"
        + "--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;"
        + "--r-1:2px;--r-2:4px;--r-3:6px;--r-full:999px;"
        + "}"
        + "html,body{margin:0;padding:0;background:var(--ink-0);color:var(--fg-2);font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}"
        + "</style>"
        + _KR_CSS + _KH_CSS + kh_css_extra
        + "</head><body>"
        + body
        + "<script>" + js + "</script>"
        + "</body></html>"
    )
    components.html(doc, height=total_height, scrolling=False)



# ── Forward Estimates ────────────────────────────────────────────────────────

_FE_CSS = """<style>
.fe-body{padding:var(--sp-5) var(--sp-5) var(--sp-7);display:flex;flex-direction:column;gap:var(--sp-5)}
.fe-lede{display:grid;grid-template-columns:1.6fr 1fr;gap:var(--sp-5);align-items:stretch;background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);padding:var(--sp-5)}
.fe-lede .left{display:flex;flex-direction:column;gap:8px}
.fe-lede .ttl{font-family:var(--font-display);font-size:var(--fs-30);font-weight:500;letter-spacing:-0.01em;line-height:1.1;color:var(--fg-1);margin:4px 0 0;max-width:40ch}
.fe-lede .sub{font-family:var(--font-sans);font-size:var(--fs-13);color:var(--fg-2);line-height:1.55;max-width:64ch}
.fe-lede .right{display:flex;flex-direction:column;gap:var(--sp-2)}
.fe-source{background:var(--ink-2);border:1px solid var(--line-1);border-radius:var(--r-2);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:2px}
.fe-source .lbl{font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-4);font-weight:600}
.fe-source .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-14);color:var(--fg-1);font-weight:500}
.fe-source .cap{font-family:var(--font-mono);font-size:10px;color:var(--fg-4)}
.tab-row{display:flex;gap:var(--sp-2)}
.tab-pill{font-family:var(--font-sans);font-size:11px;text-transform:uppercase;letter-spacing:0.06em;padding:4px 12px;border-radius:var(--r-full);cursor:pointer;border:none}
.tab-pill.active{background:var(--brass);color:var(--brass-ink);font-weight:600}
.tab-pill.inactive{background:var(--ink-2);border:1px solid var(--line-2);color:var(--fg-3)}
.fe-card{background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.fe-card-head{padding:var(--sp-4) var(--sp-5);border-bottom:1px solid var(--line-1);display:flex;justify-content:space-between;align-items:baseline}
.fe-card-head .left-group{display:flex;align-items:baseline;gap:var(--sp-2)}
.fe-card-head .roman{font-family:var(--font-display);font-style:italic;font-size:var(--fs-20);color:var(--brass);font-weight:400;margin-right:6px}
.fe-card-head h3{font-family:var(--font-display);font-size:var(--fs-20);font-weight:500;letter-spacing:-0.01em;color:var(--fg-1);margin:0}
.fe-card-head .hint{font-family:var(--font-mono);font-size:var(--fs-12);color:var(--fg-3)}
.fe-chart-wrap{padding:var(--sp-3) var(--sp-4) 0}
#rev-chart{width:100%;height:280px}
.chart-legend{display:flex;gap:var(--sp-5);padding:var(--sp-2) var(--sp-4) var(--sp-3)}
.legend-item{display:flex;align-items:center;gap:7px;font-family:var(--font-sans);font-size:11px;color:var(--fg-3)}
.legend-swatch{width:18px;height:2px;flex-shrink:0}
.legend-swatch.solid{background:var(--brass)}
.legend-swatch.dashed{background:transparent;border-bottom:2px dashed var(--brass)}
.legend-swatch.band{background:rgba(31,61,92,0.7);height:8px;border-radius:2px}
.fe-readout{font-family:var(--font-display);font-style:italic;font-size:var(--fs-14);color:var(--fg-2);padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-1);line-height:1.55}
.fe-table-card{background:var(--ink-1);border:1px solid var(--line-1);border-radius:var(--r-3);overflow:hidden}
.fe-table-head-section{padding:var(--sp-5) var(--sp-5) 0}
table.fe-table{width:100%;border-collapse:collapse}
table.fe-table thead th{background:var(--ink-2);font-family:var(--font-sans);font-size:10px;text-transform:uppercase;letter-spacing:var(--tr-wider);color:var(--fg-4);padding:8px var(--sp-4);text-align:right;font-weight:600;border-bottom:1px solid var(--line-1)}
table.fe-table thead th:first-child{text-align:left}
table.fe-table tbody tr{border-bottom:1px solid var(--line-1)}
table.fe-table tbody tr:last-child{border-bottom:none}
table.fe-table tbody tr:hover{background:rgba(194,170,122,0.04)}
table.fe-table td{padding:10px var(--sp-4);font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--fs-13);color:var(--fg-2);text-align:right;vertical-align:middle}
table.fe-table td:first-child{text-align:left;color:var(--fg-1);font-weight:500}
.range-mini{display:inline-block;width:72px;height:20px;position:relative;vertical-align:middle}
.range-mini-track{position:absolute;width:72px;height:4px;top:8px;background:var(--ink-3);border-radius:2px}
.range-mini-band{position:absolute;height:4px;top:8px;background:rgba(31,61,92,0.55);border-radius:2px}
.range-mini-dot{position:absolute;width:7px;height:7px;top:6px;border-radius:50%;background:var(--brass);border:1.5px solid var(--ink-0)}
.info-banner{background:var(--ink-2);border-left:3px solid var(--oxford);color:var(--fg-3);font-family:var(--font-sans);font-size:var(--fs-12);padding:var(--sp-3) var(--sp-4);border-radius:0 var(--r-2) var(--r-2) 0;margin:var(--sp-4)}
</style>"""


def _render_forward_estimates(ticker: str):

    with st.spinner("Loading forward estimates…"):
        estimates = get_analyst_estimates(ticker)

    annual = estimates.get("annual", [])
    quarterly = estimates.get("quarterly", [])

    if not annual and not quarterly:
        st.info("Forward estimates unavailable. Requires FMP API key.")
        return

    def _parse_est_rows(rows):
        parsed = []
        for row in sorted(rows, key=lambda r: str(r.get("date", ""))):
            rev_avg = row.get("revenueAvg") or row.get("estimatedRevenueAvg")
            rev_lo = row.get("revenueLow") or row.get("estimatedRevenueLow")
            rev_hi = row.get("revenueHigh") or row.get("estimatedRevenueHigh")
            eps_avg = row.get("epsAvg") or row.get("estimatedEpsAvg")
            eps_lo = row.get("epsLow") or row.get("estimatedEpsLow")
            eps_hi = row.get("epsHigh") or row.get("estimatedEpsHigh")
            ebitda_avg = row.get("ebitdaAvg") or row.get("estimatedEbitdaAvg")
            n_analysts = (
                row.get("numAnalystsRevenue")
                or row.get("numAnalystsEps")
                or row.get("numberAnalystEstimatedRevenue")
                or row.get("numberAnalysts")
            )
            parsed.append({
                "date": str(row.get("date", "")),
                "rev_avg": rev_avg,
                "rev_lo": rev_lo,
                "rev_hi": rev_hi,
                "eps_avg": eps_avg,
                "eps_lo": eps_lo,
                "eps_hi": eps_hi,
                "ebitda_avg": ebitda_avg,
                "n_analysts": int(n_analysts) if n_analysts else 0,
            })
        return parsed

    def _range_bar(lo, avg, hi, lo_min, hi_max):
        if not lo or not hi or not avg:
            return '<span style="color:var(--fg-4)">—</span>'
        lo_f, avg_f, hi_f = float(lo), float(avg), float(hi)
        lo_min_f, hi_max_f = float(lo_min), float(hi_max)
        rng = hi_max_f - lo_min_f
        if rng <= 0:
            return '<span style="color:var(--fg-4)">—</span>'
        lo_pct = (lo_f - lo_min_f) / rng * 100
        hi_pct = (hi_f - lo_min_f) / rng * 100
        avg_pct = (avg_f - lo_min_f) / rng * 100
        return (
            '<div class="range-mini">'
            '<div class="range-mini-track"></div>'
            f'<div class="range-mini-band" style="left:{lo_pct:.1f}%;right:{100 - hi_pct:.1f}%"></div>'
            f'<div class="range-mini-dot" style="left:calc({avg_pct:.1f}% - 3.5px)"></div>'
            '</div>'
        )

    def _build_est_table_html(rows, is_annual=True):
        if not rows:
            return ""
        all_rev_lo = [r["rev_lo"] for r in rows if r.get("rev_lo")]
        all_rev_hi = [r["rev_hi"] for r in rows if r.get("rev_hi")]
        all_eps_lo = [r["eps_lo"] for r in rows if r.get("eps_lo")]
        all_eps_hi = [r["eps_hi"] for r in rows if r.get("eps_hi")]
        rev_lo_min = min(all_rev_lo) if all_rev_lo else None
        rev_hi_max = max(all_rev_hi) if all_rev_hi else None
        eps_lo_min = min(all_eps_lo) if all_eps_lo else None
        eps_hi_max = max(all_eps_hi) if all_eps_hi else None
        tbody = []
        for row in rows:
            period = row["date"][:4] if is_annual else row["date"][:7]
            rev_range = _range_bar(row.get("rev_lo"), row.get("rev_avg"), row.get("rev_hi"), rev_lo_min, rev_hi_max)
            rev_avg_str = fmt_large(row["rev_avg"]) if row.get("rev_avg") else "—"
            eps_range = _range_bar(row.get("eps_lo"), row.get("eps_avg"), row.get("eps_hi"), eps_lo_min, eps_hi_max)
            eps_avg_str = fmt_currency(row["eps_avg"]) if row.get("eps_avg") else "—"
            ebitda_str = fmt_large(row["ebitda_avg"]) if row.get("ebitda_avg") else "—"
            analysts_str = str(row["n_analysts"]) if row.get("n_analysts") else "—"
            tbody.append(
                '<tr>'
                '<td>' + period + '</td>'
                '<td>' + rev_range + '</td>'
                '<td class="num">' + rev_avg_str + '</td>'
                '<td>' + eps_range + '</td>'
                '<td class="num">' + eps_avg_str + '</td>'
                '<td class="num">' + ebitda_str + '</td>'
                '<td class="num">' + analysts_str + '</td>'
                '</tr>'
            )
        return "\n".join(tbody)

    annual_rows = _parse_est_rows(annual)
    quarterly_rows = _parse_est_rows(quarterly)

    # Historical revenue
    inc = get_income_statement(ticker)
    hist_rev = {}
    if inc is not None and not inc.empty and "Total Revenue" in inc.index:
        rev_series = inc.loc["Total Revenue"].dropna()
        for col in rev_series.index:
            yr = str(col)[:4]
            v = rev_series[col]
            if v and pd.notna(v):
                hist_rev[yr] = float(v) / 1e9
    hist_rev = dict(sorted(hist_rev.items()))

    # Lede stats
    next_year_rev = annual_rows[0].get("rev_avg") if annual_rows else None
    next_year_eps = annual_rows[0].get("eps_avg") if annual_rows else None
    next_year_period = annual_rows[0]["date"][:4] if annual_rows else "—"
    max_analysts = max((r.get("n_analysts") or 0) for r in annual_rows) if annual_rows else 0

    cagr = None
    if len(annual_rows) >= 2 and annual_rows[0].get("rev_avg") and annual_rows[-1].get("rev_avg"):
        n_years = len(annual_rows)
        cagr = (float(annual_rows[-1]["rev_avg"]) / float(annual_rows[0]["rev_avg"])) ** (1 / max(n_years - 1, 1)) - 1

    if cagr is not None:
        if cagr > 0.12:
            fwd_readout = f"Analysts project accelerating growth — revenue expected to compound at {cagr * 100:.0f}% annually over the forecast horizon."
        elif cagr > 0.05:
            fwd_readout = f"Steady expansion in view — consensus projects {cagr * 100:.0f}% annual revenue growth through {annual_rows[-1]['date'][:4] if annual_rows else 'end of period'}."
        elif cagr > 0:
            fwd_readout = f"Modest growth expected — analysts see {cagr * 100:.0f}% annual expansion with limited upside surprise potential."
        else:
            fwd_readout = "Analysts project revenue contraction or flat growth over the forecast period."
    else:
        fwd_readout = "Analyst estimates show the expected trajectory for revenue and earnings per share."

    # Chart data
    hist_years = list(hist_rev.keys())[-5:]
    hist_vals = [hist_rev[y] for y in hist_years]
    bridge_yr = hist_years[-1] if hist_years else None
    bridge_val = hist_vals[-1] if hist_vals else None
    fwd_years = [r["date"][:4] for r in annual_rows]
    fwd_avg = [float(r["rev_avg"]) / 1e9 if r["rev_avg"] else None for r in annual_rows]
    fwd_lo = [float(r["rev_lo"]) / 1e9 if r.get("rev_lo") else None for r in annual_rows]
    fwd_hi = [float(r["rev_hi"]) / 1e9 if r.get("rev_hi") else None for r in annual_rows]
    if bridge_yr and bridge_val:
        fwd_years = [bridge_yr] + fwd_years
        fwd_avg = [bridge_val] + fwd_avg
        fwd_lo = [bridge_val] + fwd_lo
        fwd_hi = [bridge_val] + fwd_hi

    chart_data = {
        "hist_years": hist_years,
        "hist_vals": hist_vals,
        "fwd_years": fwd_years,
        "fwd_avg": fwd_avg,
        "fwd_lo": fwd_lo,
        "fwd_hi": fwd_hi,
    }

    annual_tbody = _build_est_table_html(annual_rows, is_annual=True) if annual_rows else ""
    qtr_tbody = _build_est_table_html(quarterly_rows, is_annual=False) if quarterly_rows else ""
    last_period = annual_rows[-1]["date"][:4] if annual_rows else "—"

    rev_str = fmt_large(next_year_rev) if next_year_rev else "—"
    eps_str = fmt_currency(next_year_eps) if next_year_eps else "—"
    cagr_str = f"{cagr * 100:.1f}%" if cagr is not None else "—"

    # Context strip
    info = get_company_info(ticker)
    sym = ticker.upper()
    name = _h((info.get("longName") or info.get("shortName") or sym) if info else sym)
    price = get_latest_price(ticker)
    prev_close = (info.get("previousClose") if info else None)
    if price and prev_close and prev_close > 0:
        chg_pct = (price - prev_close) / prev_close * 100
        chg_str = ("▲" if chg_pct >= 0 else "▼") + " " + ("+" if chg_pct >= 0 else "") + f"{chg_pct:.2f}%"
        chg_cls = "chg-pos" if chg_pct >= 0 else "chg-neg"
    else:
        chg_str, chg_cls = "—", ""
    _XMAP = {"NYQ": "NYSE", "NMS": "NASDAQ", "NGM": "NASDAQ", "NCM": "NASDAQ", "ASE": "AMEX"}
    raw_x = (info.get("exchange", "") if info else "") or ""
    exchange = _h(_XMAP.get(raw_x, raw_x) or "—")
    price_str = f"${price:.2f}" if price else "—"

    ctx_html = (
        '<div class="val-ctx">'
        '<span class="sym">' + sym + '</span>'
        '<span class="name">' + name + '</span>'
        '<span class="eyebrow-ctx" style="margin-left:12px">Valuation · Forward Estimates</span>'
        '<div class="meta">'
        '<span>' + exchange + '</span>'
        '<span class="px num">' + price_str + '</span>'
        '<span class="' + chg_cls + ' num">' + chg_str + '</span>'
        '</div></div>'
    )

    lede_html = (
        '<section class="fe-lede">'
        '<div class="left">'
        '<span class="eyebrow-lbl">Wall Street outlook</span>'
        '<h2 class="ttl">What ' + str(max_analysts) + ' analysts project for the years ahead</h2>'
        '<p class="sub">Annual consensus estimates sourced from Financial Modeling Prep. '
        'The revenue chart bridges historical actuals to the analyst range — dashed line is the consensus average, '
        'the band spans the bull-to-bear spectrum.</p>'
        '</div>'
        '<div class="right">'
        '<div class="fe-source"><span class="lbl">' + next_year_period + ' Revenue</span>'
        '<span class="v num">' + rev_str + '</span>'
        '<span class="cap">' + str(max_analysts) + ' analysts · consensus</span></div>'
        '<div class="fe-source"><span class="lbl">' + next_year_period + ' EPS</span>'
        '<span class="v num">' + eps_str + '</span>'
        '<span class="cap">consensus estimate</span></div>'
        '<div class="fe-source"><span class="lbl">Rev. CAGR</span>'
        '<span class="v num">' + cagr_str + '</span>'
        '<span class="cap">est. through ' + last_period + '</span></div>'
        '</div>'
        '</section>'
    )

    tab_row_html = (
        '<div class="tab-row">'
        '<button class="tab-pill active" onclick="showTab(\'annual\',this)">Annual</button>'
        '<button class="tab-pill inactive" onclick="showTab(\'quarterly\',this)">Quarterly</button>'
        '</div>'
    )

    annual_table_empty = (
        '<tr><td colspan="7" style="padding:16px;text-align:center;color:var(--fg-3)">'
        'No annual estimates available.</td></tr>'
    )

    annual_content_html = (
        '<div id="annual-content">'
        '<section class="fe-card">'
        '<div class="fe-card-head">'
        '<div class="left-group"><span class="roman">I</span><h3>Revenue trajectory</h3></div>'
        '<span class="hint">Historical + analyst consensus range</span>'
        '</div>'
        '<div class="fe-chart-wrap"><div id="rev-chart"></div></div>'
        '<div class="chart-legend">'
        '<div class="legend-item"><div class="legend-swatch solid"></div><span>Historical</span></div>'
        '<div class="legend-item"><div class="legend-swatch dashed"></div><span>Est. avg</span></div>'
        '<div class="legend-item"><div class="legend-swatch band"></div><span>Est. range (low–high)</span></div>'
        '</div>'
        '<div class="fe-readout">' + fwd_readout + '</div>'
        '</section>'
        '<section class="fe-table-card">'
        '<div class="fe-table-head-section">'
        '<div class="fe-card-head">'
        '<div class="left-group"><span class="roman">II</span><h3>Annual estimates</h3></div>'
        '<span class="hint">Revenue · EPS · EBITDA · Coverage</span>'
        '</div>'
        '</div>'
        '<table class="fe-table">'
        '<thead><tr>'
        '<th>Period</th><th>Revenue range</th><th>Rev avg</th>'
        '<th>EPS range</th><th>EPS avg</th><th>EBITDA</th><th>Analysts</th>'
        '</tr></thead>'
        '<tbody>' + (annual_tbody if annual_tbody else annual_table_empty) + '</tbody>'
        '</table>'
        '</section>'
        '</div>'
    )

    if qtr_tbody:
        qtr_content_html = (
            '<div id="qtr-content" style="display:none">'
            '<section class="fe-table-card">'
            '<div class="fe-table-head-section">'
            '<div class="fe-card-head">'
            '<div class="left-group"><span class="roman">II</span><h3>Quarterly detail</h3></div>'
            '<span class="hint">Quarterly estimates</span>'
            '</div>'
            '</div>'
            '<table class="fe-table">'
            '<thead><tr>'
            '<th>Period</th><th>Revenue range</th><th>Rev avg</th>'
            '<th>EPS range</th><th>EPS avg</th><th>EBITDA</th><th>Analysts</th>'
            '</tr></thead>'
            '<tbody>' + qtr_tbody + '</tbody>'
            '</table>'
            '</section>'
            '</div>'
        )
    else:
        qtr_content_html = (
            '<div id="qtr-content" style="display:none">'
            '<div class="info-banner">Quarterly estimates require FMP premium subscription.</div>'
            '</div>'
        )

    foot_html = (
        '<div class="va-foot">'
        '<span>Forward estimates from Financial Modeling Prep. Historical revenue from yfinance. '
        'CAGR computed over the full estimate horizon.</span>'
        '</div>'
    )

    body = (
        ctx_html
        + '<div class="fe-body">'
        + lede_html
        + tab_row_html
        + annual_content_html
        + qtr_content_html
        + foot_html
        + '</div>'
    )

    js = (
        "const D=" + json_for_script(chart_data) + ";\n"
        "function showTab(tab,el){"
        "document.querySelectorAll('.tab-pill').forEach(function(b){"
        "b.className='tab-pill '+(b===el?'active':'inactive');"
        "});"
        "document.getElementById('annual-content').style.display=tab==='annual'?'block':'none';"
        "document.getElementById('qtr-content').style.display=tab==='quarterly'?'block':'none';"
        "}\n"
        "var traces=["
        "{x:D.hist_years,y:D.hist_vals,fill:'tozeroy',fillcolor:'rgba(194,170,122,0.06)',"
        "line:{color:'transparent'},showlegend:false,hoverinfo:'skip',type:'scatter'},"
        "{x:D.hist_years,y:D.hist_vals,name:'Historical',mode:'lines+markers',type:'scatter',"
        "line:{color:'#C2AA7A',width:2},marker:{size:6,color:'#C2AA7A'},showlegend:false},"
        "{x:D.fwd_years,y:D.fwd_lo,fill:'none',line:{color:'transparent'},"
        "showlegend:false,hoverinfo:'skip',type:'scatter'},"
        "{x:D.fwd_years,y:D.fwd_hi,fill:'tonexty',fillcolor:'rgba(31,61,92,0.22)',"
        "line:{color:'transparent'},showlegend:false,hoverinfo:'skip',type:'scatter'},"
        "{x:D.fwd_years,y:D.fwd_avg,name:'Est. avg',mode:'lines+markers',type:'scatter',"
        "line:{color:'#C2AA7A',width:1.5,dash:'dash'},marker:{size:5,color:'#C2AA7A'},showlegend:false}"
        "];\n"
        "var layout={"
        "paper_bgcolor:'#0B0E13',plot_bgcolor:'#0B0E13',"
        "margin:{l:56,r:16,t:8,b:40},showlegend:false,"
        "xaxis:{gridcolor:'#232934',tickfont:{family:'IBM Plex Mono,monospace',color:'#5E5849',size:10},"
        "linecolor:'#232934'},"
        "yaxis:{gridcolor:'#232934',tickfont:{family:'IBM Plex Mono,monospace',color:'#5E5849',size:10},"
        "linecolor:'#232934',title:{text:'Revenue ($B)',font:{color:'#8E8676',size:11}}},"
        "hovermode:'x unified',"
        "hoverlabel:{bgcolor:'#181D26',bordercolor:'#2E3645',"
        "font:{family:'IBM Plex Mono,monospace',color:'#F2ECDC',size:11}},"
        "font:{family:'IBM Plex Mono,monospace',color:'#C7C0AE',size:11}"
        "};\n"
        "Plotly.newPlot('rev-chart',traces,layout,{responsive:true,displayModeBar:false});\n"
    )

    _ROOT = (
        "<style>*,*::before,*::after{box-sizing:border-box}"
        ":root{"
        "--ink-0:#0B0E13;--ink-1:#11151C;--ink-2:#181D26;--ink-3:#222934;--ink-4:#2C3340;"
        "--line-1:#232934;--line-2:#2E3645;--line-3:#3D4658;"
        "--fg-1:#F2ECDC;--fg-2:#C7C0AE;--fg-3:#8E8676;--fg-4:#5E5849;"
        "--brass:#C2AA7A;--brass-bright:#DCC79E;--brass-deep:#8F7A50;--brass-ink:#17120A;"
        "--oxford:#1F3D5C;--oxford-light:#2E5A87;"
        "--positive:#4F8C5E;--positive-bg:#15241A;--negative:#B5494B;--negative-bg:#2A1517;"
        "--warning:#C49545;--warning-bg:#2A1F0F;--info:#4A78B5;--info-bg:#11202E;"
        "--font-display:'EB Garamond',Georgia,serif;"
        "--font-sans:'IBM Plex Sans','Helvetica Neue',system-ui,sans-serif;"
        "--font-mono:'IBM Plex Mono','SF Mono',Menlo,monospace;"
        "--fs-12:0.75rem;--fs-13:0.8125rem;--fs-14:0.875rem;--fs-16:1rem;--fs-18:1.125rem;"
        "--fs-20:1.25rem;--fs-24:1.5rem;--fs-30:1.875rem;--fs-38:2.375rem;"
        "--tr-wider:0.12em;--tr-wide:0.04em;--tr-tight:-0.02em;"
        "--sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:32px;--sp-7:48px;"
        "--r-1:2px;--r-2:4px;--r-3:6px;--r-full:999px;"
        "--shadow-1:0 1px 3px rgba(0,0,0,0.4);"
        "}"
        "html,body{margin:0;padding:0;background:var(--ink-0);color:var(--fg-2);"
        "font-family:var(--font-sans);font-size:14px;-webkit-font-smoothing:antialiased}"
        "</style>"
    )

    doc = (
        "<!doctype html><html><head><meta charset='utf-8'>"
        "<link rel='preconnect' href='https://fonts.googleapis.com'>"
        "<link href='https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500"
        "&family=IBM+Plex+Mono:wght@300;400;500;600&family=IBM+Plex+Sans:wght@300;400;500;600&display=swap'"
        " rel='stylesheet'>"
        "<script src='https://cdn.plot.ly/plotly-2.35.2.min.js' charset='utf-8'></script>"
        + _ROOT
        + _KR_CSS + _FE_CSS
        + "</head><body>"
        + body
        + "<script>" + js + "</script>"
        + "</body></html>"
    )

    height = 1320 + len(annual_rows) * 50
    components.html(doc, height=height, scrolling=False)