---
import Layout from '../layouts/Layout.astro';
---

<Layout title="Reinforced Concrete Beam – EN 1992">
    <section class="rc-shell text-surface">
        <header class="design-header">
            <div class="hero-copy">
                <p class="eyebrow">Xponexus Engineering</p>
                <h1>Reinforced Concrete Beam – EN 1992</h1>
                <p class="lead">
                    Single-span reinforced concrete beam calculator with Eurocode load combinations, ULS/SLS checks,
                    utilisation charts, and a printable report.
                </p>
                <div class="hero-meta">
                    <span class="pill">Flexural design</span>
                    <span class="pill">Shear design</span>
                    <span class="pill">Crack width</span>
                    <span class="pill">Deflection</span>
                </div>
                <div class="header-actions">
                    <label class="check-control">
                        <input id="enableFire" type="checkbox" />
                        <span>Fire check</span>
                    </label>
                    <label class="check-control">
                        <input id="enableCrack" type="checkbox" checked />
                        <span>Detailed SLS (crack width)</span>
                    </label>
                    <button id="calcBtn" class="primary">Run calculations</button>
                    <button id="printBtn" class="ghost">Print report</button>
                </div>
            </div>
            <div class="sketch-grid" aria-hidden="true">
                <article class="sketch-card">
                    <header>
                        <div>
                            <p class="muted">Section sketch</p>
                            <h3>Dimensions</h3>
                        </div>
                        <div class="pill subtle">b × h</div>
                    </header>
                    <div class="sketch-canvas">
                        <div class="section-rect">
                            <div class="section-label section-label-h">
                                <span id="sketch-h">600</span>
                                <small>h (mm)</small>
                            </div>
                            <div class="section-label section-label-b">
                                <span id="sketch-b">300</span>
                                <small>b (mm)</small>
                            </div>
                        </div>
                    </div>
                </article>
                <article class="sketch-card">
                    <header>
                        <div>
                            <p class="muted">Span sketch</p>
                            <h3>Loads & support</h3>
                        </div>
                        <div id="supportTag" class="pill subtle">Simply supported</div>
                    </header>
                    <div class="sketch-canvas">
                        <div class="beam-span">
                            <div class="support left"></div>
                            <div class="support right"></div>
                            <div class="beam-line"></div>
                            <div class="load-arrow">
                                <span id="sketch-w">10.0</span>
                                <small>kN/m (G+Q)</small>
                            </div>
                            <div class="span-label">
                                <span id="sketch-L">6000</span>
                                <small>mm</small>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </header>

        <div class="card-stack">
            <section class="card">
                <div class="card-heading">
                    <div>
                        <h2>Material properties</h2>
                        <p class="muted">Concrete and steel grades auto-fill characteristic/design strengths.</p>
                    </div>
                    <div class="pill tone">Auto-fill</div>
                </div>
                <div class="responsive-grid">
                    <div class="field-group">
                        <legend>Concrete</legend>
                        <label for="concreteGrade">Concrete grade</label>
                        <select id="concreteGrade">
                            <option value="C20/25">C20/25</option>
                            <option value="C25/30" selected>C25/30</option>
                            <option value="C30/37">C30/37</option>
                            <option value="C35/45">C35/45</option>
                            <option value="C40/50">C40/50</option>
                        </select>
                        <label for="fck">f<sub>ck</sub> (N/mm²)</label>
                        <input id="fck" readonly />
                        <label for="fcd">f<sub>cd</sub> (N/mm²)</label>
                        <input id="fcd" readonly />
                    </div>
                    <div class="field-group">
                        <legend>Steel</legend>
                        <label for="steelGrade">Steel grade</label>
                        <select id="steelGrade">
                            <option value="B500B" selected>B500B</option>
                            <option value="B500C">B500C</option>
                        </select>
                        <label for="fyk">f<sub>yk</sub> (N/mm²)</label>
                        <input id="fyk" readonly />
                        <label for="fyd">f<sub>yd</sub> (N/mm²)</label>
                        <input id="fyd" readonly />
                        <label for="Es">E<sub>s</sub> (N/mm²)</label>
                        <input id="Es" readonly />
                    </div>
                    <div class="field-group">
                        <legend>Cover</legend>
                        <label for="cover">c<sub>nom</sub> (mm)</label>
                        <input id="cover" value="30" />
                        <label for="stirrupDia">φ<sub>w</sub> (mm)</label>
                        <input id="stirrupDia" value="8" />
                        <label for="mainDia">Main bar φ (mm)</label>
                        <input id="mainDia" value="16" />
                    </div>
                </div>
            </section>

            <section class="card">
                <div class="card-heading">
                    <h2>Geometry & Actions</h2>
                    <p class="muted">Span, bearing, and applied actions feeding Eurocode combinations.</p>
                </div>
                <div class="responsive-grid">
                    <fieldset class="field-group" aria-label="Geometry">
                        <legend>Geometry</legend>
                        <label for="b">b (mm)</label>
                        <input id="b" value="300" />
                        <label for="h">h (mm)</label>
                        <input id="h" value="600" />
                        <label for="L">Span L (mm)</label>
                        <input id="L" value="6000" />
                        <label for="Lb">Bearing L<sub>b</sub> (mm)</label>
                        <input id="Lb" value="250" />
                        <label for="supportCondition">Support condition</label>
                        <select id="supportCondition">
                            <option value="simply">Simply supported</option>
                            <option value="fixed-fixed">Fixed–fixed</option>
                            <option value="fixed-pinned">Fixed–pinned</option>
                        </select>
                    </fieldset>

                    <fieldset class="field-group" aria-label="Loads">
                        <legend>Loads (characteristic)</legend>
                        <label for="g_udl">Dead load w<sub>G</sub> (kN/m)</label>
                        <input id="g_udl" value="8" />
                        <label for="q_udl">Imposed load w<sub>Q</sub> (kN/m)</label>
                        <input id="q_udl" value="3" />
                        <label for="g_point">Dead point load P<sub>G</sub> midspan (kN)</label>
                        <input id="g_point" value="0" />
                        <label for="q_point">Imposed point load P<sub>Q</sub> midspan (kN)</label>
                        <input id="q_point" value="0" />
                    </fieldset>

                    <fieldset class="field-group" aria-label="Calculated actions">
                        <legend>Calculated actions</legend>
                        <label for="ulsMoment">ULS M<sub>Ed</sub> (kNm)</label>
                        <input id="ulsMoment" readonly />
                        <label for="ulsShear">ULS V<sub>Ed</sub> (kN)</label>
                        <input id="ulsShear" readonly />
                        <label for="ulsReaction">ULS R<sub>Ed</sub> (kN)</label>
                        <input id="ulsReaction" readonly />
                        <label for="slsMoment">SLS M (kNm)</label>
                        <input id="slsMoment" readonly />
                        <label for="slsShear">SLS V (kN)</label>
                        <input id="slsShear" readonly />
                        <label for="slsReaction">SLS R (kN)</label>
                        <input id="slsReaction" readonly />
                    </fieldset>

                    <fieldset class="field-group" aria-label="Load combinations">
                        <legend>Load combinations (Eurocode)</legend>
                        <div id="comboSummary" class="combo-summary" aria-live="polite"></div>
                    </fieldset>
                </div>
            </section>

            <section class="card">
                <div class="card-heading">
                    <h2>Design factors & SLS limits</h2>
                    <p class="muted">Partial factors, service limits, and crack/deflection settings.</p>
                </div>
                <div class="responsive-grid">
                    <fieldset class="field-group">
                        <legend>Materials</legend>
                        <label for="gamma_c">γ<sub>c</sub></label>
                        <input id="gamma_c" value="1.5" />
                        <label for="gamma_s">γ<sub>s</sub></label>
                        <input id="gamma_s" value="1.15" />
                        <label for="alpha_cc">α<sub>cc</sub></label>
                        <input id="alpha_cc" value="0.85" />
                    </fieldset>
                    <fieldset class="field-group">
                        <legend>SLS limits</legend>
                        <label for="defl_limit_inst">Defl limit L/</label>
                        <input id="defl_limit_inst" value="300" />
                        <label for="defl_limit_final">Final limit L/</label>
                        <input id="defl_limit_final" value="250" />
                        <label for="creep_phi">Creep φ<sub>creep</sub></label>
                        <input id="creep_phi" value="2.0" />
                        <label for="crack_limit">w<sub>lim</sub> (mm)</label>
                        <input id="crack_limit" value="0.3" />
                    </fieldset>
                    <fieldset class="field-group">
                        <legend>Reinforcement options</legend>
                        <label for="barList">Bar diameters (comma)</label>
                        <input id="barList" value="12,16,20,25,32" />
                        <label for="spacingMin">s<sub>min</sub> (mm)</label>
                        <input id="spacingMin" value="40" />
                        <label for="spacingMax">s<sub>max</sub> (mm)</label>
                        <input id="spacingMax" value="200" />
                        <label class="check-inline">
                            <input id="allowCompression" type="checkbox" /> Allow compression reinforcement
                        </label>
                        <label class="check-inline">
                            <input id="preferSym" type="checkbox" checked /> Prefer symmetric bars
                        </label>
                    </fieldset>
                    <fieldset class="field-group">
                        <legend>Fire (simplified)</legend>
                        <label for="t_fire">t<sub>fire</sub> (min)</label>
                        <input id="t_fire" value="30" />
                        <label for="delta_fire">Δd<sub>fire</sub> (mm)</label>
                        <input id="delta_fire" value="15" />
                        <label for="strength_fire">Strength factor (-)</label>
                        <input id="strength_fire" value="0.7" />
                    </fieldset>
                </div>
            </section>
        </div>

        <section class="card">
            <div class="card-heading">
                <div>
                    <h2>Check summary</h2>
                    <p class="muted" id="overallStatus" aria-live="polite"></p>
                </div>
                <div class="pill tone">Live utilisation</div>
            </div>
            <div class="summary-cards" aria-live="polite">
                <article id="card_bend" class="summary-card">
                    <div class="summary-title">Flexure</div>
                    <div id="card_bend_text" class="summary-body"></div>
                </article>
                <article id="card_shear" class="summary-card">
                    <div class="summary-title">Shear</div>
                    <div id="card_shear_text" class="summary-body"></div>
                </article>
                <article id="card_min" class="summary-card">
                    <div class="summary-title">Min reinforcement</div>
                    <div id="card_min_text" class="summary-body"></div>
                </article>
                <article id="card_anchor" class="summary-card">
                    <div class="summary-title">Anchorage</div>
                    <div id="card_anchor_text" class="summary-body"></div>
                </article>
                <article id="card_crack" class="summary-card">
                    <div class="summary-title">Crack width</div>
                    <div id="card_crack_text" class="summary-body"></div>
                </article>
                <article id="card_defl" class="summary-card">
                    <div class="summary-title">Deflection</div>
                    <div id="card_defl_text" class="summary-body"></div>
                </article>
                <article id="card_fire" class="summary-card">
                    <div class="summary-title">Fire bending</div>
                    <div id="card_fire_text" class="summary-body"></div>
                </article>
            </div>
            <div class="diagram-summary" aria-live="polite">
                <figure class="diagram-card">
                    <div class="card-heading">
                        <h3>ULS bending moment</h3>
                        <span class="pill subtle">M<sub>Ed</sub></span>
                    </div>
                    <canvas id="bmdCanvasSummary" width="320" height="160" aria-label="Bending moment diagram"></canvas>
                </figure>
                <figure class="diagram-card">
                    <div class="card-heading">
                        <h3>ULS shear force</h3>
                        <span class="pill subtle">V<sub>Ed</sub></span>
                    </div>
                    <canvas id="sfdCanvasSummary" width="320" height="160" aria-label="Shear force diagram"></canvas>
                </figure>
            </div>
        </section>

        <section class="responsive-grid">
            <figure class="card chart-card">
                <div class="card-heading">
                    <h3>Utilisation ratios</h3>
                </div>
                <canvas id="utilChart" height="200" role="img" aria-label="Utilisation ratio bar chart"></canvas>
            </figure>
            <figure class="card chart-card">
                <div class="card-heading">
                    <h3>Bending vs shear utilisation</h3>
                </div>
                <canvas id="interactionChart" height="200" role="img" aria-label="Bending vs shear interaction chart"></canvas>
                <figcaption class="muted">
                    Point shows (η<sub>bending</sub>, η<sub>shear</sub>) relative to η = 1 box.
                </figcaption>
            </figure>
        </section>

        <section class="card">
            <div class="card-heading">
                <div>
                    <h2>Detailed engineering report</h2>
                    <p class="muted">Full calculation notes across ULS, SLS, anchorage, and fire checks.</p>
                </div>
            </div>
            <pre id="report" aria-live="polite"></pre>
        </section>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script>
        const CONCRETE_GRADES = {
            'C20/25': { fck: 20, fctm: 2.2 },
            'C25/30': { fck: 25, fctm: 2.6 },
            'C30/37': { fck: 30, fctm: 2.9 },
            'C35/45': { fck: 35, fctm: 3.2 },
            'C40/50': { fck: 40, fctm: 3.5 }
        };

        const STEEL_GRADES = {
            B500B: { fyk: 500, Es: 200000 },
            B500C: { fyk: 500, Es: 200000 }
        };

        const LOAD_FACTORS = { gammaG: 1.35, gammaQ: 1.5, psi0: 0.7, psi2: 0.3 };

        const selectors = {
            concreteGrade: '#concreteGrade',
            fck: '#fck',
            fcd: '#fcd',
            steelGrade: '#steelGrade',
            fyk: '#fyk',
            fyd: '#fyd',
            Es: '#Es',
            cover: '#cover',
            stirrupDia: '#stirrupDia',
            mainDia: '#mainDia',
            b: '#b',
            h: '#h',
            L: '#L',
            Lb: '#Lb',
            supportCondition: '#supportCondition',
            g_udl: '#g_udl',
            q_udl: '#q_udl',
            g_point: '#g_point',
            q_point: '#q_point',
            ulsMoment: '#ulsMoment',
            ulsShear: '#ulsShear',
            ulsReaction: '#ulsReaction',
            slsMoment: '#slsMoment',
            slsShear: '#slsShear',
            slsReaction: '#slsReaction',
            gamma_c: '#gamma_c',
            gamma_s: '#gamma_s',
            alpha_cc: '#alpha_cc',
            defl_limit_inst: '#defl_limit_inst',
            defl_limit_final: '#defl_limit_final',
            creep_phi: '#creep_phi',
            crack_limit: '#crack_limit',
            barList: '#barList',
            spacingMin: '#spacingMin',
            spacingMax: '#spacingMax',
            allowCompression: '#allowCompression',
            preferSym: '#preferSym',
            t_fire: '#t_fire',
            delta_fire: '#delta_fire',
            strength_fire: '#strength_fire'
        };

        const elements = Object.fromEntries(
            Object.entries(selectors).map(([key, selector]) => [key, document.querySelector(selector)])
        );

        const summaryCards = {
            bend: document.getElementById('card_bend'),
            shear: document.getElementById('card_shear'),
            min: document.getElementById('card_min'),
            anchor: document.getElementById('card_anchor'),
            crack: document.getElementById('card_crack'),
            defl: document.getElementById('card_defl'),
            fire: document.getElementById('card_fire')
        };

        const summaryText = {
            bend: document.getElementById('card_bend_text'),
            shear: document.getElementById('card_shear_text'),
            min: document.getElementById('card_min_text'),
            anchor: document.getElementById('card_anchor_text'),
            crack: document.getElementById('card_crack_text'),
            defl: document.getElementById('card_defl_text'),
            fire: document.getElementById('card_fire_text')
        };

        const comboSummary = document.getElementById('comboSummary');
        const supportTag = document.getElementById('supportTag');
        const reportEl = document.getElementById('report');
        const calcBtn = document.getElementById('calcBtn');
        const printBtn = document.getElementById('printBtn');
        const enableFire = document.getElementById('enableFire');
        const enableCrack = document.getElementById('enableCrack');
        const overallStatus = document.getElementById('overallStatus');
        let utilChart;
        let interactionChart;

        function numeric(el) {
            return parseFloat(el?.value ?? '') || 0;
        }

        function setMaterialFields() {
            const conc = CONCRETE_GRADES[elements.concreteGrade.value];
            const gamma_c = numeric(elements.gamma_c) || 1.5;
            const alpha_cc = numeric(elements.alpha_cc) || 0.85;
            if (conc) {
                elements.fck.value = conc.fck;
                elements.fcd.value = (alpha_cc * conc.fck) / gamma_c;
            }
            const steel = STEEL_GRADES[elements.steelGrade.value];
            const gamma_s = numeric(elements.gamma_s) || 1.15;
            if (steel) {
                elements.fyk.value = steel.fyk;
                elements.fyd.value = steel.fyk / gamma_s;
                elements.Es.value = steel.Es;
            }
        }

        function uniformEffects(supportCondition, w, L) {
            const span = L / 1000; // m
            const effects = { moment: 0, shear: 0, reaction: 0 };
            switch (supportCondition) {
                case 'fixed-fixed':
                    effects.moment = (w * span * span) / 12;
                    effects.shear = (w * span) / 2;
                    effects.reaction = effects.shear;
                    break;
                case 'fixed-pinned':
                    effects.moment = (w * span * span) / 8;
                    effects.shear = (5 * w * span) / 8;
                    effects.reaction = effects.shear;
                    break;
                default:
                    effects.moment = (w * span * span) / 8;
                    effects.shear = (w * span) / 2;
                    effects.reaction = effects.shear;
            }
            return effects;
        }

        function pointEffects(supportCondition, P, L) {
            const span = L / 1000;
            const effects = { moment: 0, shear: 0, reaction: 0 };
            switch (supportCondition) {
                case 'fixed-fixed':
                    effects.moment = (P * span) / 8;
                    effects.shear = P / 2;
                    effects.reaction = P / 2;
                    break;
                case 'fixed-pinned':
                    effects.moment = (3 * P * span) / 16;
                    effects.shear = (11 * P) / 16;
                    effects.reaction = effects.shear;
                    break;
                default:
                    effects.moment = (P * span) / 4;
                    effects.shear = P / 2;
                    effects.reaction = P / 2;
            }
            return effects;
        }

        function combineEffects(supportCondition, w, P, L) {
            const uniform = uniformEffects(supportCondition, w, L);
            const point = pointEffects(supportCondition, P, L);
            return {
                moment: uniform.moment + point.moment,
                shear: uniform.shear + point.shear,
                reaction: uniform.reaction + point.reaction
            };
        }

        function selectBars(areaReq, barsAvailable, spacingMin, width) {
            const options = barsAvailable
                .map((d) => ({ dia: d, area: (Math.PI * d * d) / 4 }))
                .sort((a, b) => a.dia - b.dia);
            let best = { As: 0, text: '—' };
            for (const opt of options) {
                const n = Math.max(2, Math.ceil(areaReq / opt.area));
                const prov = n * opt.area;
                const spacing = width / n;
                if (spacing < spacingMin) continue;
                if (!best.As || prov < best.As) {
                    best = { As: prov, text: `${n}Ø${opt.dia}` };
                }
            }
            if (!best.As && options.length) {
                const opt = options[options.length - 1];
                const n = Math.max(2, Math.ceil(areaReq / opt.area));
                best = { As: n * opt.area, text: `${n}Ø${opt.dia}` };
            }
            return best;
        }

        function flexureDesign(MEd, b, d, fcd, fyd, bars, spacingMin, width, allowCompression) {
            const K = MEd / (b * Math.pow(d / 1000, 2) * fcd);
            const K_lim = 0.295;
            const xi = (() => {
                const Kred = K;
                const disc = 0.64 - 1.28 * Kred;
                if (disc <= 0) return 0.45;
                const root = Math.sqrt(disc);
                return Math.min(0.45, (0.8 - root) / 0.64);
            })();
            const z = Math.min(0.95 * d, d * (1 - 0.4 * xi));
            const AsReq = (MEd * 1e6) / (z * fyd);
            const singly = selectBars(AsReq, bars, spacingMin, width);
            let AsProv = singly.As;
            let layout = singly.text;
            let AsComp = 0;
            if (K > K_lim && allowCompression) {
                const Mlim = (0.8 * fcd * b * (0.45 * d) * (d - 0.4 * 0.45 * d)) / 1e6;
                const Madd = Math.max(0, MEd - Mlim);
                AsComp = (Madd * 1e6) / ((d - 0.2 * d) * fyd);
                const comp = selectBars(AsComp, bars, spacingMin, width);
                const AsTension = (Mlim * 1e6) / (z * fyd) + comp.As;
                const tension = selectBars(AsTension, bars, spacingMin, width);
                AsProv = tension.As;
                layout = `${tension.text} + comp ${comp.text}`;
            }
            const eta = AsReq > 0 ? AsReq / AsProv : 0;
            return { AsReq, AsProv, eta: Math.max(eta, 0), layout, AsComp };
        }

        function shearDesign(VEd, b, d, fck, fyk, fyd, spacingMax, stirrupDia) {
            const k = Math.min(2, 1 + Math.sqrt(200 / d));
            const rho_l = 0.002;
            const C_Rdc = 0.18 / 1.5;
            const V_Rd_c =
                (C_Rdc * k * Math.pow(100 * rho_l * fck, 1 / 3) * b * d) / 1000;
            const z = 0.9 * d;
            const theta = 45;
            const cot = 1 / Math.tan((theta * Math.PI) / 180);
            const legs = 2;
            const Asw = (legs * Math.PI * Math.pow(stirrupDia, 2)) / 4;
            let s = spacingMax;
            let V_Rd_s = 0;
            if (VEd > V_Rd_c) {
                s = (Asw * z * fyd * cot) / (VEd * 1000);
                s = Math.min(spacingMax, Math.max(50, s));
                V_Rd_s = ((Asw / s) * z * fyd * cot) / 1000;
            }
            const V_Rd_tot = V_Rd_c + V_Rd_s;
            const eta = V_Rd_tot > 0 ? VEd / V_Rd_tot : 0;
            return {
                V_Rd_c,
                V_Rd_s,
                s,
                V_Rd_tot,
                eta,
                layout: `${legs}Ø${stirrupDia} @ ${s.toFixed(0)} mm`
            };
        }

        function minMaxReinforcement(fctm, fyk, b, d, AsProv) {
            const As_min = Math.max((0.26 * fctm * b * d) / fyk, 0.0013 * b * d);
            const As_max = 0.04 * b * d;
            const eta_min = AsProv > 0 ? As_min / AsProv : 0;
            const eta_max = AsProv > 0 ? AsProv / As_max : 0;
            return { As_min, As_max, eta_min, eta_max, passMin: AsProv >= As_min, passMax: AsProv <= As_max };
        }

        function anchorageCheck(phi, fyk, gamma_s, fctm, Lb) {
            const fctd = (0.7 * fctm) / (numeric(elements.gamma_c) || 1.5);
            const tau_bd = 2.25 * fctd;
            const l_bd = (phi * fyk) / (4 * tau_bd);
            const eta = l_bd > 0 ? l_bd / Lb : 0;
            return { l_bd, eta, pass: Lb >= l_bd };
        }

        function crackWidth(Msls, z, AsProv, fctm, Es, c_nom, phi, b, d) {
            const Ig = (b * Math.pow(d * 1.11, 3)) / 12;
            const Mcr = (fctm * (Ig / (0.5 * d))) / 1e6;
            if (Msls <= Mcr) return { cracked: false, wk: 0, Mcr };
            const sigma_s = (Msls * 1e6) / (AsProv * z);
            const rho_eff = AsProv / (b * d);
            const sr_max = 3.4 * (c_nom + phi) + (0.425 * phi) / Math.max(rho_eff, 0.0001);
            const eps_sm = sigma_s / Es;
            const wk = sr_max * eps_sm;
            return { cracked: true, wk, Mcr, sigma_s };
        }

        function deflectionCheck(w_char, w_final, L, Ecm, Ig, Ieff, phi_creep, defl_inst_limit, defl_final_limit) {
            const w_inst_n = w_char;
            const w_fin_n = w_final;
            const delta_inst = (5 * w_inst_n * Math.pow(L, 4)) / (384 * Ecm * Ieff);
            const delta_final = ((5 * w_fin_n * Math.pow(L, 4)) / (384 * Ecm * Ieff)) * (1 + phi_creep);
            const eta_inst = defl_inst_limit > 0 ? delta_inst / defl_inst_limit : 0;
            const eta_final = defl_final_limit > 0 ? delta_final / defl_final_limit : 0;
            return { delta_inst, delta_final, eta_inst, eta_final };
        }

        function fireBending(MEd, b, d, fcd, fyd, delta_d, strengthFactor) {
            const d_fire = Math.max(d - delta_d, 0);
            const z_fire = 0.9 * d_fire;
            const M_Rd_fire = (strengthFactor * fcd * b * z_fire * d_fire) / 1e6;
            const eta_fire = M_Rd_fire > 0 ? MEd / M_Rd_fire : 0;
            return { d_fire, z_fire, M_Rd_fire, eta_fire };
        }

        function bmdPath(moment, supportCondition, width, height) {
            const base = height * 0.55;
            const mag = Math.abs(moment);
            if (!mag) return [];
            const amp = Math.min(base - 12, (mag / (mag + 1)) * (height * 0.35));
            const sag = moment >= 0 ? amp : -amp;
            switch (supportCondition) {
                case 'fixed-fixed':
                    return [
                        { x: 8, y: base - sag * 0.9 },
                        { x: width * 0.3, y: base + sag * 0.6 },
                        { x: width * 0.7, y: base + sag * 0.6 },
                        { x: width - 8, y: base - sag * 0.9 }
                    ];
                case 'fixed-pinned':
                    return [
                        { x: 8, y: base - sag },
                        { x: width * 0.55, y: base + sag * 0.8 },
                        { x: width - 8, y: base }
                    ];
                default:
                    return [
                        { x: 8, y: base },
                        { x: width * 0.5, y: base + sag },
                        { x: width - 8, y: base }
                    ];
            }
        }

        function sfdPath(shear, supportCondition, width, height) {
            const base = height * 0.55;
            const mag = Math.abs(shear);
            if (!mag) return [];
            const amp = Math.min(height * 0.4, (mag / (mag + 1)) * (height * 0.4));
            const pos = shear >= 0 ? -amp : amp;
            switch (supportCondition) {
                case 'fixed-fixed':
                    return [
                        { x: 8, y: base + pos },
                        { x: width * 0.5, y: base + pos },
                        { x: width * 0.5, y: base - pos },
                        { x: width - 8, y: base - pos }
                    ];
                case 'fixed-pinned':
                    return [
                        { x: 8, y: base + pos },
                        { x: width * 0.65, y: base + pos },
                        { x: width * 0.65, y: base - pos * 0.6 },
                        { x: width - 8, y: base - pos * 0.6 }
                    ];
                default:
                    return [
                        { x: 8, y: base + pos },
                        { x: width * 0.5, y: base + pos },
                        { x: width * 0.5, y: base - pos },
                        { x: width - 8, y: base - pos }
                    ];
            }
        }

        function drawDiagram(canvasId, pathPoints, label) {
            const canvas = document.getElementById(canvasId);
            if (!canvas) return;
            const ctx = canvas.getContext('2d');
            const width = canvas.width;
            const height = canvas.height;
            ctx.clearRect(0, 0, width, height);
            const baseline = height * 0.5;
            ctx.strokeStyle = '#94a3b8';
            ctx.lineWidth = 1.2;
            ctx.beginPath();
            ctx.moveTo(8, baseline);
            ctx.lineTo(width - 8, baseline);
            ctx.stroke();
            if (!pathPoints?.length) return;
            ctx.strokeStyle = '#fbbf24';
            ctx.fillStyle = 'rgba(251,191,36,0.18)';
            ctx.lineWidth = 2;
            ctx.beginPath();
            ctx.moveTo(pathPoints[0].x, pathPoints[0].y);
            for (let i = 1; i < pathPoints.length; i++) {
                ctx.lineTo(pathPoints[i].x, pathPoints[i].y);
            }
            ctx.stroke();
            ctx.lineTo(pathPoints[pathPoints.length - 1].x, baseline);
            ctx.lineTo(pathPoints[0].x, baseline);
            ctx.closePath();
            ctx.fill();
            if (label) {
                ctx.fillStyle = '#e2e8f0';
                ctx.font = '12px Inter, system-ui, sans-serif';
                ctx.fillText(label, 12, 16);
            }
        }

        function setCard(cardEl, textEl, eta, pass, extraText = '') {
            const rounded = (eta ?? 0).toFixed(3);
            cardEl.classList.remove('pass', 'fail');
            cardEl.classList.add(pass ? 'pass' : 'fail');
            textEl.innerHTML = `η = ${rounded}<br>${pass ? 'PASS' : 'FAIL'}${extraText ? '<br>' + extraText : ''}`;
        }

        function updateCharts(r) {
            const utilCtx = document.getElementById('utilChart').getContext('2d');
            const interCtx = document.getElementById('interactionChart').getContext('2d');
            utilChart?.destroy();
            interactionChart?.destroy();
            const utilValues = [
                r.flexure.eta,
                r.shear.eta,
                r.minmax.eta_min,
                r.anchor.eta,
                r.crack.eta,
                r.deflection.eta_final,
                r.fire.eta_fire
            ];
            const labels = ['Bending', 'Shear', 'Min As', 'Anchorage', 'Crack', 'Deflection', 'Fire'];
            const maxBound = Math.max(1.2, Math.max(...utilValues) + 0.1);
            utilChart = new Chart(utilCtx, {
                type: 'bar',
                data: { labels, datasets: [{ label: 'Utilisation η', data: utilValues, backgroundColor: '#6abf69' }] },
                options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, suggestedMax: maxBound } } }
            });
            interactionChart = new Chart(interCtx, {
                type: 'scatter',
                data: {
                    datasets: [
                        { label: 'Design point', data: [{ x: r.flexure.eta, y: r.shear.eta }], pointRadius: 5, backgroundColor: '#f67280' },
                        {
                            label: 'Limit',
                            data: [
                                { x: 0, y: 0 },
                                { x: 1, y: 0 },
                                { x: 1, y: 1 },
                                { x: 0, y: 1 },
                                { x: 0, y: 0 }
                            ],
                            type: 'line',
                            borderDash: [4, 4],
                            borderWidth: 1,
                            pointRadius: 0,
                            borderColor: '#9ca3af'
                        }
                    ]
                },
                options: {
                    plugins: { legend: { display: false } },
                    scales: {
                        x: { min: 0, max: Math.max(1.2, r.flexure.eta + 0.2), title: { display: true, text: 'η_bending' } },
                        y: { min: 0, max: Math.max(1.2, r.shear.eta + 0.2), title: { display: true, text: 'η_shear' } }
                    }
                }
            });
        }

        function updateCombinationSummary(r) {
            if (!comboSummary) return;
            const format = (e) =>
                `M = ${e.moment.toFixed(2)} kNm · V = ${e.shear.toFixed(2)} kN · R = ${e.reaction.toFixed(2)} kN`;
            const combos = [
                { title: 'ULS (1.35G + 1.5Q)', effects: { moment: r.My, shear: r.V, reaction: r.R } },
                { title: 'SLS (G + Q)', effects: r.slsEffects },
                { title: `SLS (G + ψ2·Q, ψ2=${LOAD_FACTORS.psi2})`, effects: r.slsEffectsQP }
            ];
            comboSummary.innerHTML = combos
                .map(
                    (c) =>
                        `<div class="combo-row">
                            <div class="combo-title">${c.title}</div>
                            <div class="combo-body">${format(c.effects)}</div>
                        </div>`
                )
                .join('');
        }

        function drawDiagrams(r) {
            const bmdPts = bmdPath(r.My, r.supportCondition, 320, 160);
            const sfdPts = sfdPath(r.V, r.supportCondition, 320, 160);
            drawDiagram('bmdCanvasSummary', bmdPts, `MEd = ${r.My.toFixed(2)} kNm`);
            drawDiagram('sfdCanvasSummary', sfdPts, `VEd = ${r.V.toFixed(2)} kN`);
        }

        function buildReport(r) {
            const lines = [];
            lines.push('INPUT DATA');
            lines.push('----------');
            lines.push(`Concrete grade: ${elements.concreteGrade.value}, fck = ${r.fck} N/mm², fcd = ${r.fcd.toFixed(2)} N/mm²`);
            lines.push(`Steel grade: ${elements.steelGrade.value}, fyk = ${r.fyk} N/mm², fyd = ${r.fyd.toFixed(2)} N/mm², Es = ${r.Es} N/mm²`);
            lines.push(`Geometry: b = ${r.b} mm, h = ${r.h} mm, span = ${r.L} mm, cover = ${r.cover} mm`);
            lines.push(`Effective depth d ≈ ${r.d.toFixed(1)} mm`);
            lines.push(`Support: ${r.supportCondition}`);
            lines.push('');
            lines.push('LOAD EFFECTS');
            lines.push('------------');
            lines.push(`Characteristic loads: wG = ${r.g_udl} kN/m, wQ = ${r.q_udl} kN/m, PG = ${r.g_point} kN, PQ = ${r.q_point} kN`);
            lines.push(`ULS: MEd = ${r.My.toFixed(2)} kNm, VEd = ${r.V.toFixed(2)} kN, REd = ${r.R.toFixed(2)} kN`);
            lines.push(`SLS (G + Q): M = ${r.slsEffects.moment.toFixed(2)} kNm, V = ${r.slsEffects.shear.toFixed(2)} kN`);
            lines.push(`SLS (G + ψ2Q): M = ${r.slsEffectsQP.moment.toFixed(2)} kNm, V = ${r.slsEffectsQP.shear.toFixed(2)} kN`);
            lines.push('');
            lines.push('ULS FLEXURE');
            lines.push('-----------');
            lines.push(`As,req = ${r.flexure.AsReq.toFixed(1)} mm², As,prov = ${r.flexure.AsProv.toFixed(1)} mm² (${r.flexure.layout})`);
            lines.push(`η_flexure = ${r.flexure.eta.toFixed(3)}`);
            lines.push('');
            lines.push('ULS SHEAR');
            lines.push('----------');
            lines.push(`V_Rd,c = ${r.shear.V_Rd_c.toFixed(2)} kN, V_Rd,s = ${r.shear.V_Rd_s.toFixed(2)} kN`);
            lines.push(`Links: ${r.shear.layout}`);
            lines.push(`η_shear = ${r.shear.eta.toFixed(3)}`);
            lines.push('');
            lines.push('MIN / MAX REINFORCEMENT');
            lines.push('------------------------');
            lines.push(`As,min = ${r.minmax.As_min.toFixed(1)} mm², As,max = ${r.minmax.As_max.toFixed(1)} mm²`);
            lines.push(`η_min = ${r.minmax.eta_min.toFixed(3)}, η_max = ${r.minmax.eta_max.toFixed(3)}`);
            lines.push('');
            lines.push('ANCHORAGE');
            lines.push('---------');
            lines.push(`l_bd = ${r.anchor.l_bd.toFixed(0)} mm vs provided Lb = ${r.Lb} mm → η = ${r.anchor.eta.toFixed(3)}`);
            lines.push('');
            lines.push('SLS CRACK WIDTH');
            lines.push('---------------');
            if (r.crack.cracked) {
                lines.push(`Cracked: wk = ${r.crack.wk.toFixed(3)} mm (limit ${r.crack_limit} mm)`);
            } else {
                lines.push('Section uncracked under SLS bending; wk ≈ 0');
            }
            lines.push('');
            lines.push('SLS DEFLECTION');
            lines.push('--------------');
            lines.push(`δinst = ${r.deflection.delta_inst.toFixed(2)} mm, δfinal = ${r.deflection.delta_final.toFixed(2)} mm`);
            lines.push(`Limits: L/${elements.defl_limit_inst.value}, L/${elements.defl_limit_final.value}`);
            lines.push('');
            lines.push('FIRE (simplified)');
            lines.push('-----------------');
            if (enableFire.checked) {
                lines.push(`Reduced depth d_fire = ${r.fire.d_fire.toFixed(1)} mm, M_Rd,fire = ${r.fire.M_Rd_fire.toFixed(2)} kNm`);
                lines.push(`η_fire = ${r.fire.eta_fire.toFixed(3)}`);
            } else {
                lines.push('Not checked.');
            }
            lines.push('');
            lines.push('OVERALL');
            lines.push('-------');
            lines.push(r.pass_all ? 'PASS: all utilisation ratios ≤ 1.0' : 'FAIL: one or more utilisation ratios exceed 1.0');
            return lines.join('\n');
        }

        function updateSummaryCards(r) {
            setCard(summaryCards.bend, summaryText.bend, r.flexure.eta, r.flexure.pass, r.flexure.layout);
            setCard(summaryCards.shear, summaryText.shear, r.shear.eta, r.shear.pass, r.shear.layout);
            setCard(
                summaryCards.min,
                summaryText.min,
                r.minmax.eta_min,
                r.minmax.passMin,
                `As,min = ${r.minmax.As_min.toFixed(0)} mm²`
            );
            setCard(summaryCards.anchor, summaryText.anchor, r.anchor.eta, r.anchor.pass, `l_bd = ${r.anchor.l_bd.toFixed(0)} mm`);
            setCard(
                summaryCards.crack,
                summaryText.crack,
                r.crack.eta,
                r.crack.pass,
                r.crack.cracked ? `w = ${r.crack.wk.toFixed(3)} mm` : 'Uncracked'
            );
            setCard(
                summaryCards.defl,
                summaryText.defl,
                r.deflection.eta_final,
                r.deflection.pass,
                `δ = ${r.deflection.delta_final.toFixed(2)} mm`
            );
            setCard(summaryCards.fire, summaryText.fire, r.fire.eta_fire, r.fire.pass, enableFire.checked ? 'Checked' : 'Not checked');
            overallStatus.textContent = r.pass_all ? 'OVERALL: PASS (all η ≤ 1.0)' : 'OVERALL: FAIL (one or more η > 1.0)';
            overallStatus.className = r.pass_all ? 'muted overall-pass' : 'muted overall-fail';
        }

        function syncSketch(r) {
            document.getElementById('sketch-b').textContent = r.b;
            document.getElementById('sketch-h').textContent = r.h;
            document.getElementById('sketch-L').textContent = r.L;
            document.getElementById('sketch-w').textContent = (r.g_udl + r.q_udl).toFixed(1);
            const map = { simply: 'Simply supported', 'fixed-fixed': 'Fixed–fixed', 'fixed-pinned': 'Fixed–pinned' };
            supportTag.textContent = map[r.supportCondition] ?? 'Simply supported';
        }

        function runAll() {
            setMaterialFields();
            const b = numeric(elements.b);
            const h = numeric(elements.h);
            const L = numeric(elements.L);
            const Lb = numeric(elements.Lb);
            const cover = numeric(elements.cover);
            const stirrupDia = numeric(elements.stirrupDia);
            const mainDia = numeric(elements.mainDia);
            const supportCondition = elements.supportCondition.value;
            const g_udl = numeric(elements.g_udl);
            const q_udl = numeric(elements.q_udl);
            const g_point = numeric(elements.g_point);
            const q_point = numeric(elements.q_point);
            const gamma_c = numeric(elements.gamma_c) || 1.5;
            const gamma_s = numeric(elements.gamma_s) || 1.15;
            const alpha_cc = numeric(elements.alpha_cc) || 0.85;
            const defl_limit_inst = L / (numeric(elements.defl_limit_inst) || 300);
            const defl_limit_final = L / (numeric(elements.defl_limit_final) || 250);
            const creep_phi = numeric(elements.creep_phi) || 2.0;
            const crack_limit = numeric(elements.crack_limit) || 0.3;
            const barList = elements.barList.value
                .split(',')
                .map((v) => parseFloat(v.trim()))
                .filter(Boolean);
            const spacingMin = numeric(elements.spacingMin) || 40;
            const spacingMax = numeric(elements.spacingMax) || 200;
            const allowCompression = elements.allowCompression.checked;
            const fck = parseFloat(elements.fck.value) || 0;
            const fcd = (alpha_cc * fck) / gamma_c;
            const fyk = parseFloat(elements.fyk.value) || 0;
            const fyd = fyk / gamma_s;
            const Es = parseFloat(elements.Es.value) || 200000;
            const Ascover = cover + stirrupDia + 0.5 * mainDia;
            const d = h - Ascover;
            const z = 0.9 * d;
            const loadG = combineEffects(supportCondition, g_udl, g_point, L);
            const loadQ = combineEffects(supportCondition, q_udl, q_point, L);
            const loadSLS = combineEffects(supportCondition, g_udl + q_udl, g_point + q_point, L);
            const loadSLS_QP = combineEffects(
                supportCondition,
                g_udl + LOAD_FACTORS.psi2 * q_udl,
                g_point + LOAD_FACTORS.psi2 * q_point,
                L
            );
            const My = LOAD_FACTORS.gammaG * loadG.moment + LOAD_FACTORS.gammaQ * loadQ.moment;
            const V = LOAD_FACTORS.gammaG * loadG.shear + LOAD_FACTORS.gammaQ * loadQ.shear;
            const R = LOAD_FACTORS.gammaG * loadG.reaction + LOAD_FACTORS.gammaQ * loadQ.reaction;
            elements.ulsMoment.value = My.toFixed(2);
            elements.ulsShear.value = V.toFixed(2);
            elements.ulsReaction.value = R.toFixed(2);
            elements.slsMoment.value = loadSLS.moment.toFixed(2);
            elements.slsShear.value = loadSLS.shear.toFixed(2);
            elements.slsReaction.value = loadSLS.reaction.toFixed(2);
            const flexure = flexureDesign(My, b, d, fcd, fyd, barList, spacingMin, b, allowCompression);
            const shear = shearDesign(V, b, d, fck, fyk, fyd, spacingMax, stirrupDia);
            const minmax = minMaxReinforcement(CONCRETE_GRADES[elements.concreteGrade.value].fctm, fyk, b, d, flexure.AsProv);
            const anchor = anchorageCheck(mainDia, fyk, gamma_s, CONCRETE_GRADES[elements.concreteGrade.value].fctm, Lb);
            const crackRaw = crackWidth(
                loadSLS.moment,
                z,
                flexure.AsProv,
                CONCRETE_GRADES[elements.concreteGrade.value].fctm,
                Es,
                cover,
                mainDia,
                b,
                d
            );
            const crack = {
                ...crackRaw,
                eta: crackRaw.cracked ? crackRaw.wk / crack_limit : 0,
                pass: !enableCrack.checked || !crackRaw.cracked || crackRaw.wk <= crack_limit
            };
            const Ig = (b * Math.pow(h, 3)) / 12;
            const Ieff = 0.35 * Ig;
            const Ecm = 30000 * Math.pow(fck / 10, 0.3);
            const deflection = deflectionCheck(
                g_udl + q_udl,
                g_udl + LOAD_FACTORS.psi2 * q_udl,
                L,
                Ecm,
                Ig,
                Ieff,
                creep_phi,
                defl_limit_inst,
                defl_limit_final
            );
            deflection.eta_final = deflection.eta_final || 0;
            deflection.pass = deflection.eta_final <= 1;
            const fire = fireBending(My, b, d, fcd, fyd, numeric(elements.delta_fire), numeric(elements.strength_fire));
            fire.pass = !enableFire.checked || fire.eta_fire <= 1 || My === 0;
            const pass_all =
                flexure.eta <= 1 &&
                shear.eta <= 1 &&
                minmax.passMin &&
                minmax.passMax &&
                anchor.pass &&
                (!enableCrack.checked || crack.pass) &&
                deflection.pass &&
                (!enableFire.checked || fire.pass);
            const results = {
                b,
                h,
                L,
                Lb,
                cover,
                stirrupDia,
                mainDia,
                supportCondition,
                g_udl,
                q_udl,
                g_point,
                q_point,
                fck,
                fcd,
                fyk,
                fyd,
                Es,
                d,
                z,
                My,
                V,
                R,
                slsEffects: loadSLS,
                slsEffectsQP: loadSLS_QP,
                flexure: { ...flexure, pass: flexure.eta <= 1 },
                shear: { ...shear, pass: shear.eta <= 1 },
                minmax,
                anchor,
                crack,
                deflection,
                fire,
                pass_all,
                crack_limit
            };
            updateCombinationSummary(results);
            updateSummaryCards(results);
            updateCharts(results);
            drawDiagrams(results);
            syncSketch(results);
            reportEl.textContent = buildReport(results);
            return results;
        }

        calcBtn?.addEventListener('click', runAll);
        enableFire?.addEventListener('change', runAll);
        enableCrack?.addEventListener('change', runAll);
        elements.concreteGrade?.addEventListener('change', setMaterialFields);
        elements.steelGrade?.addEventListener('change', setMaterialFields);
        printBtn?.addEventListener('click', () => window.print());
        window.addEventListener('load', () => {
            setMaterialFields();
            runAll();
        });
    </script>

    <style>
        :root {
            --brand-red: #e21b3c;
            --brand-charcoal: #0f172a;
            --brand-silver: #e2e8f0;
            font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
            background: #0b0c10;
            color: #0f172a;
            line-height: 1.5;
        }

        .rc-shell {
            background: white;
            color: #0f172a;
            padding: 24px;
            border-radius: 18px;
            box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
            display: grid;
            gap: 18px;
            position: relative;
            overflow: hidden;
        }

        .rc-shell::before {
            content: 'Xponexus Engineering';
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            font-size: clamp(4rem, 9vw, 7rem);
            font-weight: 800;
            letter-spacing: 0.18em;
            color: #e21b3c;
            opacity: 0.3;
            transform: rotate(-32deg);
            pointer-events: none;
            user-select: none;
            z-index: 0;
        }

        .design-header {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 20px;
            align-items: center;
        }

        .hero-copy h1 {
            font-size: clamp(2.2rem, 4vw, 2.9rem);
            margin: 0 0 6px;
        }

        .lead {
            max-width: 760px;
            color: #334155;
            margin-bottom: 12px;
        }

        .eyebrow {
            letter-spacing: 0.08em;
            font-weight: 700;
            text-transform: uppercase;
            color: #94a3b8;
            margin-bottom: 4px;
            margin-top: 0;
        }

        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 14px;
        }

        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .check-control {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 10px;
            background: white;
            font-weight: 600;
            color: #0f172a;
        }

        .check-inline {
            grid-column: 1 / -1;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-weight: 600;
            color: #0f172a;
        }

        .check-control input,
        .check-inline input {
            width: 18px;
            height: 18px;
        }

        .sketch-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 12px;
        }

        .sketch-card {
            background: #0f172a;
            color: white;
            border-radius: 12px;
            padding: 12px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
        }

        .sketch-card header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 10px;
        }

        .sketch-canvas {
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
            border-radius: 10px;
            padding: 16px;
            min-height: 180px;
            display: grid;
            place-items: center;
        }

        .section-rect {
            position: relative;
            width: 120px;
            height: 180px;
            border: 2px solid #fbbf24;
            border-radius: 6px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .section-label {
            position: absolute;
            display: grid;
            place-items: center;
            gap: 2px;
            padding: 6px 8px;
            background: rgba(15, 23, 42, 0.8);
            color: #f8fafc;
            border-radius: 8px;
            font-size: 0.9rem;
        }

        .section-label-h {
            top: 50%;
            right: -14px;
            transform: translateY(-50%);
            writing-mode: vertical-rl;
            text-orientation: mixed;
        }

        .section-label-b {
            bottom: -16px;
            left: 50%;
            transform: translateX(-50%);
        }

        .beam-span {
            width: 100%;
            max-width: 360px;
            height: 160px;
            position: relative;
        }

        .beam-line {
            position: absolute;
            top: 50%;
            left: 10%;
            right: 10%;
            height: 4px;
            background: #fbbf24;
            transform: translateY(-50%);
            box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
        }

        .support {
            position: absolute;
            bottom: 20px;
            width: 24px;
            height: 24px;
            background: #0ea5e9;
            border-radius: 6px;
        }

        .support.left {
            left: 10%;
        }

        .support.right {
            right: 10%;
        }

        .load-arrow {
            position: absolute;
            top: 16px;
            left: 50%;
            transform: translateX(-50%);
            display: grid;
            place-items: center;
            color: white;
            padding: 6px 10px;
            border-radius: 8px;
            background: rgba(14, 165, 233, 0.2);
            border: 1px solid rgba(14, 165, 233, 0.6);
        }

        .span-label {
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%, 50%);
            display: grid;
            place-items: center;
            padding: 4px 10px;
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.12);
            border: 1px solid rgba(255, 255, 255, 0.4);
        }

        .card-stack {
            display: grid;
            gap: 12px;
        }

        .card {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            padding: 16px;
            display: grid;
            gap: 12px;
        }

        .card-heading {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            flex-wrap: wrap;
        }

        .muted {
            color: #6b7280;
        }

        .pill {
            padding: 6px 10px;
            border-radius: 999px;
            font-weight: 700;
            font-size: 0.9rem;
            background: rgba(14, 165, 233, 0.14);
            color: #0ea5e9;
            border: 1px solid rgba(14, 165, 233, 0.3);
        }

        .pill.subtle {
            background: rgba(255, 255, 255, 0.1);
            color: #e5e7eb;
            border-color: rgba(255, 255, 255, 0.25);
        }

        .pill.tone {
            background: rgba(226, 27, 60, 0.08);
            color: #9f1239;
            border-color: rgba(226, 27, 60, 0.2);
        }

        .responsive-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 14px;
        }

        .field-group {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            align-items: center;
            gap: 8px;
            background: white;
            border: 1px solid #e2e8f0;
            border-radius: 10px;
            padding: 12px;
        }

        .field-group legend {
            font-weight: 700;
            color: #0f172a;
            grid-column: 1 / -1;
        }

        .combo-summary {
            display: grid;
            gap: 8px;
            grid-column: 1 / -1;
        }

        .combo-row {
            background: #f8fafc;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            padding: 8px 10px;
        }

        .combo-title {
            font-weight: 700;
            color: #0f172a;
            margin-bottom: 4px;
        }

        .combo-body {
            color: #334155;
            font-size: 0.92rem;
        }

        label {
            font-size: 0.9rem;
            color: #0f172a;
        }

        input,
        select,
        button {
            font-family: inherit;
        }

        input,
        select {
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            padding: 6px 8px;
            width: 100%;
            background: #fff;
        }

        button {
            cursor: pointer;
            border: none;
            border-radius: 10px;
            padding: 10px 16px;
            font-weight: 700;
            transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease, color 0.12s ease;
        }

        button:disabled {
            opacity: 0.55;
            cursor: not-allowed;
            box-shadow: none;
            transform: none;
        }

        button.primary {
            background: var(--brand-red);
            color: white;
            box-shadow: 0 8px 20px rgba(226, 27, 60, 0.28);
        }

        button.ghost {
            background: transparent;
            color: #0f172a;
            border: 1px solid #cbd5e1;
        }

        button:hover:not(:disabled) {
            transform: translateY(-1px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
        }

        .summary-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 10px;
        }

        .diagram-summary {
            margin-top: 12px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 12px;
        }

        .diagram-card {
            background: #0f172a;
            color: white;
            border-radius: 12px;
            border: 1px solid #1f2937;
            padding: 12px;
            display: grid;
            gap: 8px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
        }

        .diagram-card canvas {
            width: 100%;
            border-radius: 8px;
            background: linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
            border: 1px solid rgba(255, 255, 255, 0.12);
        }

        .summary-card {
            border-radius: 10px;
            padding: 12px;
            color: white;
            background: linear-gradient(135deg, #111827, #0b0c10);
            border: 1px solid #1f2937;
        }

        .summary-card.pass {
            background: linear-gradient(135deg, #16a34a, #0f5132);
            border-color: #0f5132;
        }

        .summary-card.fail {
            background: linear-gradient(135deg, #ef4444, #7f1d1d);
            border-color: #7f1d1d;
        }

        .summary-title {
            font-weight: 700;
            margin-bottom: 4px;
        }

        .summary-body {
            font-size: 0.95rem;
        }

        .overall-pass {
            font-weight: 700;
            color: #15803d;
        }

        .overall-fail {
            font-weight: 700;
            color: #b91c1c;
        }

        .chart-card canvas {
            width: 100%;
        }

        pre#report {
            background: #fff;
            color: #0f172a;
            border: 1px solid #e2e8f0;
            border-radius: 12px;
            white-space: pre-wrap;
            overflow: hidden;
            min-height: 220px;
            padding: 14px;
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
        }

        @media print {
            .header-actions,
            #calcBtn,
            #printBtn {
                display: none;
            }

            body {
                background: white;
                padding: 0;
            }

            .rc-shell {
                box-shadow: none;
                padding: 0;
            }

            pre#report {
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }
        }
    </style>
</Layout>