{% extends "base.html" %}
{% block title %}Moment-Curvature - ConcreteDesignPy{% endblock %}

{% block head %}
<script src="https://cdn.jsdelivr.net/npm/plotly.js-dist-min/plotly.min.js"></script>
<style>
.mc-layout { display: flex; gap: 2rem; align-items: flex-start; }
.mc-left { flex: 0 0 480px; }
.mc-right { flex: 1; min-width: 0; }
.mc-right .results-panel { position: sticky; top: 1rem; }
.mc-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.report-section {
    background: #fff; border: 1px solid var(--gray-200);
    border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem;
}
.report-section h4 {
    font-size: .95rem; color: var(--primary-dark); margin: 0 0 .75rem;
    padding-bottom: .35rem; border-bottom: 2px solid var(--primary-light);
}
.report-eq { padding: .6rem 1rem; border-radius: 4px; margin: .5rem 0; font-size: .9rem; }
.report-ref { font-size: .78rem; color: #3b82f6; font-style: italic; margin: 0; }
.report-table {
    width: 100%; border-collapse: collapse; font-size: .8rem; margin: .5rem 0;
}
.report-table th {
    background: var(--primary-dark); color: #fff; padding: .45rem .6rem;
    text-align: center; font-weight: 600; font-size: .78rem;
}
.report-table td {
    padding: .4rem .6rem; text-align: center; border-bottom: 1px solid var(--gray-200);
    font-family: "SF Mono","Fira Code",monospace; font-size: .8rem;
}
.report-table tr:nth-child(even) { background: var(--gray-50); }
.report-result {
    background: #dcfce7; padding: .6rem 1rem; border-radius: 4px; margin: .5rem 0;
    font-size: .95rem; font-weight: 700;
}
</style>
{% endblock %}

{% block content %}
<div class="calc-page">
    <a href="/" class="back-link">&larr; All Calculators</a>
    <h1>Moment-Curvature Analysis</h1>
    <p class="ref">M-&phi; Diagram &mdash; NSCP 2015 / ACI 318-19</p>

    <div class="report-section" style="margin-bottom:1.25rem;">
        <div style="display:flex;justify-content:space-between;align-items:center;cursor:pointer;" onclick="document.getElementById('theory-body').style.display=document.getElementById('theory-body').style.display==='none'?'':'none'; this.querySelector('span').textContent=document.getElementById('theory-body').style.display==='none'?'&#9660;':'&#9650;';">
            <h4 style="margin:0;border:none;padding:0;">Theory &amp; References <span>&#9660;</span></h4>
        </div>
        <div id="theory-body" style="display:none;margin-top:.75rem;">
            <p style="font-size:.85rem;">The curvature of a cross-section is defined as the inverse of the radius of curvature and can be computed from the strain profile:</p>
            <div class="report-eq">\[ \varphi = \frac{\varepsilon_c}{kd} = \frac{\varepsilon_s}{d(1-k)} = \frac{\varepsilon_c + \varepsilon_s}{d} \]</div>
            <p class="report-ref">Anwar &amp; Najam (2017), Ch. 6, Eq. 6.4</p>
            <p style="font-size:.85rem;margin-top:.75rem;"><b>Procedure:</b> The M-&phi; curve is generated by incrementing the extreme compression fiber strain from zero to &epsilon;<sub>cu</sub>. At each increment, the neutral axis depth is found iteratively to satisfy force equilibrium (P<sub>n</sub> = P<sub>applied</sub>), then the curvature and moment are computed.</p>
            <p style="font-size:.85rem;margin-top:.75rem;"><b>Ductility Ratio:</b></p>
            <div class="report-eq">\[ \mu = \frac{\varphi_u}{\varphi_y} \]</div>
            <p class="report-ref">Anwar &amp; Najam (2017), Ch. 6, Eq. 6.6</p>
            <p style="font-size:.85rem;margin-top:.75rem;"><b>Effective Stiffness:</b></p>
            <div class="report-eq">\[ EI = \frac{M}{\varphi} \]</div>
            <p class="report-ref">Anwar &amp; Najam (2017), Ch. 6, Eq. 6.5</p>

            <p style="font-size:.85rem;margin-top:1rem;"><b>Concrete Models:</b></p>
            <ul style="font-size:.82rem;color:var(--gray-600);margin:.25rem 0 0 1.25rem;">
                <li><b>Hognestad (1951)</b> &mdash; Parabolic ascending + linear descending (unconfined). Univ. of Illinois Bulletin No. 399.</li>
                <li><b>Mander, Priestley &amp; Park (1988)</b> &mdash; Power-law curve for confined concrete. Confinement increases both strength (f'<sub>cc</sub>) and ultimate strain (&epsilon;<sub>cu</sub>). <i>J. Structural Eng., ASCE, Vol. 114, No. 8.</i></li>
            </ul>
            <p style="font-size:.82rem;color:var(--gray-600);margin-top:.5rem;"><b>Code References:</b> NSCP 2015, ACI 318-19 (Whitney stress block, &beta;<sub>1</sub> factor, &phi; factors per Table 21.2.2)</p>
        </div>
    </div>

    <div class="mc-layout">
        <div class="mc-left">
            <form id="calc-form" class="calc-form">
                <div class="form-section">
                    <h3>Analysis Mode</h3>
                    <div style="display:flex;gap:.5rem;">
                        <button type="button" id="btn-quick" class="btn-primary" style="flex:1;" onclick="setMode('quick')">Quick (6-Point)</button>
                        <button type="button" id="btn-advanced" class="btn-secondary" style="flex:1;" onclick="setMode('advanced')">Advanced (M-&#966;)</button>
                        <button type="button" id="btn-mtheta" class="btn-secondary" style="flex:1;" onclick="setMode('mtheta')">M-&#952;</button>
                    </div>
                </div>
                <div class="form-section">
                    <h3>Section</h3>
                    <div class="form-row">
                        <div class="form-group"><label>Width, b (mm)</label><input type="number" name="b" value="450" required></div>
                        <div class="form-group"><label>Height, h (mm)</label><input type="number" name="h" value="600" required></div>
                        <div class="form-group"><label>Eff. depth, d (mm)</label><input type="number" name="d" value="550" required></div>
                    </div>
                </div>
                <div class="form-section">
                    <h3>Material &amp; Steel</h3>
                    <div class="form-row">
                        <div class="form-group"><label>f'c (MPa)</label><input type="number" name="fc" value="30" step="0.1" required></div>
                        <div class="form-group"><label>fy (MPa)</label><input type="number" name="fy" value="415" step="0.1" required></div>
                    </div>
                    <div class="form-row">
                        <div class="form-group"><label>Bar diameter (mm)</label><input type="number" id="db_tension" name="db_tension" value="25" step="1" required oninput="updateAs()"></div>
                        <div class="form-group"><label>No. of bars, n</label><input type="number" id="n_tension" name="n_tension" value="4" min="1" step="1" required oninput="updateAs()"></div>
                    </div>
                    <div class="form-row">
                        <div class="form-group"><label>As tension (mm&sup2;)</label><input type="number" id="as_tension" name="as_tension" value="1963.50" step="0.01" readonly style="background:#f3f4f6;"></div>
                        <div class="form-group"><label>Es (MPa)</label><input type="number" name="es" value="200000"></div>
                    </div>
                </div>
                <div class="form-section">
                    <h3>Compression Steel <span style="font-weight:400;font-size:.8rem;color:var(--gray-400);">(optional)</span></h3>
                    <div class="form-row">
                        <div class="form-group"><label>d' (mm)</label><input type="number" name="d_prime" value="65" step="1"></div>
                        <div class="form-group"><label>Bar dia (mm)</label><input type="number" id="db_comp" value="20" step="1" oninput="updateAsComp()"></div>
                    </div>
                    <div class="form-row">
                        <div class="form-group"><label>No. of bars</label><input type="number" id="n_comp" value="2" min="0" step="1" oninput="updateAsComp()"></div>
                        <div class="form-group"><label>A's (mm&sup2;)</label><input type="number" id="as_comp" name="as_compression" value="0" readonly style="background:#f3f4f6;"></div>
                    </div>
                </div>
                <div class="form-section" id="axial-section" style="display:none;">
                    <h3>Loading</h3>
                    <div class="form-row">
                        <div class="form-group"><label>Axial Load, P (kN)</label><input type="number" name="axial_load" value="0" step="1"><p style="font-size:.75rem;color:var(--gray-400);margin:.25rem 0 0;">+ compression, - tension</p></div>
                    </div>
                </div>
                <div class="form-section" id="concrete-model-section" style="display:none;">
                    <h3>Concrete Model</h3>
                    <select name="concrete_model" id="concrete-model" style="width:100%;padding:.45rem .6rem;border:1px solid var(--gray-200);border-radius:4px;font-size:.9rem;" onchange="toggleManderFields()">
                        <option value="hognestad">Hognestad (Unconfined)</option>
                        <option value="mander" selected>Mander et al. (Confined)</option>
                    </select>
                    <div id="mander-fields" style="margin-top:.75rem;">
                        <div class="form-row">
                            <div class="form-group"><label>fy,t (MPa)</label><input type="number" name="fy_transverse" value="275" step="1"></div>
                            <div class="form-group"><label>Tie dia (mm)</label><input type="number" name="db_tie" value="10" step="1"></div>
                            <div class="form-group"><label>Tie spacing (mm)</label><input type="number" name="s_tie" value="100" step="5"></div>
                        </div>
                        <div class="form-row">
                            <div class="form-group"><label>Bars X</label><input type="number" name="n_bars_x" value="4" min="2" step="1"></div>
                            <div class="form-group"><label>Bars Y</label><input type="number" name="n_bars_y" value="4" min="2" step="1"></div>
                            <div class="form-group"><label>Cover (mm)</label><input type="number" name="cover" value="40" step="5"></div>
                        </div>
                    </div>
                </div>
                <div class="form-section" id="lp-section" style="display:none;">
                    <h3>Plastic Hinge Length</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Lp Method</label>
                            <select name="lp_method" id="lp-method" style="width:100%;padding:.4rem;border:1px solid var(--gray-200);border-radius:4px;font-size:.9rem;" onchange="toggleLpFields()">
                                <option value="manual">Manual</option>
                                <option value="park_paulay">Park &amp; Paulay (0.5h)</option>
                                <option value="priestley">Priestley (0.08L + 0.022fy*db)</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row" id="lp-manual-fields">
                        <div class="form-group"><label>Lp (mm)</label><input type="number" name="lp" value="300" step="10"></div>
                    </div>
                    <div class="form-row" id="lp-priestley-fields" style="display:none;">
                        <div class="form-group"><label>Shear span, L (mm)</label><input type="number" name="shear_span" value="3000" step="100"></div>
                    </div>
                    <p id="lp-formula" style="font-size:.75rem;color:var(--gray-400);margin:.25rem 0 0;"></p>
                </div>
                <div class="form-section" id="backbone-section" style="display:none;">
                    <h3>ASCE 41 Backbone Curve</h3>
                    <div class="form-row">
                        <div class="form-group">
                            <label>Code</label>
                            <select name="backbone_code" style="width:100%;padding:.4rem;border:1px solid var(--gray-200);border-radius:4px;font-size:.9rem;">
                                <option value="none">None</option>
                                <option value="asce41" selected>ASCE 41-17</option>
                                <option value="fema356">FEMA 356</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group"><label>Stirrup spacing (mm)</label><input type="number" name="stirrup_spacing" value="150" step="10"></div>
                        <div class="form-group"><label>Stirrup dia (mm)</label><input type="number" name="db_stirrup" value="10" step="1"></div>
                    </div>
                    <div class="form-row">
                        <div class="form-group"><label>V demand (kN)</label><input type="number" name="v_demand" value="0" step="1"><p style="font-size:.72rem;color:var(--gray-400);margin:.2rem 0 0;">0 = assume low shear</p></div>
                    </div>
                </div>
                <button type="submit" class="btn-primary" style="width:100%;">Analyze</button>
            </form>
        </div>

        <div class="mc-right">
            <div id="results" class="results-panel" style="display:none;">
                <h2>Results</h2>
                <div id="results-summary"></div>
                <div id="chart-mphi" style="width:100%;"></div>
                <div id="chart-mtheta" style="width:100%;display:none;"></div>
                <div id="chart-backbone" style="width:100%;display:none;"></div>
                <div id="chart-combined" style="width:100%;display:none;"></div>
                <div id="chart-ductility" style="width:100%;display:none;"></div>
            </div>
        </div>
    </div>

    <div class="mc-charts" style="display:none;" id="charts-row">
        <div id="chart-section" style="width:100%;"></div>
        <div id="chart-strain-stress" style="width:100%;"></div>
        <div id="chart-steel" style="width:100%;"></div>
        <div id="chart-fiber" style="width:100%;"></div>
    </div>

    <div id="results-report" style="display:none; margin-top:1.5rem;"></div>
</div>

<script>
var currentMode = 'quick';

function updateAs() {
    var db = parseFloat(document.getElementById('db_tension').value) || 0;
    var n = parseInt(document.getElementById('n_tension').value) || 0;
    var as = n * Math.PI * db * db / 4;
    document.getElementById('as_tension').value = as.toFixed(2);
}
updateAs();
updateAsComp();

function updateAsComp() {
    var db = parseFloat(document.getElementById('db_comp').value) || 0;
    var n = parseInt(document.getElementById('n_comp').value) || 0;
    var as = n * Math.PI * db * db / 4;
    document.getElementById('as_comp').value = as.toFixed(2);
}

function toggleManderFields() {
    var sel = document.getElementById('concrete-model').value;
    document.getElementById('mander-fields').style.display = sel === 'mander' ? '' : 'none';
}

function toggleLpFields() {
    var m = document.getElementById('lp-method').value;
    document.getElementById('lp-manual-fields').style.display = m === 'manual' ? '' : 'none';
    document.getElementById('lp-priestley-fields').style.display = m === 'priestley' ? '' : 'none';
    var f = document.getElementById('lp-formula');
    if (m === 'park_paulay') f.textContent = 'Lp = 0.5 \u00d7 h (Park & Paulay, 1975)';
    else if (m === 'priestley') f.textContent = 'Lp = 0.08L + 0.022\u00b7fy\u00b7db (Priestley, 1992)';
    else f.textContent = '';
}

function setMode(mode) {
    currentMode = mode;
    var isAdv = (mode === 'advanced' || mode === 'mtheta');
    document.getElementById('btn-quick').className = mode === 'quick' ? 'btn-primary' : 'btn-secondary';
    document.getElementById('btn-advanced').className = mode === 'advanced' ? 'btn-primary' : 'btn-secondary';
    document.getElementById('btn-mtheta').className = mode === 'mtheta' ? 'btn-primary' : 'btn-secondary';
    document.getElementById('axial-section').style.display = isAdv ? '' : 'none';
    document.getElementById('concrete-model-section').style.display = isAdv ? '' : 'none';
    document.getElementById('lp-section').style.display = mode === 'mtheta' ? '' : 'none';
    document.getElementById('backbone-section').style.display = mode === 'mtheta' ? '' : 'none';
}

document.getElementById('calc-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var form = this;
    var payload = {
        b: parseFloat(form.b.value), h: parseFloat(form.h.value),
        d: parseFloat(form.d.value), fc: parseFloat(form.fc.value),
        fy: parseFloat(form.fy.value), as_tension: parseFloat(form.as_tension.value),
        es: parseFloat(form.es.value),
        d_prime: parseFloat(form.d_prime.value) || 0,
        as_compression: parseFloat(form.as_compression.value) || 0,
        db_tension: parseFloat(form.db_tension.value) || 25,
    };

    if (currentMode === 'mtheta') {
        payload.axial_load = parseFloat(form.axial_load.value) || 0;
        payload.concrete_model = form.concrete_model.value || 'hognestad';
        if (payload.concrete_model === 'mander') {
            payload.fy_transverse = parseFloat(form.fy_transverse.value) || 275;
            payload.db_tie = parseFloat(form.db_tie.value) || 10;
            payload.s_tie = parseFloat(form.s_tie.value) || 100;
            payload.n_bars_x = parseInt(form.n_bars_x.value) || 4;
            payload.n_bars_y = parseInt(form.n_bars_y.value) || 4;
            payload.cover = parseFloat(form.cover.value) || 40;
        }
        payload.lp_method = form.lp_method.value || 'manual';
        payload.lp = parseFloat(form.lp.value) || 300;
        payload.shear_span = parseFloat(form.shear_span.value) || 0;
        payload.backbone_code = form.backbone_code.value || 'none';
        payload.stirrup_spacing = parseFloat(form.stirrup_spacing.value) || 150;
        payload.db_stirrup = parseFloat(form.db_stirrup.value) || 10;
        payload.v_demand = parseFloat(form.v_demand.value) || 0;

        submitCalc('/api/section/moment-rotation', payload, function(result) {
            var mtheta = result.mtheta || {};
            var mphi = result.mphi || {};
            var backbone = result.backbone || null;
            var fiberPlotMT = mphi.fiber_plot || null;
            document.getElementById('chart-mphi').style.display = 'none';
            document.getElementById('chart-mtheta').style.display = '';
            renderMThetaResults(payload, mphi, mtheta, backbone);
            if (fiberPlotMT) renderFiberChart(fiberPlotMT, payload);
        });
        return;
    }

    if (currentMode === 'advanced') {
        payload.axial_load = parseFloat(form.axial_load.value) || 0;
        payload.concrete_model = form.concrete_model.value || 'hognestad';
        if (payload.concrete_model === 'mander') {
            payload.fy_transverse = parseFloat(form.fy_transverse.value) || 275;
            payload.db_tie = parseFloat(form.db_tie.value) || 10;
            payload.s_tie = parseFloat(form.s_tie.value) || 100;
            payload.n_bars_x = parseInt(form.n_bars_x.value) || 4;
            payload.n_bars_y = parseInt(form.n_bars_y.value) || 4;
            payload.cover = parseFloat(form.cover.value) || 40;
        }
        // Run both quick and advanced in parallel
        document.getElementById('chart-mphi').style.display = '';
        document.getElementById('chart-mtheta').style.display = 'none';
        var quickDone = false, advDone = false;
        var quickResult = null, advResult = null;
        function onBothDone() {
            if (!quickDone || !advDone) return;
            var pts = quickResult.points || [];
            var sp = quickResult.section_properties || {};
            var advPts = advResult.points || [];
            var hog = advResult.hognestad_params || {};
            var events = advResult.events || [];
            var ductility = advResult.ductility || null;
            var concreteModelParams = advResult.concrete_model_params || {};
            var fiberPlot = advResult.fiber_plot || null;
            renderResultsBoth(payload, pts, sp, advPts, hog, events, ductility, concreteModelParams, fiberPlot);
        }
        submitCalc('/api/section/moment-curvature', payload, function(r) { quickResult = r; quickDone = true; onBothDone(); });
        submitCalc('/api/section/moment-curvature-advanced', payload, function(r) { advResult = r; advDone = true; onBothDone(); });
        return;
    }

    document.getElementById('chart-mphi').style.display = '';
    document.getElementById('chart-mtheta').style.display = 'none';

    submitCalc('/api/section/moment-curvature', payload, function(result) {
        var pts = result.points || [];
        var sp = result.section_properties || {};

        // ── Summary Table ──
        var s = '<table class="report-table">';
        s += '<tr><th>Point</th><th>Event</th><th>&phi; (1/mm)</th><th>M (kN-m)</th></tr>';
        for (var i = 0; i < pts.length; i++) {
            var p = pts[i];
            s += '<tr><td>P' + p.point + '</td><td style="text-align:left;">' + p.event + '</td>';
            s += '<td>' + (p.phi ? p.phi.toExponential(4) : '0') + '</td>';
            s += '<td>' + (p.moment_knm || 0).toFixed(2) + '</td></tr>';
        }
        s += '</table>';
        document.getElementById('results-summary').innerHTML = s;

        // ── Chart 1: M-phi Plotly ──
        renderMPhiChart(pts);

        // ── Chart 2: Section Visualization ──
        renderSectionChart(payload, sp);

        // ── Chart 3: Strain-Stress at Ultimate ──
        renderStrainStressChart(payload, sp, pts);

        // Show charts row
        document.getElementById('charts-row').style.display = '';

        // ── Full Report ──
        renderReport(payload, sp, pts);
    });
});

function renderResultsBoth(payload, pts, sp, advPts, hog, events, ductility, concreteModelParams, fiberPlot) {
    // Ductility summary card
    var s = '';
    if (ductility) {
        s += '<div class="report-result" style="margin-bottom:.75rem;">';
        s += '<span style="font-size:.82rem;font-weight:400;color:#333;">Ductility Ratio</span><br>';
        s += '&mu; = &phi;<sub>u</sub> / &phi;<sub>y</sub> = ' + ductility.mu.toFixed(2);
        s += '<span style="font-size:.8rem;font-weight:400;color:var(--gray-600);margin-left:1rem;">';
        s += 'M<sub>y</sub>=' + ductility.moment_yield_knm + ' kN-m &nbsp;|&nbsp; M<sub>u</sub>=' + ductility.moment_ultimate_knm + ' kN-m</span>';
        s += '</div>';
    }

    // Summary table for 6-point
    s += '<h3 style="margin:0 0 .5rem;">Quick (6-Point) Results</h3>';
    s += '<table class="report-table">';
    s += '<tr><th>Point</th><th>Event</th><th>&phi; (1/mm)</th><th>M (kN-m)</th></tr>';
    for (var i = 0; i < pts.length; i++) {
        var p = pts[i];
        s += '<tr><td>P' + p.point + '</td><td style="text-align:left;">' + p.event + '</td>';
        s += '<td>' + (p.phi ? p.phi.toExponential(4) : '0') + '</td>';
        s += '<td>' + (p.moment_knm || 0).toFixed(2) + '</td></tr>';
    }
    s += '</table>';
    document.getElementById('results-summary').innerHTML = s;

    // M-phi chart with both curves + event markers
    renderMPhiChartBoth(pts, advPts, events);

    // Section and strain/stress charts
    renderSectionChart(payload, sp);

    // Concrete model stress-strain chart
    renderConcreteModelChart(concreteModelParams, hog);
    renderSteelChart(payload);
    if (fiberPlot) renderFiberChart(fiberPlot, payload);

    document.getElementById('charts-row').style.display = '';

    // Report
    renderAdvancedReport(payload, sp, pts, advPts, hog, events, ductility, concreteModelParams);
}

function renderMPhiChartBoth(pts, advPts, events) {
    var traces = [];

    // Advanced smooth curve
    if (advPts.length > 0) {
        var advPhis = [0], advM = [0];
        for (var i = 0; i < advPts.length; i++) {
            advPhis.push(advPts[i].phi || 0);
            advM.push(advPts[i].moment_knm || 0);
        }
        traces.push({
            x: advPhis, y: advM, mode: 'lines',
            name: 'Advanced (Fiber)',
            line: { color: '#dc2626', width: 2.5 },
        });
    }

    // 6-point curve
    var phis = [0], moments = [0];
    for (var i = 0; i < pts.length; i++) {
        phis.push(pts[i].phi || 0);
        moments.push(pts[i].moment_knm || 0);
    }
    traces.push({
        x: phis, y: moments, mode: 'lines+markers',
        name: 'Quick (6-Point)',
        line: { color: '#2563eb', width: 2, dash: 'dash' },
        marker: { size: 8, color: '#2563eb' },
    });

    // Point labels for 6-point
    for (var j = 0; j < pts.length; j++) {
        traces.push({
            x: [pts[j].phi], y: [pts[j].moment_knm],
            mode: 'markers+text', showlegend: false,
            marker: { size: 8, color: '#2563eb', symbol: 'circle' },
            text: ['P' + pts[j].point], textposition: 'top right',
            textfont: { size: 9, color: '#2563eb' },
        });
    }

    // Event markers on advanced curve
    if (events && events.length > 0) {
        var evtColors = { 'Cracking': '#f59e0b', 'Steel Yield': '#16a34a', 'Peak Moment': '#7c3aed', 'Ultimate': '#dc2626' };
        var evtSymbols = { 'Cracking': 'diamond', 'Steel Yield': 'triangle-up', 'Peak Moment': 'star', 'Ultimate': 'x' };
        for (var k = 0; k < events.length; k++) {
            var ev = events[k];
            traces.push({
                x: [ev.phi], y: [ev.moment_knm],
                mode: 'markers+text', showlegend: false,
                marker: { size: 12, color: evtColors[ev.event] || '#333', symbol: evtSymbols[ev.event] || 'diamond', line: { width: 1.5, color: '#fff' } },
                text: [ev.event], textposition: 'top center',
                textfont: { size: 9, color: evtColors[ev.event] || '#333', family: 'Arial' },
            });
        }
    }

    var layout = {
        title: { text: 'Moment-Curvature Diagram', font: { size: 14 } },
        xaxis: { title: 'Curvature, \u03c6 (1/mm)', rangemode: 'tozero', gridcolor: '#e5e7eb', tickformat: '.2e' },
        yaxis: { title: 'Moment, M (kN-m)', rangemode: 'tozero', gridcolor: '#e5e7eb' },
        height: 450,
        margin: { t: 40, r: 20, b: 60, l: 70 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff',
        showlegend: true,
        legend: { x: 1, xanchor: 'right', y: 0.05, bgcolor: 'rgba(255,255,255,0.85)', font: { size: 10 } },
        hovermode: 'closest',
    };
    Plotly.newPlot('chart-mphi', traces, layout, { responsive: true, displayModeBar: false });
}

function renderConcreteModelChart(modelParams, hogFallback) {
    var mp = modelParams && modelParams.strains ? modelParams : hogFallback;
    if (!mp || !mp.strains) return;

    var isMander = mp.model === 'mander';
    var traces = [];

    // Main curve
    traces.push({
        x: mp.strains, y: mp.stresses, mode: 'lines',
        name: isMander ? 'Mander Confined' : 'Hognestad Model',
        line: { color: isMander ? '#16a34a' : '#dc2626', width: 2.5 },
        fill: 'tozeroy', fillcolor: isMander ? 'rgba(22,163,106,0.08)' : 'rgba(220,38,38,0.08)',
    });

    if (isMander) {
        // Mark peak (ecc, fcc)
        traces.push({
            x: [mp.ecc], y: [mp.fcc],
            mode: 'markers+text', showlegend: false,
            marker: { size: 10, color: '#166534', symbol: 'diamond' },
            text: ['\u03b5cc=' + mp.ecc.toFixed(4) + ', f\'cc=' + mp.fcc.toFixed(1)],
            textposition: 'top right',
            textfont: { size: 9, color: '#166534' },
        });
        // Add unconfined Mander curve (fl=0, so fcc=fc, ecc=eco)
        var fc_unc = mp.fc;
        var eco_unc = mp.eco_unconfined || 0.002;
        var ec_mod = 5000 * Math.sqrt(fc_unc);
        var e_sec_unc = fc_unc / eco_unc;
        var r_unc = ec_mod / (ec_mod - e_sec_unc);
        var ecu_unc = 0.004; // unconfined ultimate
        var uncStrains = [], uncStresses = [];
        var nUncPts = 150;
        for (var i = 0; i <= nUncPts; i++) {
            var e = i * ecu_unc / nUncPts;
            uncStrains.push(e);
            var x_unc = e / eco_unc;
            var denom_unc = r_unc - 1 + Math.pow(x_unc, r_unc);
            var s = denom_unc > 0 ? fc_unc * x_unc * r_unc / denom_unc : 0;
            uncStresses.push(s);
        }
        traces.push({
            x: uncStrains, y: uncStresses, mode: 'lines',
            name: 'Mander (Unconfined)',
            line: { color: '#dc2626', width: 1.5, dash: 'dash' },
        });
    } else {
        // Mark eco and ecu for Hognestad
        var ecoStress = mp.fc;
        var ecuStress = 0.85 * mp.fc;
        traces.push({
            x: [mp.eco, mp.ecu], y: [ecoStress, ecuStress],
            mode: 'markers+text', showlegend: false,
            marker: { size: 10, color: '#1e40af', symbol: 'diamond' },
            text: ['\u03b5co=' + mp.eco.toFixed(4), '\u03b5cu=' + mp.ecu],
            textposition: ['top center', 'top center'],
            textfont: { size: 9, color: '#1e40af' },
        });
        // Add unconfined parabolic (same as Hognestad but labeled for clarity)
        traces[0].name = 'Hognestad (Unconfined)';
    }

    var layout = {
        title: { text: isMander ? 'Mander Confined vs Unconfined Concrete' : 'Concrete Stress-Strain Model (Unconfined)', font: { size: 14 } },
        xaxis: { title: 'Strain, \u03b5c', rangemode: 'tozero', gridcolor: '#e5e7eb' },
        yaxis: { title: 'Stress (MPa)', rangemode: 'tozero', gridcolor: '#e5e7eb' },
        height: 450,
        margin: { t: 40, r: 20, b: 60, l: 60 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff',
        showlegend: true,
        legend: { x: 1, xanchor: 'right', y: 1, bgcolor: 'rgba(255,255,255,0.85)', font: { size: 10 } },
    };
    Plotly.newPlot('chart-strain-stress', traces, layout, { responsive: true, displayModeBar: false });
}

// ── Steel Stress-Strain Chart ──
function renderSteelChart(payload) {
    var fy = payload.fy || 415;
    var es = payload.es || 200000;
    var ey = fy / es;
    var emax = 0.05; // 5% strain for display

    // Elastic-perfectly-plastic steel model
    var strains = [], stresses = [];
    // Tension side (negative strain = tension, but plot as positive for clarity)
    var nPts = 100;
    for (var i = 0; i <= nPts; i++) {
        var e = -emax + i * (2 * emax) / nPts;
        strains.push(e);
        var s = e * es;
        if (s > fy) s = fy;
        if (s < -fy) s = -fy;
        stresses.push(s);
    }

    var traces = [{
        x: strains, y: stresses, mode: 'lines',
        name: 'Steel (Elastic-Perfectly-Plastic)',
        line: { color: '#1e40af', width: 2.5 },
    }];

    // Mark yield points
    traces.push({
        x: [ey, -ey], y: [fy, -fy],
        mode: 'markers+text', showlegend: false,
        marker: { size: 10, color: '#dc2626', symbol: 'diamond' },
        text: ['\u03b5y=' + ey.toFixed(5), '-\u03b5y'],
        textposition: ['top right', 'bottom left'],
        textfont: { size: 9, color: '#dc2626' },
    });

    // Yield plateau lines
    traces.push({
        x: [ey, emax], y: [fy, fy], mode: 'lines', showlegend: false,
        line: { color: '#1e40af', width: 1, dash: 'dot' },
    });
    traces.push({
        x: [-ey, -emax], y: [-fy, -fy], mode: 'lines', showlegend: false,
        line: { color: '#1e40af', width: 1, dash: 'dot' },
    });

    Plotly.newPlot('chart-steel', traces, {
        title: { text: 'Steel Stress-Strain Model (fy=' + fy + ' MPa, Es=' + (es/1000) + ' GPa)', font: { size: 14 } },
        xaxis: { title: 'Strain, \u03b5s', zeroline: true, zerolinecolor: '#999', gridcolor: '#e5e7eb' },
        yaxis: { title: 'Stress, fs (MPa)', zeroline: true, zerolinecolor: '#999', gridcolor: '#e5e7eb' },
        height: 450,
        margin: { t: 40, r: 20, b: 60, l: 60 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff',
        showlegend: true,
        legend: { x: 1, xanchor: 'right', y: 0.05, bgcolor: 'rgba(255,255,255,0.85)', font: { size: 10 } },
    }, { responsive: true, displayModeBar: false });
}

// ── Fiber Stress Distribution Chart (M-phi) ──
function renderFiberChart(fiberData, payload) {
    if (!fiberData || !fiberData.stresses) return;
    var b = payload.b, h = payload.h;
    var nf = fiberData.n_fibers;
    var fh = fiberData.fiber_h;
    var c = fiberData.c;
    var isMander = payload.concrete_model === 'mander';

    // Grid: nx columns across width
    var nxGrid = 8;
    var dx = b / nxGrid;
    var xVals = [];
    for (var xi = 0; xi < nxGrid; xi++) xVals.push(Math.round(dx * (xi + 0.5)));

    // Build 2D grids
    var zStress = [], zStrain = [];
    for (var i = 0; i < nf; i++) {
        var rowS = [], rowE = [];
        for (var xi = 0; xi < nxGrid; xi++) { rowS.push(fiberData.stresses[i]); rowE.push(fiberData.strains[i]); }
        zStress.push(rowS);
        zStrain.push(rowE);
    }

    // Stress colorscale: green for confined (Mander), blue for unconfined (Hognestad)
    var stressCS = isMander
        ? [[0,'#f0fdf4'],[0.2,'#bbf7d0'],[0.4,'#4ade80'],[0.6,'#16a34a'],[0.8,'#15803d'],[1,'#14532d']]
        : [[0,'#eff6ff'],[0.2,'#bfdbfe'],[0.4,'#60a5fa'],[0.6,'#2563eb'],[0.8,'#1e40af'],[1,'#1e3a8a']];
    var stressLabel = isMander ? 'Confined Stress (MPa)' : 'Unconfined Stress (MPa)';

    // Strain colorscale: diverging (blue=compression, red=tension)
    var strainCS = [[0,'#1e3a8a'],[0.15,'#2563eb'],[0.3,'#93c5fd'],[0.5,'#f5f5f5'],[0.7,'#fca5a5'],[0.85,'#dc2626'],[1,'#7f1d1d']];

    var traces = [{
        z: zStress, y: fiberData.y, x: xVals,
        type: 'heatmap', xgap: 1, ygap: 1,
        colorscale: stressCS, zmid: 0,
        colorbar: { title: stressLabel, thickness: 12, len: 0.8, titleside: 'right', titlefont: { size: 10 } },
        xaxis: 'x', yaxis: 'y',
        hovertemplate: 'y=%{y:.0f}mm<br>\u03c3=%{z:.2f} MPa<extra></extra>',
    }];

    traces.push({
        z: zStrain, y: fiberData.y, x: xVals,
        type: 'heatmap', xgap: 1, ygap: 1,
        colorscale: strainCS, zmid: 0,
        colorbar: { title: 'Strain \u03b5', thickness: 12, len: 0.8, x: 1.08, titleside: 'right', titlefont: { size: 10 } },
        xaxis: 'x2', yaxis: 'y',
        hovertemplate: 'y=%{y:.0f}mm<br>\u03b5=%{z:.6f}<extra></extra>',
    });

    // Rebar markers
    var rebars = fiberData.rebars || [];
    if (rebars.length > 0) {
        var cover = h - payload.d;
        var nTenBars = parseInt(document.getElementById('n_tension').value) || 4;
        var nCompBars = parseInt(document.getElementById('n_comp').value) || 0;
        for (var ri = 0; ri < rebars.length; ri++) {
            var rb = rebars[ri];
            var nRb = rb.label === 'Tension' ? nTenBars : Math.max(nCompBars, 2);
            var rbSpacing = (b - 2 * cover) / Math.max(nRb - 1, 1);
            var rbX = [], rbY = [];
            for (var rbi = 0; rbi < nRb; rbi++) { rbX.push(cover + rbi * rbSpacing); rbY.push(rb.y); }
            var rbColor = rb.label === 'Tension' ? '#1e40af' : '#dc2626';
            var rbTip = rb.label + ': \u03b5=' + rb.strain.toFixed(5) + ', fs=' + rb.stress.toFixed(0) + ' MPa';
            traces.push({ x: rbX, y: rbY, mode: 'markers', xaxis: 'x', yaxis: 'y', showlegend: false,
                marker: { size: 9, color: rbColor, symbol: 'circle', line: { width: 2, color: '#fff' } }, hovertemplate: rbTip + '<extra></extra>' });
            traces.push({ x: rbX, y: rbY, mode: 'markers', xaxis: 'x2', yaxis: 'y', showlegend: false,
                marker: { size: 9, color: rbColor, symbol: 'circle', line: { width: 2, color: '#fff' } }, hovertemplate: rbTip + '<extra></extra>' });
        }
    }

    // NA line
    var naY = h - c;
    var shapes = [
        { type: 'line', x0: 0, x1: b, y0: naY, y1: naY, xref: 'x', line: { color: '#dc2626', width: 2.5, dash: 'dash' } },
        { type: 'line', x0: 0, x1: b, y0: naY, y1: naY, xref: 'x2', line: { color: '#dc2626', width: 2.5, dash: 'dash' } },
    ];

    var modelTag = isMander ? ' [Mander Confined]' : ' [Hognestad Unconfined]';
    Plotly.newPlot('chart-fiber', traces, {
        title: { text: 'Fiber Distribution at Ultimate' + modelTag + ' (c=' + c.toFixed(1) + ' mm)', font: { size: 13 } },
        yaxis: { title: 'y (mm)', range: [-5, h + 5], gridcolor: '#e5e7eb', zeroline: false },
        xaxis: { title: 'x (mm)', domain: [0, 0.43], range: [-5, b + 5], gridcolor: '#e5e7eb' },
        xaxis2: { title: 'x (mm)', domain: [0.54, 0.97], range: [-5, b + 5], gridcolor: '#e5e7eb' },
        height: 500, margin: { t: 40, r: 75, b: 50, l: 60 },
        plot_bgcolor: '#f8fafc', paper_bgcolor: '#fff',
        shapes: shapes,
        annotations: [
            { x: 0.215, y: 1.06, xref: 'paper', yref: 'paper', text: '<b>' + (isMander ? 'Confined' : 'Unconfined') + ' Stress</b>', showarrow: false, font: { size: 11 } },
            { x: 0.755, y: 1.06, xref: 'paper', yref: 'paper', text: '<b>Strain Profile</b>', showarrow: false, font: { size: 11 } },
            { x: b + 10, y: naY, xref: 'x', text: 'NA', showarrow: false, font: { size: 9, color: '#dc2626' } },
        ],
    }, { responsive: true, displayModeBar: false });
}

function renderAdvancedReport(payload, sp, pts, advPts, hog, events, ductility, concreteModelParams) {
    var h = '';
    var isMander = concreteModelParams && concreteModelParams.model === 'mander';
    var modelLabel = isMander ? 'Mander Confined' : 'Hognestad Parabolic';

    // Theory section
    h += '<div class="report-section">';
    h += '<h4>Theory &mdash; Moment-Curvature Relationship</h4>';
    h += '<p class="report-ref">Anwar &amp; Najam (2017), Ch. 6; Hognestad (1951); Mander et al. (1988)</p>';
    h += '<p style="font-size:.85rem;margin-top:.5rem;">The moment-curvature (M-&phi;) curve characterizes the cross-section\'s flexural response through the full range of loading from elastic to ultimate. It provides cracking moment, yield moment, ultimate capacity, ductility ratio, and effective stiffness at any load level.</p>';
    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>Curvature Definition</b> (Eq. 6.4):</p>';
    h += '<div class="report-eq">\\[ \\varphi = \\frac{\\varepsilon_c}{kd} = \\frac{\\varepsilon_s}{d(1-k)} = \\frac{\\varepsilon_c + \\varepsilon_s}{d} \\]</div>';
    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>Procedure:</b> The extreme compression fiber strain &epsilon;<sub>c,top</sub> is incremented from 0 to &epsilon;<sub>cu</sub>. At each step, the neutral axis depth <i>c</i> is found by binary search to satisfy axial force equilibrium. The concrete fibers contribute compressive force based on the selected stress-strain model, and steel layers contribute force based on the elastic-perfectly-plastic model.</p>';
    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>Concrete Models:</b></p>';
    h += '<ul style="font-size:.82rem;color:var(--gray-600);margin:.25rem 0 0 1.25rem;">';
    h += '<li><b>Hognestad (1951):</b> Parabolic ascending f<sub>c</sub> = f\'<sub>c</sub>[2(&epsilon;/&epsilon;<sub>co</sub>) - (&epsilon;/&epsilon;<sub>co</sub>)&sup2;] + linear descending to 0.85f\'<sub>c</sub> at &epsilon;<sub>cu</sub> = 0.003</li>';
    h += '<li><b>Mander et al. (1988):</b> f<sub>c</sub> = f\'<sub>cc</sub>&middot;x&middot;r / (r-1+x<sup>r</sup>) where x = &epsilon;/&epsilon;<sub>cc</sub>, confinement increases both strength and ultimate strain</li>';
    h += '</ul>';
    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>Steel Model:</b> Elastic-perfectly-plastic: f<sub>s</sub> = min(E<sub>s</sub>&middot;&epsilon;<sub>s</sub>, f<sub>y</sub>)</p>';
    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>Key Outputs</b> (Eqs. 6.5&ndash;6.7):</p>';
    h += '<div class="report-eq">\\[ EI_{eff} = \\frac{M}{\\varphi} \\quad;\\quad \\mu = \\frac{\\varphi_u}{\\varphi_y} \\quad;\\quad \\theta = \\varphi \\times L_p \\]</div>';
    h += '</div>';

    // Concrete model section
    h += '<div class="report-section">';
    h += '<h4>Advanced Analysis &mdash; ' + modelLabel + ' Concrete Model with Fiber Approach</h4>';

    if (isMander) {
        h += '<p class="report-ref">Mander, Priestley &amp; Park (1988)</p>';
        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Concrete Model (Mander Confined):</b></p>';
        h += '<div class="report-eq">\\[ f_c = \\frac{f\'_{cc} \\cdot x \\cdot r}{r - 1 + x^r} \\quad \\text{where } x = \\frac{\\varepsilon_c}{\\varepsilon_{cc}}, \\; r = \\frac{E_c}{E_c - E_{sec}} \\]</div>';
        h += '<p style="font-size:.85rem;">f\'<sub>cc</sub> = ' + concreteModelParams.fcc.toFixed(2) + ' MPa, ';
        h += '&epsilon;<sub>cc</sub> = ' + concreteModelParams.ecc.toFixed(6) + ', ';
        h += '&epsilon;<sub>cu</sub> = ' + concreteModelParams.ecu.toFixed(6) + ', ';
        h += 'r = ' + concreteModelParams.r.toFixed(4) + '</p>';
    } else {
        h += '<p class="report-ref">Hognestad (1951)</p>';
        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Concrete Model (Hognestad):</b></p>';
        var hogP = concreteModelParams || hog;
        h += '<div class="report-eq">\\[ \\varepsilon_{co} = \\frac{2 f\'_c}{E_c} = \\frac{2 \\times ' + payload.fc + '}{' + sp.ec_mod + '} = ' + (hogP.eco || 0) + ' \\]</div>';
        h += '<div class="report-eq">\\[ \\text{Ascending: } f_c = f\'_c \\left( \\frac{2\\varepsilon_c}{\\varepsilon_{co}} - \\left(\\frac{\\varepsilon_c}{\\varepsilon_{co}}\\right)^2 \\right) \\quad \\text{for } \\varepsilon_c \\leq \\varepsilon_{co} \\]</div>';
        h += '<div class="report-eq">\\[ \\text{Descending: } f_c = f\'_c \\left( 1 - 0.15 \\frac{\\varepsilon_c - \\varepsilon_{co}}{\\varepsilon_{cu} - \\varepsilon_{co}} \\right) \\quad \\text{for } \\varepsilon_{co} < \\varepsilon_c \\leq \\varepsilon_{cu} \\]</div>';
    }

    h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Steel Model:</b> Elastic-perfectly-plastic</p>';
    h += '<div class="report-eq">\\[ f_s = \\min(E_s \\cdot \\varepsilon_s, \\, f_y) \\]</div>';

    if (payload.axial_load && payload.axial_load !== 0) {
        h += '<p style="font-size:.85rem;"><b>Axial Load:</b> P = ' + payload.axial_load + ' kN (' + (payload.axial_load > 0 ? 'compression' : 'tension') + ')</p>';
    }
    if (payload.as_compression && payload.as_compression > 0) {
        h += '<p style="font-size:.85rem;"><b>Compression Steel:</b> A\'s = ' + payload.as_compression.toFixed(1) + ' mm\u00b2 at d\' = ' + payload.d_prime + ' mm</p>';
    }
    h += '</div>';

    // Events table
    if (events && events.length > 0) {
        h += '<div class="report-section">';
        h += '<h4>Key Events on M-&phi; Curve</h4>';
        h += '<p class="report-ref">Anwar &amp; Najam (2017), Ch. 6, Fig. 6.12</p>';
        h += '<table class="report-table">';
        h += '<tr><th>Event</th><th>&phi; (1/mm)</th><th>M (kN-m)</th><th>Step</th></tr>';
        for (var k = 0; k < events.length; k++) {
            var ev = events[k];
            h += '<tr><td style="text-align:left;font-weight:600;">' + ev.event + '</td>';
            h += '<td>' + ev.phi.toExponential(4) + '</td>';
            h += '<td>' + ev.moment_knm + '</td>';
            h += '<td>' + ev.step + '</td></tr>';
        }
        h += '</table>';
        h += '</div>';
    }

    // Ductility section
    if (ductility) {
        h += '<div class="report-section">';
        h += '<h4>Ductility Analysis</h4>';
        h += '<p class="report-ref">Anwar &amp; Najam (2017), Ch. 6, Eqs. 6.5&ndash;6.7</p>';
        h += '<div class="report-eq">\\[ \\mu = \\frac{\\varphi_u}{\\varphi_y} = \\frac{' + ductility.phi_ultimate.toExponential(4) + '}{' + ductility.phi_yield.toExponential(4) + '} = ' + ductility.mu.toFixed(2) + ' \\]</div>';
        h += '<table class="report-table">';
        h += '<tr><th>Parameter</th><th>At Yield</th><th>At Ultimate</th></tr>';
        h += '<tr><td style="text-align:left;">&phi; (1/mm)</td><td>' + ductility.phi_yield.toExponential(4) + '</td><td>' + ductility.phi_ultimate.toExponential(4) + '</td></tr>';
        h += '<tr><td style="text-align:left;">M (kN-m)</td><td>' + ductility.moment_yield_knm + '</td><td>' + ductility.moment_ultimate_knm + '</td></tr>';
        h += '<tr><td style="text-align:left;">EI<sub>eff</sub> (N-mm\u00b2)</td><td>' + ductility.ei_yield.toExponential(4) + '</td><td>' + ductility.ei_ultimate.toExponential(4) + '</td></tr>';
        h += '</table>';
        h += '<div class="report-result">&mu; = ' + ductility.mu.toFixed(2) + '</div>';
        h += '</div>';
    }

    // Incremental results table
    h += '<div class="report-section">';
    h += '<h4>Incremental M-&phi; Results (' + advPts.length + ' steps)</h4>';
    h += '<div style="max-height:400px;overflow-y:auto;border:1px solid var(--gray-200);border-radius:4px;">';
    h += '<table class="report-table">';
    h += '<tr><th>Step</th><th>&epsilon;<sub>c,top</sub></th><th>c (mm)</th><th>&phi; (1/mm)</th><th>M (kN-m)</th></tr>';
    for (var i = 0; i < advPts.length; i++) {
        var ap = advPts[i];
        h += '<tr><td>' + (i+1) + '</td><td>' + ap.ec_top.toFixed(6) + '</td><td>' + ap.c + '</td>';
        h += '<td>' + ap.phi.toExponential(4) + '</td><td>' + ap.moment_knm + '</td></tr>';
    }
    h += '</table></div>';
    h += '</div>';

    // Comparison
    h += '<div class="report-section">';
    h += '<h4>QAQC &mdash; Quick vs Advanced Comparison</h4>';
    h += '<table class="report-table">';
    h += '<tr><th>Parameter</th><th>Quick (6-Point)</th><th>Advanced (' + modelLabel + ')</th></tr>';
    var quickUlt = pts.length > 0 ? pts[pts.length - 1] : { moment_knm: 0, phi: 0 };
    var advUlt = advPts.length > 0 ? advPts[advPts.length - 1] : { moment_knm: 0, phi: 0 };
    h += '<tr><td style="text-align:left;">Ultimate Moment (kN-m)</td><td>' + quickUlt.moment_knm + '</td><td>' + advUlt.moment_knm + '</td></tr>';
    h += '<tr><td style="text-align:left;">Ultimate Curvature (1/mm)</td><td>' + (quickUlt.phi ? quickUlt.phi.toExponential(4) : '0') + '</td><td>' + (advUlt.phi ? advUlt.phi.toExponential(4) : '0') + '</td></tr>';
    var mDiff = quickUlt.moment_knm !== 0 ? (((advUlt.moment_knm - quickUlt.moment_knm) / quickUlt.moment_knm) * 100).toFixed(1) : 'N/A';
    h += '<tr><td style="text-align:left;">Moment Difference</td><td colspan="2">' + mDiff + '%</td></tr>';
    h += '<tr><td style="text-align:left;">Concrete Model</td><td>Whitney Block</td><td>' + modelLabel + '</td></tr>';
    h += '<tr><td style="text-align:left;">Curve Resolution</td><td>6 points</td><td>' + advPts.length + ' points</td></tr>';
    h += '</table>';
    h += '</div>';

    document.getElementById('results-report').style.display = '';
    document.getElementById('results-report').innerHTML = h;
    if (window.MathJax) MathJax.typeset();
}

function renderMThetaResults(payload, mphi, mtheta, backbone) {
    var pts = mtheta.points || [];
    var events = mtheta.events || [];
    var duct = mtheta.ductility_rotation || null;

    // Summary
    var s = '';
    if (duct) {
        s += '<div class="report-result" style="margin-bottom:.75rem;">';
        s += '<span style="font-size:.82rem;font-weight:400;color:#333;">Rotation Ductility</span><br>';
        s += '&#956;<sub>&#952;</sub> = &#952;<sub>u</sub> / &#952;<sub>y</sub> = ' + duct.mu_theta.toFixed(2);
        s += '<span style="font-size:.8rem;font-weight:400;color:var(--gray-600);margin-left:1rem;">';
        s += 'Lp = ' + mtheta.lp + ' mm</span>';
        if (backbone) {
            s += '<br><span style="font-size:.82rem;font-weight:400;color:#333;">Backbone ('+backbone.params.table_ref+')</span>';
            s += '<span style="font-size:.8rem;font-weight:400;color:var(--gray-600);margin-left:.5rem;">';
            s += 'a=' + backbone.params.a + ' b=' + backbone.params.b + ' c=' + backbone.params.c + '</span>';
        }
        s += '</div>';
    }
    s += '<table class="report-table">';
    s += '<tr><th>Event</th><th>&#952; (mrad)</th><th>M (kN-m)</th></tr>';
    for (var i = 0; i < events.length; i++) {
        var ev = events[i];
        s += '<tr><td style="text-align:left;">' + ev.event + '</td>';
        s += '<td>' + ev.theta_mrad.toFixed(4) + '</td>';
        s += '<td>' + ev.moment_knm + '</td></tr>';
    }
    s += '</table>';
    document.getElementById('results-summary').innerHTML = s;

    // M-theta chart
    var thetas = [0], moments = [0];
    for (var j = 0; j < pts.length; j++) {
        thetas.push(pts[j].theta_mrad);
        moments.push(pts[j].moment_knm);
    }
    var plotCfg = { responsive: true, displayModeBar: false };
    var baseLayout = {
        xaxis: { title: { text: 'Plastic Rotation (rad)', font: { size: 12, family: 'Arial' } }, rangemode: 'tozero', gridcolor: '#e5e7eb', gridwidth: 1, linecolor: '#333', linewidth: 1.5, mirror: true, ticks: 'outside', ticklen: 5, tickcolor: '#333' },
        yaxis: { title: { text: 'Q / Q<sub>y</sub>', font: { size: 12, family: 'Arial' } }, rangemode: 'tozero', gridcolor: '#e5e7eb', gridwidth: 1, linecolor: '#333', linewidth: 1.5, mirror: true, ticks: 'outside', ticklen: 5, tickcolor: '#333' },
        height: 480, margin: { t: 45, r: 30, b: 60, l: 65 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff', hovermode: 'closest',
        showlegend: true, legend: { x: 0.98, xanchor: 'right', y: 0.02, yanchor: 'bottom', bgcolor: 'rgba(255,255,255,0.9)', bordercolor: '#d1d5db', borderwidth: 1, font: { size: 10, family: 'Arial' } },
        font: { family: 'Arial, sans-serif', size: 11 },
    };

    // Event markers helper
    var evtColors = { 'Cracking': '#f59e0b', 'Steel Yield': '#16a34a', 'Peak Moment': '#7c3aed', 'Ultimate': '#dc2626' };
    var evtSymbols = { 'Cracking': 'diamond', 'Steel Yield': 'triangle-up', 'Peak Moment': 'star', 'Ultimate': 'x' };
    function addEventMarkers(trArr) {
        for (var k = 0; k < events.length; k++) {
            var ev = events[k];
            trArr.push({
                x: [ev.theta_mrad], y: [ev.moment_knm],
                mode: 'markers+text', showlegend: false,
                marker: { size: 10, color: evtColors[ev.event] || '#333', symbol: evtSymbols[ev.event] || 'diamond', line: { width: 1.5, color: '#fff' } },
                text: [ev.event], textposition: 'bottom right',
                textfont: { size: 8, color: evtColors[ev.event] || '#333' },
            });
        }
    }

    // Backbone helpers
    var bbX = [], bbY = [], bbShapes = [], bbLabels = [], yMax = Math.max.apply(null, moments) * 1.1;
    if (backbone) {
        var bbPts = backbone.backbone_points || [];
        for (var bi = 0; bi < bbPts.length; bi++) { bbX.push(bbPts[bi].theta_mrad); bbY.push(bbPts[bi].moment_knm); }
        var acc = backbone.acceptance;
        var accLines = [
            { x: acc.io_mrad, label: 'IO', color: '#16a34a', dash: 'dash' },
            { x: acc.ls_pri_mrad, label: 'LS (Pri)', color: '#f59e0b', dash: 'dashdot' },
            { x: acc.cp_pri_mrad, label: 'CP (Pri)', color: '#dc2626', dash: 'dot' },
        ];
        for (var ai = 0; ai < accLines.length; ai++) {
            bbShapes.push({ type: 'line', x0: accLines[ai].x, x1: accLines[ai].x, y0: 0, y1: yMax, line: { color: accLines[ai].color, width: 1.5, dash: accLines[ai].dash } });
            bbLabels.push({ x: [accLines[ai].x], y: [yMax * 0.95], mode: 'text', showlegend: false, text: [accLines[ai].label], textfont: { size: 10, color: accLines[ai].color } });
        }
    }

    function bbPointLabels(trArr) {
        if (!backbone) return;
        var bbPts = backbone.backbone_points || [];
        for (var bl = 0; bl < bbPts.length; bl++) {
            trArr.push({ x: [bbPts[bl].theta_mrad], y: [bbPts[bl].moment_knm], mode: 'text', showlegend: false, text: [bbPts[bl].label], textposition: 'top left', textfont: { size: 11, color: '#1e40af', family: 'Arial Black' } });
        }
    }

    // ── Chart 1: M-theta only ──
    var tr1 = [{ x: thetas, y: moments, mode: 'lines', name: 'M-\u03b8 Envelope', line: { color: '#7c3aed', width: 2.5 } }];
    addEventMarkers(tr1);
    Plotly.newPlot('chart-mtheta', tr1, Object.assign({}, baseLayout, { title: { text: '1. Moment-Rotation Diagram (Lp = ' + mtheta.lp + ' mm)', font: { size: 14 } } }), plotCfg);

    // ── Chart 2: Backbone only ──
    if (backbone) {
        var tr2 = [{ x: bbX, y: bbY, mode: 'lines+markers', name: 'ASCE 41 Backbone', line: { color: '#2563eb', width: 3 }, marker: { size: 8, color: '#2563eb' } }];
        bbPointLabels(tr2);
        tr2 = tr2.concat(bbLabels);
        document.getElementById('chart-backbone').style.display = '';
        Plotly.newPlot('chart-backbone', tr2, Object.assign({}, baseLayout, {
            title: { text: '2. Generalized Force-Deformation Backbone', font: { size: 14 } },
            shapes: bbShapes,
            yaxis: { title: 'Moment, M (kN-m)', rangemode: 'tozero', gridcolor: '#e5e7eb', range: [0, yMax] },
        }), plotCfg);
    }

    // ── Chart 3: Combined ──
    if (backbone) {
        var tr3 = [
            { x: thetas, y: moments, mode: 'lines', name: 'M-\u03b8 Envelope', line: { color: '#7c3aed', width: 2 } },
            { x: bbX, y: bbY, mode: 'lines+markers', name: 'ASCE 41 Backbone', line: { color: '#2563eb', width: 3 }, marker: { size: 7, color: '#2563eb' } },
        ];
        bbPointLabels(tr3);
        addEventMarkers(tr3);
        tr3 = tr3.concat(bbLabels);
        document.getElementById('chart-combined').style.display = '';
        Plotly.newPlot('chart-combined', tr3, Object.assign({}, baseLayout, {
            title: { text: '3. M-\u03b8 Envelope vs ASCE 41 Backbone', font: { size: 14 } },
            shapes: bbShapes,
        }), plotCfg);
    }

    // ── Chart 4: Ductility Ratio ──
    if (duct) {
        var ty = duct.theta_y_mrad, tu = duct.theta_u_mrad;
        var my = duct.moment_yield_knm, mu_val = duct.moment_ultimate_knm;
        var muR = duct.mu_theta;
        document.getElementById('chart-ductility').style.display = '';

        var tr4 = [];
        // Full M-theta curve (light background)
        tr4.push({ x: thetas, y: moments, mode: 'lines', name: 'M-\u03b8 Curve',
            line: { color: '#d1d5db', width: 1.5 }, showlegend: false });

        // Yield region fill (0 to theta_y)
        var fillYx = [0], fillYy = [0];
        for (var fi = 0; fi < pts.length; fi++) {
            if (pts[fi].theta_mrad <= ty) { fillYx.push(pts[fi].theta_mrad); fillYy.push(pts[fi].moment_knm); }
        }
        fillYx.push(ty, ty, 0); fillYy.push(my, 0, 0);
        tr4.push({ x: fillYx, y: fillYy, fill: 'toself', fillcolor: 'rgba(22,163,106,0.12)',
            line: { width: 0 }, name: 'Elastic Range (\u03b8 \u2264 \u03b8y)', hoverinfo: 'skip' });

        // Plastic region fill (theta_y to theta_u)
        var fillPx = [ty], fillPy = [0];
        for (var fi = 0; fi < pts.length; fi++) {
            if (pts[fi].theta_mrad >= ty && pts[fi].theta_mrad <= tu) { fillPx.push(pts[fi].theta_mrad); fillPy.push(pts[fi].moment_knm); }
        }
        fillPx.push(tu, tu, ty); fillPy.push(mu_val, 0, 0);
        tr4.push({ x: fillPx, y: fillPy, fill: 'toself', fillcolor: 'rgba(37,99,235,0.10)',
            line: { width: 0 }, name: 'Plastic Range (\u03b8y < \u03b8 \u2264 \u03b8u)', hoverinfo: 'skip' });

        // Yield point marker
        tr4.push({ x: [ty], y: [my], mode: 'markers+text', name: '\u03b8y = ' + ty.toFixed(2) + ' mrad',
            marker: { size: 12, color: '#16a34a', symbol: 'triangle-up', line: { width: 2, color: '#fff' } },
            text: ['\u03b8y'], textposition: 'top right', textfont: { size: 11, color: '#16a34a', family: 'Arial Black' } });

        // Ultimate point marker
        tr4.push({ x: [tu], y: [mu_val], mode: 'markers+text', name: '\u03b8u = ' + tu.toFixed(2) + ' mrad',
            marker: { size: 12, color: '#dc2626', symbol: 'x', line: { width: 2, color: '#fff' } },
            text: ['\u03b8u'], textposition: 'top right', textfont: { size: 11, color: '#dc2626', family: 'Arial Black' } });

        // Vertical lines at yield and ultimate
        var ductShapes = [
            { type: 'line', x0: ty, x1: ty, y0: 0, y1: my, line: { color: '#16a34a', width: 2, dash: 'dash' } },
            { type: 'line', x0: tu, x1: tu, y0: 0, y1: mu_val, line: { color: '#dc2626', width: 2, dash: 'dash' } },
            // Horizontal arrow from theta_y to theta_u
            { type: 'line', x0: ty, x1: tu, y0: my * 0.35, y1: my * 0.35, line: { color: '#1e40af', width: 2 } },
        ];

        // mu annotation
        var ductAnnotations = [
            { x: (ty + tu) / 2, y: my * 0.35, text: '\u03bc\u03b8 = \u03b8u/\u03b8y = ' + tu.toFixed(2) + '/' + ty.toFixed(2) + ' = <b>' + muR.toFixed(2) + '</b>',
              showarrow: false, font: { size: 12, color: '#1e40af', family: 'Arial' }, yshift: 16,
              bgcolor: 'rgba(255,255,255,0.9)', bordercolor: '#1e40af', borderwidth: 1, borderpad: 4 },
            { x: ty, y: -my * 0.08, text: '\u03b8y=' + ty.toFixed(2), showarrow: false, font: { size: 9, color: '#16a34a' } },
            { x: tu, y: -my * 0.08, text: '\u03b8u=' + tu.toFixed(2), showarrow: false, font: { size: 9, color: '#dc2626' } },
        ];

        Plotly.newPlot('chart-ductility', tr4, Object.assign({}, baseLayout, {
            title: { text: '4. Ductility Ratio \u03bc\u03b8 = ' + muR.toFixed(2), font: { size: 14 } },
            shapes: ductShapes, annotations: ductAnnotations,
        }), plotCfg);
    }

    // Section chart from mphi data
    var sp = mphi.section_properties || {};
    renderSectionChart(payload, sp);

    // Concrete model chart + steel chart
    var modelParams = mphi.concrete_model_params || {};
    var hogFallback = mphi.hognestad_params || {};
    renderConcreteModelChart(modelParams, hogFallback);
    renderSteelChart(payload);
    document.getElementById('charts-row').style.display = '';

    // Report
    var h = '';
    h += '<div class="report-section">';
    h += '<h4>Moment-Rotation Analysis</h4>';
    h += '<p class="report-ref">Anwar &amp; Najam (2017), Ch. 6, Eq. 6.8 &mdash; \u03b8 = \u03c6 &times; Lp</p>';
    h += '<div class="report-eq">\\[ \\theta = \\varphi \\times L_p = \\varphi \\times ' + mtheta.lp + ' \\text{ mm} \\]</div>';
    if (duct) {
        h += '<div class="report-eq">\\[ \\mu_\\theta = \\frac{\\theta_u}{\\theta_y} = \\frac{' + duct.theta_u_mrad.toFixed(4) + '}{' + duct.theta_y_mrad.toFixed(4) + '} = ' + duct.mu_theta.toFixed(2) + ' \\]</div>';
        h += '<table class="report-table">';
        h += '<tr><th>Parameter</th><th>At Yield</th><th>At Ultimate</th></tr>';
        h += '<tr><td style="text-align:left;">\u03b8 (mrad)</td><td>' + duct.theta_y_mrad.toFixed(4) + '</td><td>' + duct.theta_u_mrad.toFixed(4) + '</td></tr>';
        h += '<tr><td style="text-align:left;">M (kN-m)</td><td>' + duct.moment_yield_knm + '</td><td>' + duct.moment_ultimate_knm + '</td></tr>';
        h += '</table>';
        h += '<div class="report-result">\u03bc<sub>\u03b8</sub> = ' + duct.mu_theta.toFixed(2) + '</div>';
    }
    h += '</div>';

    // ASCE 41 Backbone report
    if (backbone) {
        var bp = backbone.params;
        var ba = backbone.acceptance;
        var bsteps = backbone.calculation_steps || [];

        h += '<div class="report-section">';
        h += '<h4>Generalized Force-Deformation Backbone &mdash; ' + bp.table_ref + '</h4>';
        h += '<p class="report-ref">' + bp.table_ref + ' Fig. 10-1, Table 10-7 (Condition i &mdash; Flexure-Controlled Beams)</p>';

        // Step-by-step calculations with MathJax
        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Step 1: Whitney Stress Block Factor</b></p>';
        h += '<div class="report-eq">\\[ \\beta_1 = ' + bp.beta1 + ' \\quad (f\'_c = ' + payload.fc + ' \\text{ MPa}) \\]</div>';

        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Step 2: Balanced Reinforcement Ratio</b></p>';
        h += '<div class="report-eq">\\[ \\rho_{bal} = 0.85 \\beta_1 \\frac{f\'_c}{f_y} \\cdot \\frac{\\varepsilon_{cu}}{\\varepsilon_{cu} + \\varepsilon_y} = 0.85 \\times ' + bp.beta1 + ' \\times \\frac{' + payload.fc + '}{' + payload.fy + '} \\times \\frac{0.003}{0.003 + ' + (payload.fy / payload.es).toFixed(6) + '} = ' + bp.rho_bal + ' \\]</div>';

        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Step 3: Reinforcement Ratio</b></p>';
        h += '<div class="report-eq">\\[ \\rho = \\frac{A_s}{b \\cdot d} = \\frac{' + payload.as_tension + '}{' + payload.b + ' \\times ' + payload.d + '} = ' + bp.rho + ' \\]</div>';
        h += '<div class="report-eq">\\[ \\rho\' = \\frac{A\'_s}{b \\cdot d} = ' + bp.rho_prime + ' \\]</div>';
        h += '<div class="report-eq">\\[ \\frac{\\rho - \\rho\'}{\\rho_{bal}} = \\frac{' + bp.rho + ' - ' + bp.rho_prime + '}{' + bp.rho_bal + '} = ' + bp.rho_ratio + ' \\]</div>';

        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Step 4: Shear Stress Ratio</b></p>';
        h += '<div class="report-eq">\\[ \\frac{V}{b_w \\cdot d \\cdot \\sqrt{f\'_c}} = ' + bp.v_ratio + ' \\]</div>';

        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Step 5: Transverse Reinforcement Classification</b></p>';
        h += '<div class="report-eq">\\[ s = ' + payload.stirrup_spacing + ' \\text{ mm} \\quad ; \\quad \\frac{d}{2} = ' + (payload.d / 2).toFixed(1) + ' \\text{ mm} \\quad \\Rightarrow \\quad ' + bp.conf_label + ' \\]</div>';

        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Step 6: Modeling Parameters (' + bp.table_ref + ' Table 10-7)</b></p>';
        h += '<div class="report-eq">\\[ a = ' + bp.a + ' \\text{ rad} \\quad ; \\quad b = ' + bp.b + ' \\text{ rad} \\quad ; \\quad c = ' + bp.c + ' \\]</div>';
        h += '<p style="font-size:.82rem;color:var(--gray-600);">Condition i &mdash; Flexure-controlled, interpolated for (&rho;-&rho;\')/&rho;<sub>bal</sub> = ' + bp.rho_ratio + ', V-ratio = ' + bp.v_ratio + ', ' + bp.conf_label + '</p>';

        h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Step 7: Acceptance Criteria (Plastic Rotation Limits)</b></p>';
        h += '<div class="report-eq">\\[ \\text{IO} = ' + ba.io_plastic + ' \\text{ rad} \\quad ; \\quad \\text{LS}_{pri} = ' + ba.ls_pri_plastic + ' \\text{ rad} \\quad ; \\quad \\text{CP}_{pri} = ' + ba.cp_pri_plastic + ' \\text{ rad} \\]</div>';

        // Modeling parameters summary table
        h += '<p style="font-size:.85rem;margin-top:1rem;"><b>Summary</b></p>';
        h += '<table class="report-table">';
        h += '<tr><th>Parameter</th><th>Value</th><th>Description</th></tr>';
        h += '<tr><td>\\(a\\)</td><td>' + bp.a + ' rad</td><td>Plastic rotation at onset of strength degradation</td></tr>';
        h += '<tr><td>\\(b\\)</td><td>' + bp.b + ' rad</td><td>Plastic rotation at residual strength</td></tr>';
        h += '<tr><td>\\(c\\)</td><td>' + bp.c + '</td><td>Residual strength ratio \\(Q/Q_y\\)</td></tr>';
        h += '<tr><td>\\(\\rho_{bal}\\)</td><td>' + bp.rho_bal + '</td><td>Balanced reinforcement ratio</td></tr>';
        h += '<tr><td>\\((\\rho-\\rho\')/\\rho_{bal}\\)</td><td>' + bp.rho_ratio + '</td><td>Relative reinforcement ratio</td></tr>';
        h += '<tr><td>\\(V/(b_w d\\sqrt{f\'_c})\\)</td><td>' + bp.v_ratio + '</td><td>Shear stress ratio</td></tr>';
        h += '<tr><td>Trans. Reinf.</td><td>' + bp.conf_label + '</td><td>\\(s \\leq d/2 \\Rightarrow\\) Conforming</td></tr>';
        h += '</table>';

        // Backbone points table with derivation
        h += '<p style="font-size:.85rem;margin-top:1rem;"><b>Backbone Points (Fig. 10-1) &mdash; Derivation</b></p>';
        h += '<p style="font-size:.82rem;color:var(--gray-600);">The generalized force-deformation relationship defines the nonlinear response using five control points. Yield rotation \\(\\theta_y\\) and yield moment \\(M_y\\) are obtained from the M-\\(\\varphi\\) analysis. Plastic rotation parameters \\(a\\), \\(b\\), and residual strength ratio \\(c\\) are from Table 10-7.</p>';

        h += '<div class="report-eq">\\[ \\text{Point A (Origin):} \\quad \\theta_A = 0 \\quad;\\quad M_A = 0 \\]</div>';
        h += '<div class="report-eq">\\[ \\text{Point B (Yield):} \\quad \\theta_B = \\theta_y = ' + bp.theta_y_rad.toFixed(6) + ' \\text{ rad} \\quad;\\quad M_B = M_y = ' + bp.my_knm + ' \\text{ kN-m} \\]</div>';
        h += '<div class="report-eq">\\[ \\text{Point C (Plateau End):} \\quad \\theta_C = \\theta_y + a = ' + bp.theta_y_rad.toFixed(6) + ' + ' + bp.a + ' = ' + (bp.theta_y_rad + bp.a).toFixed(6) + ' \\text{ rad} \\quad;\\quad M_C = M_y = ' + bp.my_knm + ' \\text{ kN-m} \\]</div>';
        h += '<div class="report-eq">\\[ \\text{Point D (Residual Drop):} \\quad \\theta_D = \\theta_C = ' + (bp.theta_y_rad + bp.a).toFixed(6) + ' \\text{ rad} \\quad;\\quad M_D = c \\times M_y = ' + bp.c + ' \\times ' + bp.my_knm + ' = ' + (bp.c * bp.my_knm).toFixed(2) + ' \\text{ kN-m} \\]</div>';
        h += '<div class="report-eq">\\[ \\text{Point E (Ultimate):} \\quad \\theta_E = \\theta_y + b = ' + bp.theta_y_rad.toFixed(6) + ' + ' + bp.b + ' = ' + (bp.theta_y_rad + bp.b).toFixed(6) + ' \\text{ rad} \\quad;\\quad M_E = c \\times M_y = ' + (bp.c * bp.my_knm).toFixed(2) + ' \\text{ kN-m} \\]</div>';

        h += '<table class="report-table">';
        h += '<tr><th>Point</th><th>Derivation</th><th>&theta; (rad)</th><th>&theta; (mrad)</th><th>M (kN-m)</th><th>Q/Q<sub>y</sub></th></tr>';
        var bbp = backbone.backbone_points;
        var derivations = [
            '\\(\\theta = 0\\)',
            '\\(\\theta_y\\) from M-\\(\\varphi\\)',
            '\\(\\theta_y + a = ' + bp.theta_y_rad.toFixed(4) + ' + ' + bp.a + '\\)',
            '\\(\\theta_C\\), \\(M = c \\times M_y\\)',
            '\\(\\theta_y + b = ' + bp.theta_y_rad.toFixed(4) + ' + ' + bp.b + '\\)',
        ];
        for (var pi = 0; pi < bbp.length; pi++) {
            h += '<tr><td><b>' + bbp[pi].label + '</b></td><td style="text-align:left;font-size:.78rem;">' + derivations[pi] + '</td>';
            h += '<td>' + bbp[pi].theta_rad.toFixed(6) + '</td>';
            h += '<td>' + bbp[pi].theta_mrad.toFixed(4) + '</td><td>' + bbp[pi].moment_knm + '</td>';
            h += '<td>' + bbp[pi].q_ratio + '</td></tr>';
        }
        h += '</table>';

        // Ductility explanation
        h += '<p style="font-size:.85rem;margin-top:1rem;"><b>Ductility Interpretation</b></p>';
        h += '<p class="report-ref">Anwar &amp; Najam (2017), Ch. 6 &mdash; Ductility of Cross-Sections</p>';
        h += '<p style="font-size:.82rem;color:var(--gray-600);margin-top:.5rem;">Ductility is the ability of a member to sustain large deformation without fracture. The ductility ratio \\(\\mu\\) is the ratio of maximum deformation to the yield deformation. Greater ductility provides greater capacity for energy absorption during seismic events.</p>';
        h += '<div class="report-eq">\\[ \\mu_\\theta = \\frac{\\theta_u}{\\theta_y} \\quad \\text{(Rotation Ductility, Eq. 6.6)} \\]</div>';
        h += '<p style="font-size:.82rem;color:var(--gray-600);">The M-\\(\\theta\\) envelope from the fiber analysis yields \\(\\mu_\\theta = ' + (duct ? duct.mu_theta.toFixed(2) : 'N/A') + '\\). The ASCE 41 backbone provides a simplified idealization where:</p>';
        h += '<ul style="font-size:.82rem;color:var(--gray-600);margin:.25rem 0 0 1.25rem;">';
        h += '<li><b>Segment A&rarr;B</b>: Elastic range (concrete uncracked &rarr; steel yields)</li>';
        h += '<li><b>Segment B&rarr;C</b>: Post-yield plateau, plastic rotation capacity = \\(a = ' + bp.a + '\\) rad before strength degradation begins</li>';
        h += '<li><b>Segment C&rarr;D</b>: Instantaneous strength drop to residual \\(c \\times M_y = ' + bp.c + ' \\times ' + bp.my_knm + ' = ' + (bp.c * bp.my_knm).toFixed(2) + '\\) kN-m</li>';
        h += '<li><b>Segment D&rarr;E</b>: Residual strength plateau, additional plastic rotation = \\(b - a = ' + (bp.b - bp.a).toFixed(4) + '\\) rad</li>';
        h += '</ul>';
        h += '<p style="font-size:.82rem;color:var(--gray-600);margin-top:.5rem;">Confinement is the key to improving ductility. Well-confined sections (\\(s \\leq d/2\\), conforming transverse reinforcement) exhibit larger \\(a\\) and \\(b\\) values, meaning greater rotation capacity before failure.</p>';

        // Acceptance criteria table
        h += '<p style="font-size:.85rem;margin-top:1rem;"><b>Acceptance Criteria (Plastic Rotation Limits)</b></p>';
        h += '<p style="font-size:.82rem;color:var(--gray-600);">Performance levels define the maximum allowable plastic rotation for each structural performance objective. The total rotation at each level = \\(\\theta_y\\) + plastic rotation limit.</p>';
        h += '<table class="report-table">';
        h += '<tr><th>Performance Level</th><th>Plastic Rotation (rad)</th><th>Total &theta; (rad)</th><th>Total &theta; (mrad)</th></tr>';
        h += '<tr style="background:#dcfce7;"><td style="text-align:left;font-weight:600;">IO (Immediate Occupancy)</td><td>' + ba.io_plastic + '</td><td>' + ba.io_rad.toFixed(6) + '</td><td>' + ba.io_mrad + '</td></tr>';
        h += '<tr style="background:#fef3c7;"><td style="text-align:left;font-weight:600;">LS Primary (Life Safety)</td><td>' + ba.ls_pri_plastic + '</td><td>' + ba.ls_pri_rad.toFixed(6) + '</td><td>' + ba.ls_pri_mrad + '</td></tr>';
        h += '<tr style="background:#fee2e2;"><td style="text-align:left;font-weight:600;">CP Primary (Collapse Prevention)</td><td>' + ba.cp_pri_plastic + '</td><td>' + ba.cp_pri_rad.toFixed(6) + '</td><td>' + ba.cp_pri_mrad + '</td></tr>';
        h += '</table>';
        h += '</div>';
    }

    // Incremental M-theta table
    h += '<div class="report-section">';
    h += '<h4>Incremental M-\u03b8 Results (' + pts.length + ' steps)</h4>';
    h += '<div style="max-height:400px;overflow-y:auto;border:1px solid var(--gray-200);border-radius:4px;">';
    h += '<table class="report-table">';
    h += '<tr><th>Step</th><th>\u03b8 (mrad)</th><th>\u03c6 (1/mm)</th><th>M (kN-m)</th></tr>';
    for (var i = 0; i < pts.length; i++) {
        h += '<tr><td>' + (i+1) + '</td><td>' + pts[i].theta_mrad.toFixed(4) + '</td>';
        h += '<td>' + pts[i].phi.toExponential(4) + '</td><td>' + pts[i].moment_knm + '</td></tr>';
    }
    h += '</table></div></div>';

    document.getElementById('results-report').style.display = '';
    document.getElementById('results-report').innerHTML = h;
    document.getElementById('results').style.display = '';
    if (window.MathJax) MathJax.typeset();
}

function renderMPhiChart(pts) {
    var phis = [0], moments = [0];
    for (var i = 0; i < pts.length; i++) {
        phis.push(pts[i].phi || 0);
        moments.push(pts[i].moment_knm || 0);
    }

    var traces = [
        {
            x: phis, y: moments, mode: 'lines+markers',
            name: 'M-\u03c6 Curve',
            line: { color: '#2563eb', width: 2.5 },
            marker: { size: 8, color: '#2563eb' },
        },
    ];

    // Add point labels
    for (var j = 0; j < pts.length; j++) {
        traces.push({
            x: [pts[j].phi], y: [pts[j].moment_knm],
            mode: 'markers+text', showlegend: false,
            marker: { size: 10, color: '#dc2626', symbol: 'circle' },
            text: ['P' + pts[j].point],
            textposition: 'top right',
            textfont: { size: 10, color: '#dc2626', family: 'Arial' },
        });
    }

    var layout = {
        title: { text: 'Moment-Curvature Diagram', font: { size: 14 } },
        xaxis: { title: 'Curvature, \u03c6 (1/mm)', rangemode: 'tozero', gridcolor: '#e5e7eb', tickformat: '.2e' },
        yaxis: { title: 'Moment, M (kN-m)', rangemode: 'tozero', gridcolor: '#e5e7eb' },
        height: 450,
        margin: { t: 40, r: 20, b: 60, l: 70 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff',
        showlegend: false,
        hovermode: 'closest',
    };
    Plotly.newPlot('chart-mphi', traces, layout, { responsive: true, displayModeBar: false });
}

function renderSectionChart(payload, sp) {
    var b = payload.b, h = payload.h, d = payload.d;
    var kd = sp.kd || 0;
    var cover = h - d;

    // Build section shapes
    var shapes = [
        // Outer section rectangle
        { type: 'rect', x0: 0, y0: 0, x1: b, y1: h, line: { color: '#333', width: 2 }, fillcolor: 'rgba(200,200,200,0.15)' },
        // Neutral axis line
        { type: 'line', x0: -30, y0: h - kd, x1: b + 30, y1: h - kd, line: { color: '#dc2626', width: 2, dash: 'dash' } },
        // Effective depth line
        { type: 'line', x0: -20, y0: h - d, x1: b + 20, y1: h - d, line: { color: '#2563eb', width: 1.5, dash: 'dot' } },
    ];

    // Tension rebar (bottom)
    var nBars = Math.round(payload.as_tension / (Math.PI * 12.5 * 12.5));
    if (nBars < 2) nBars = 2;
    if (nBars > 10) nBars = 10;
    var barR = 12;
    var spacing = (b - 2 * cover) / (nBars - 1);
    var rebarX = [], rebarY = [];
    for (var i = 0; i < nBars; i++) {
        var cx = cover + i * spacing;
        rebarX.push(cx);
        rebarY.push(h - d);
    }

    var traces = [
        // Tension rebar markers
        {
            x: rebarX, y: rebarY, mode: 'markers', name: 'Tension Steel',
            marker: { size: 14, color: '#1e40af', symbol: 'circle', line: { width: 2, color: '#fff' } },
        },
        // Compression zone fill
        {
            x: [0, b, b, 0, 0], y: [h, h, h - kd, h - kd, h],
            fill: 'toself', fillcolor: 'rgba(239,68,68,0.15)',
            line: { color: 'rgba(239,68,68,0.4)', width: 1 },
            name: 'Compression Zone', mode: 'lines',
        },
    ];

    // Compression steel (if provided)
    var dp = payload.d_prime || 0;
    var asComp = payload.as_compression || 0;
    if (asComp > 0 && dp > 0) {
        var dbComp = parseFloat(document.getElementById('db_comp').value) || 16;
        var nComp = parseInt(document.getElementById('n_comp').value) || 2;
        if (nComp < 2) nComp = 2;
        var compSpacing = (b - 2 * cover) / Math.max(nComp - 1, 1);
        var compX = [], compY = [];
        for (var j = 0; j < nComp; j++) {
            compX.push(cover + j * compSpacing);
            compY.push(h - dp);
        }
        traces.push({
            x: compX, y: compY, mode: 'markers', name: 'Compression Steel',
            marker: { size: 12, color: '#dc2626', symbol: 'circle', line: { width: 2, color: '#fff' } },
        });
        // d' line
        shapes.push({
            type: 'line', x0: -20, y0: h - dp, x1: b + 20, y1: h - dp,
            line: { color: '#dc2626', width: 1.5, dash: 'dot' },
        });
    }

    var annotations = [
        { x: b + 40, y: h - kd, text: 'NA (kd=' + kd.toFixed(1) + ')', showarrow: false, font: { size: 10, color: '#dc2626' } },
        { x: b + 40, y: h - d, text: 'd=' + d + 'mm', showarrow: false, font: { size: 10, color: '#2563eb' } },
        { x: b / 2, y: h + 25, text: 'b=' + b + 'mm', showarrow: false, font: { size: 10, color: '#333' } },
        { x: -45, y: h / 2, text: 'h=' + h + 'mm', showarrow: false, font: { size: 10, color: '#333' }, textangle: -90 },
    ];
    if (asComp > 0 && dp > 0) {
        annotations.push({ x: b + 40, y: h - dp, text: "d'=" + dp + 'mm', showarrow: false, font: { size: 10, color: '#dc2626' } });
    }

    var layout = {
        title: { text: 'Cross-Section', font: { size: 14 } },
        xaxis: { visible: false, range: [-80, b + 100], scaleanchor: 'y' },
        yaxis: { visible: false, range: [-30, h + 50] },
        shapes: shapes,
        annotations: annotations,
        height: 450,
        margin: { t: 40, r: 20, b: 20, l: 20 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff',
        showlegend: false,
    };
    Plotly.newPlot('chart-section', traces, layout, { responsive: true, displayModeBar: false });
}

function renderStrainStressChart(payload, sp, pts) {
    var H = payload.h, d = payload.d, b = payload.b;
    var kd = sp.kd || 0;
    var fc = payload.fc, fy = payload.fy, es = payload.es;
    var ecu = 0.003;
    var cover = H - d;

    // Strain values
    var strainTop = ecu;
    var strainNA = 0;
    var strainAtD = -ecu * (d - kd) / kd;
    var strainBot = -ecu * (H - kd) / kd;

    // Stress values (Whitney block)
    var beta1 = sp.beta1 || 0.85;
    var a = beta1 * kd;
    var stressBlock = 0.85 * fc;
    var stressSteel = Math.min(Math.abs(strainAtD) * es, fy);

    // Use subplots: [section] [strain] [stress] [forces]
    var traces = [];

    // ── Panel 1: Section outline (x1) ──
    traces.push({
        x: [0, b, b, 0, 0], y: [0, 0, H, H, 0],
        mode: 'lines', line: { color: '#333', width: 2 },
        xaxis: 'x', yaxis: 'y', showlegend: false, hoverinfo: 'skip',
    });
    // Compression zone fill
    traces.push({
        x: [0, b, b, 0, 0], y: [H, H, H - a, H - a, H],
        fill: 'toself', fillcolor: 'rgba(220,38,38,0.12)',
        line: { color: 'rgba(220,38,38,0.4)', width: 1 },
        xaxis: 'x', yaxis: 'y', showlegend: false, hoverinfo: 'skip',
    });
    // Tension rebar
    var nBars = Math.round(payload.as_tension / (Math.PI * 12.5 * 12.5));
    if (nBars < 2) nBars = 2; if (nBars > 8) nBars = 8;
    var barSpacing = (b - 2 * cover) / Math.max(nBars - 1, 1);
    var rebarX = [], rebarY = [];
    for (var i = 0; i < nBars; i++) { rebarX.push(cover + i * barSpacing); rebarY.push(H - d); }
    traces.push({
        x: rebarX, y: rebarY, mode: 'markers',
        marker: { size: 10, color: '#1e40af', symbol: 'circle', line: { width: 1.5, color: '#fff' } },
        xaxis: 'x', yaxis: 'y', showlegend: false, hoverinfo: 'skip',
    });

    // Compression rebar in section panel
    var dp = payload.d_prime || 0;
    var asComp = payload.as_compression || 0;
    if (asComp > 0 && dp > 0) {
        var nComp = parseInt(document.getElementById('n_comp').value) || 2;
        if (nComp < 2) nComp = 2;
        var compSp = (b - 2 * cover) / Math.max(nComp - 1, 1);
        var cRX = [], cRY = [];
        for (var ci = 0; ci < nComp; ci++) { cRX.push(cover + ci * compSp); cRY.push(H - dp); }
        traces.push({
            x: cRX, y: cRY, mode: 'markers',
            marker: { size: 10, color: '#dc2626', symbol: 'circle', line: { width: 1.5, color: '#fff' } },
            xaxis: 'x', yaxis: 'y', showlegend: false, hoverinfo: 'skip',
        });
    }

    // ── Panel 2: Strain diagram (x2) ──
    traces.push({
        x: [strainTop, strainNA, strainBot],
        y: [H, H - kd, 0],
        mode: 'lines', line: { color: '#dc2626', width: 2.5 },
        xaxis: 'x2', yaxis: 'y', name: 'Strain Profile', showlegend: false,
    });
    // Strain fill (compression side)
    traces.push({
        x: [0, strainTop, strainNA, 0], y: [H, H, H - kd, H - kd],
        fill: 'toself', fillcolor: 'rgba(220,38,38,0.08)',
        line: { width: 0 }, xaxis: 'x2', yaxis: 'y', showlegend: false, hoverinfo: 'skip',
    });
    // Strain fill (tension side)
    traces.push({
        x: [0, strainNA, strainBot, 0], y: [H - kd, H - kd, 0, 0],
        fill: 'toself', fillcolor: 'rgba(37,99,235,0.08)',
        line: { width: 0 }, xaxis: 'x2', yaxis: 'y', showlegend: false, hoverinfo: 'skip',
    });

    // ── Panel 3: Stress diagram (x3) ──
    // Whitney rectangular block
    traces.push({
        x: [0, stressBlock, stressBlock, 0],
        y: [H, H, H - a, H - a],
        fill: 'toself', fillcolor: 'rgba(220,38,38,0.2)',
        line: { color: '#dc2626', width: 2 },
        xaxis: 'x3', yaxis: 'y', name: '0.85f\'c Block', showlegend: false,
    });
    // Steel stress as arrow-like marker
    traces.push({
        x: [0, -stressSteel], y: [H - d, H - d],
        mode: 'lines+markers', line: { color: '#1e40af', width: 2.5 },
        marker: { size: [0, 8], symbol: ['circle', 'triangle-left'], color: '#1e40af' },
        xaxis: 'x3', yaxis: 'y', name: 'fs = ' + stressSteel.toFixed(0) + ' MPa', showlegend: false,
    });

    // Compression steel stress arrow in panel 3
    var strainAtDp = dp > 0 ? ecu * (kd - dp) / kd : 0;
    var stressCompSteel = dp > 0 ? Math.min(Math.abs(strainAtDp) * es, fy) : 0;
    if (asComp > 0 && dp > 0) {
        traces.push({
            x: [0, stressCompSteel], y: [H - dp, H - dp],
            mode: 'lines+markers', line: { color: '#dc2626', width: 2.5 },
            marker: { size: [0, 8], symbol: ['circle', 'triangle-right'], color: '#dc2626' },
            xaxis: 'x3', yaxis: 'y', showlegend: false,
        });
    }

    // ── Panel 4: Internal forces (x4) ──
    var Cc = stressBlock * a * b / 1000; // kN
    var Ts = stressSteel * payload.as_tension / 1000; // kN
    var Cs = asComp > 0 ? stressCompSteel * asComp / 1000 : 0; // kN
    // Compression force arrow (concrete)
    traces.push({
        x: [0, Cc], y: [H - a / 2, H - a / 2],
        mode: 'lines+markers', line: { color: '#dc2626', width: 3 },
        marker: { size: [0, 10], symbol: ['circle', 'triangle-right'], color: '#dc2626' },
        xaxis: 'x4', yaxis: 'y', showlegend: false,
    });
    // Compression steel force arrow
    if (Cs > 0) {
        traces.push({
            x: [0, Cs], y: [H - dp, H - dp],
            mode: 'lines+markers', line: { color: '#ef4444', width: 2.5 },
            marker: { size: [0, 8], symbol: ['circle', 'triangle-right'], color: '#ef4444' },
            xaxis: 'x4', yaxis: 'y', showlegend: false,
        });
    }
    // Tension force arrow
    traces.push({
        x: [0, -Ts], y: [H - d, H - d],
        mode: 'lines+markers', line: { color: '#1e40af', width: 3 },
        marker: { size: [0, 10], symbol: ['circle', 'triangle-left'], color: '#1e40af' },
        xaxis: 'x4', yaxis: 'y', showlegend: false,
    });

    // NA line across all panels
    var shapes = [];
    ['x', 'x2', 'x3', 'x4'].forEach(function(xa) {
        shapes.push({
            type: 'line', x0: 0, x1: 1, y0: H - kd, y1: H - kd,
            xref: xa + ' domain', line: { color: '#666', width: 1.5, dash: 'dashdot' },
        });
    });

    var annotations = [
        // Panel titles
        { x: 0.06, y: 1.06, xref: 'paper', yref: 'paper', text: '<b>Section</b>', showarrow: false, font: { size: 11, color: '#333' } },
        { x: 0.32, y: 1.06, xref: 'paper', yref: 'paper', text: '<b>Strain</b>', showarrow: false, font: { size: 11, color: '#333' } },
        { x: 0.60, y: 1.06, xref: 'paper', yref: 'paper', text: '<b>Stress (MPa)</b>', showarrow: false, font: { size: 11, color: '#333' } },
        { x: 0.88, y: 1.06, xref: 'paper', yref: 'paper', text: '<b>Forces (kN)</b>', showarrow: false, font: { size: 11, color: '#333' } },
        // Key values
        { x: strainTop, y: H, xref: 'x2', text: '\u03b5cu=' + strainTop.toFixed(4), showarrow: false, font: { size: 9, color: '#dc2626' }, yshift: 8 },
        { x: strainAtD, y: H - d, xref: 'x2', text: '\u03b5s=' + strainAtD.toFixed(4), showarrow: false, font: { size: 9, color: '#1e40af' }, yshift: -12 },
        { x: stressBlock / 2, y: H - a / 2, xref: 'x3', text: (stressBlock).toFixed(1), showarrow: false, font: { size: 9, color: '#fff', family: 'Arial Black' } },
        { x: Cc / 2, y: H - a / 2, xref: 'x4', text: 'Cc=' + Cc.toFixed(0), showarrow: false, font: { size: 9, color: '#dc2626' }, yshift: 12 },
        { x: -Ts / 2, y: H - d, xref: 'x4', text: 'Ts=' + Ts.toFixed(0), showarrow: false, font: { size: 9, color: '#1e40af' }, yshift: -12 },
        // NA label
        { x: 1.02, y: H - kd, xref: 'x4 domain', text: 'N.A.', showarrow: false, font: { size: 9, color: '#666' } },
        // Dimension labels
        { x: -0.02, y: H - a, xref: 'x3 domain', text: 'a=' + a.toFixed(1), showarrow: false, font: { size: 8, color: '#dc2626' }, xanchor: 'right' },
    ];
    // Compression steel annotations
    if (Cs > 0) {
        annotations.push({ x: Cs / 2, y: H - dp, xref: 'x4', text: 'Cs=' + Cs.toFixed(0), showarrow: false, font: { size: 9, color: '#ef4444' }, yshift: 12 });
        annotations.push({ x: strainAtDp, y: H - dp, xref: 'x2', text: '\u03b5\'s=' + strainAtDp.toFixed(4), showarrow: false, font: { size: 8, color: '#dc2626' }, yshift: 8 });
    }

    var layout = {
        title: { text: 'Section Analysis at Ultimate Limit State', font: { size: 14 }, y: 0.98 },
        yaxis: { title: 'Depth (mm)', range: [-10, H + 30], gridcolor: '#f0f0f0', zeroline: false },
        xaxis:  { domain: [0, 0.15], visible: false, range: [-20, b + 20] },
        xaxis2: { domain: [0.20, 0.42], zeroline: true, zerolinecolor: '#999', zerolinewidth: 1.5, gridcolor: '#f0f0f0', tickformat: '.3f', title: '' },
        xaxis3: { domain: [0.48, 0.72], zeroline: true, zerolinecolor: '#999', zerolinewidth: 1.5, gridcolor: '#f0f0f0', title: '' },
        xaxis4: { domain: [0.78, 1.0], zeroline: true, zerolinecolor: '#999', zerolinewidth: 1.5, gridcolor: '#f0f0f0', title: '' },
        height: 500,
        margin: { t: 50, r: 30, b: 30, l: 60 },
        plot_bgcolor: '#fff', paper_bgcolor: '#fff',
        showlegend: false,
        shapes: shapes,
        annotations: annotations,
    };
    Plotly.newPlot('chart-strain-stress', traces, layout, { responsive: true, displayModeBar: false });
}

function renderReport(payload, sp, pts) {
    var h = '';

    // Section Properties
    h += '<div class="report-section">';
    h += '<h4>1. Section Properties</h4>';
    h += '<p class="report-ref">NSCP 2015 / ACI 318-19</p>';
    h += '<div class="report-eq">\\[ E_c = 4700\\sqrt{f\'_c} = 4700\\sqrt{' + payload.fc + '} = ' + sp.ec + ' \\text{ MPa} \\]</div>';
    h += '<div class="report-eq">\\[ n = \\frac{E_s}{E_c} = \\frac{' + payload.es + '}{' + sp.ec + '} = ' + sp.n + ' \\]</div>';
    h += '<div class="report-eq">\\[ f_r = 0.62\\sqrt{f\'_c} = 0.62\\sqrt{' + payload.fc + '} = ' + sp.fr + ' \\text{ MPa} \\]</div>';
    h += '</div>';

    // Uncracked Section
    h += '<div class="report-section">';
    h += '<h4>2. Uncracked Transformed Section</h4>';
    h += '<div class="report-eq">\\[ I_g = \\frac{bh^3}{12} = \\frac{' + payload.b + ' \\times ' + payload.h + '^3}{12} = ' + sp.ig.toExponential(4) + ' \\text{ mm}^4 \\]</div>';
    h += '<div class="report-eq">\\[ \\bar{y} = ' + sp.y_bar + ' \\text{ mm (from top)} \\]</div>';
    h += '<div class="report-eq">\\[ I_t = ' + sp.it.toExponential(4) + ' \\text{ mm}^4 \\text{ (transformed)} \\]</div>';
    h += '</div>';

    // Cracked Section
    h += '<div class="report-section">';
    h += '<h4>3. Cracked Section Analysis</h4>';
    h += '<div class="report-eq">\\[ \\frac{b}{2} k_d^2 + n A_s k_d - n A_s d = 0 \\]</div>';
    h += '<div class="report-eq">\\[ k_d = ' + sp.kd + ' \\text{ mm (cracked neutral axis depth)} \\]</div>';
    h += '<div class="report-eq">\\[ I_{cr} = \\frac{b \\cdot k_d^3}{3} + n A_s (d - k_d)^2 = ' + sp.icr.toExponential(4) + ' \\text{ mm}^4 \\]</div>';
    h += '</div>';

    // 6-Point M-phi Table
    h += '<div class="report-section">';
    h += '<h4>4. 6-Point Moment-Curvature Results</h4>';
    h += '<table class="report-table">';
    h += '<tr><th>Point</th><th>Event</th><th>&phi; (1/mm)</th><th>&phi; (rad/m)</th><th>M (kN-m)</th></tr>';
    for (var i = 0; i < pts.length; i++) {
        var p = pts[i];
        var phiRadM = ((p.phi || 0) * 1000).toExponential(4);
        h += '<tr><td>P' + p.point + '</td><td style="text-align:left;">' + p.event + '</td>';
        h += '<td>' + (p.phi ? p.phi.toExponential(4) : '0') + '</td>';
        h += '<td>' + phiRadM + '</td>';
        h += '<td>' + (p.moment_knm || 0).toFixed(2) + '</td></tr>';
    }
    h += '</table>';
    h += '</div>';

    // Key Calculations for Each Point
    h += '<div class="report-section">';
    h += '<h4>5. Key Point Derivations</h4>';

    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>P1 &mdash; Just Before Cracking:</b></p>';
    h += '<div class="report-eq">\\[ M_{cr} = \\frac{f_r \\cdot I_t}{h - \\bar{y}} \\quad ; \\quad \\phi_1 = \\frac{M_{cr}}{E_c \\cdot I_t} \\]</div>';

    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>P2 &mdash; Just After Cracking:</b></p>';
    h += '<div class="report-eq">\\[ M = M_{cr} \\quad ; \\quad \\phi_2 = \\frac{M_{cr}}{E_c \\cdot I_{cr}} \\]</div>';

    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>P3 &mdash; Elastic Limit (0.45f\'c):</b></p>';
    h += '<div class="report-eq">\\[ \\varepsilon_c = \\frac{0.45 f\'_c}{E_c} \\quad ; \\quad \\phi_3 = \\frac{\\varepsilon_c}{k_d} \\]</div>';

    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>P4 &mdash; Steel Yields:</b></p>';
    h += '<div class="report-eq">\\[ \\varepsilon_y = \\frac{f_y}{E_s} \\quad ; \\quad \\phi_4 = \\frac{\\varepsilon_y}{d - k_d} \\]</div>';

    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>P5 &mdash; Concrete Peak Strain (&epsilon;<sub>co</sub> = 0.002):</b></p>';
    h += '<div class="report-eq">\\[ c = \\frac{A_s f_y}{0.85 f\'_c \\beta_1 b} \\quad ; \\quad \\phi_5 = \\frac{\\varepsilon_{co}}{c} \\]</div>';

    h += '<p style="font-size:.85rem;margin-top:.5rem;"><b>P6 &mdash; Concrete Ultimate (&epsilon;<sub>cu</sub> = 0.003):</b></p>';
    h += '<div class="report-eq">\\[ \\phi_6 = \\frac{\\varepsilon_{cu}}{c} \\quad ; \\quad M_u = A_s f_y \\left(d - \\frac{a}{2}\\right) \\]</div>';
    h += '</div>';

    // QAQC Comparison
    h += '<div class="report-section">';
    h += '<h4>6. QAQC &mdash; Method Comparison</h4>';
    h += '<p class="report-ref">Comparison between simplified 6-point method (this tool) and fiber layer method (Excel reference)</p>';
    h += '<table class="report-table">';
    h += '<tr><th>Aspect</th><th>This Tool (6-Point)</th><th>Excel (Fiber Layer)</th></tr>';
    h += '<tr><td style="text-align:left;">Method</td><td>Closed-form 6 key points</td><td>20-layer fiber discretization</td></tr>';
    h += '<tr><td style="text-align:left;">Curvature range</td><td>0 to &epsilon;<sub>cu</sub>/c</td><td>0 to &epsilon;<sub>y</sub> (incremental)</td></tr>';
    h += '<tr><td style="text-align:left;">Axial load</td><td>Not included (pure flexure)</td><td>Included (P = ' + 194 + ' kips)</td></tr>';
    h += '<tr><td style="text-align:left;">Stress-strain model</td><td>Linear elastic + Whitney block</td><td>Elastic-perfectly-plastic steel, parabolic concrete</td></tr>';
    h += '<tr><td style="text-align:left;">Units</td><td>SI (MPa, mm, kN-m)</td><td>Imperial (ksi, in, in-kips)</td></tr>';
    h += '<tr><td style="text-align:left;">Resolution</td><td>6 discrete points</td><td>20 incremental points</td></tr>';
    h += '<tr><td style="text-align:left;">Best for</td><td>Quick design checks, code compliance</td><td>Detailed nonlinear analysis, P-M interaction</td></tr>';
    h += '</table>';

    h += '<p style="font-size:.85rem;margin-top:.75rem;"><b>Validation Notes:</b></p>';
    h += '<ul style="font-size:.85rem;color:var(--gray-600);margin:.25rem 0 0 1.5rem;">';
    h += '<li>Both methods produce bilinear-like curves with initial stiff (uncracked) and post-cracking regions</li>';
    h += '<li>Cracking moment and yield point should be close between methods for same section properties</li>';
    h += '<li>The fiber method captures nonlinear stress distribution more accurately near ultimate</li>';
    h += '<li>For pure flexure without axial load, the 6-point method provides reliable design values per ACI 318</li>';
    h += '</ul>';
    h += '</div>';

    document.getElementById('results-report').style.display = '';
    document.getElementById('results-report').innerHTML = h;
    if (window.MathJax) MathJax.typeset();
}
</script>
{% endblock %}