{"id":1581,"date":"2026-04-22T16:05:41","date_gmt":"2026-04-22T16:05:41","guid":{"rendered":"https:\/\/www.studiocko.com\/?page_id=1581"},"modified":"2026-05-22T05:38:57","modified_gmt":"2026-05-22T05:38:57","slug":"learn","status":"publish","type":"page","link":"https:\/\/www.studiocko.com\/?page_id=1581","title":{"rendered":""},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t
\n\t\t\t\t\t\t\t

\n\t\n\t\t\t Design Tools\n\t\t<\/h1>\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\n\t\t\t\t\t
Flexural Design of Isolated Footing <\/div><\/span>\n\t\t\t\t\t\t\t\n\t\t\t<\/path><\/svg><\/span>\n\t\t\t<\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n\n\nSquare Footing Design | ACI 318-19<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono:wght@400;600&family=IBM+Plex+Sans:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --bg: #f5f4f0;\n --surface: #ffffff;\n --surface2: #f0efe9;\n --border: #d4d2c8;\n --border-strong: #b0ae9f;\n --text: #1a1916;\n --text-2: #5a5850;\n --text-3: #9a9888;\n --accent: #1a56d6;\n --accent-dim: #e8eefb;\n --gold: #b87020;\n --gold-dim: #fdf3e3;\n --green: #1a7a40;\n --green-dim: #e6f5ec;\n --red: #c0281e;\n --red-dim: #fdecea;\n --cyan: #0e7a8a;\n --cyan-dim: #e3f4f6;\n --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 12px rgba(0,0,0,0.04);\n }\n * { margin:0; padding:0; box-sizing:border-box; }\n body { background:var(--bg); font-family:'IBM Plex Sans',sans-serif; color:var(--text); min-height:100vh; }\n\n \/* \u2550\u2550 HEADER \u2550\u2550 *\/\n .header {\n background:var(--text); color:#fff; padding:0 28px;\n display:flex; align-items:center; justify-content:space-between; height:52px;\n position:sticky; top:0; z-index:50;\n }\n .header-left { display:flex; flex-direction:column; gap:1px; }\n .header-title { font-family:'IBM Plex Mono',monospace; font-size:14px; font-weight:600; letter-spacing:0.5px; }\n .header-sub { font-family:'IBM Plex Mono',monospace; font-size:9px; color:rgba(255,255,255,0.4); letter-spacing:1.5px; }\n .header-right { display:flex; align-items:center; gap:16px; }\n\n \/* Unit Toggle *\/\n .unit-toggle {\n display:flex; align-items:center; gap:0;\n border:1px solid rgba(255,255,255,0.25); border-radius:5px; overflow:hidden;\n }\n .unit-toggle label {\n font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;\n padding:5px 14px; cursor:pointer; color:rgba(255,255,255,0.5);\n transition:all 0.2s; letter-spacing:0.5px; user-select:none;\n }\n .unit-toggle input[type=radio] { display:none; }\n .unit-toggle input[type=radio]:checked + label {\n background:rgba(255,255,255,0.15); color:#fff;\n }\n .unit-sep { width:1px; background:rgba(255,255,255,0.2); height:28px; }\n\n .htag { font-family:'IBM Plex Mono',monospace; font-size:10px; padding:3px 8px; border:1px solid rgba(255,255,255,0.2); border-radius:2px; color:rgba(255,255,255,0.55); }\n\n \/* \u2550\u2550 LAYOUT \u2550\u2550 *\/\n .page { display:grid; grid-template-columns:320px 1fr; min-height:calc(100vh - 52px); }\n\n \/* \u2550\u2550 SIDEBAR \u2550\u2550 *\/\n .sidebar {\n background:var(--surface); border-right:1px solid var(--border);\n display:flex; flex-direction:column;\n height:calc(100vh - 52px); position:sticky; top:52px; overflow-y:auto;\n }\n .sidebar::-webkit-scrollbar { width:4px; }\n .sidebar::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }\n .sidebar-section { border-bottom:1px solid var(--border); padding:16px 18px 14px; }\n .sec-label {\n font-family:'IBM Plex Mono',monospace; font-size:9px; font-weight:600;\n letter-spacing:1.5px; text-transform:uppercase; color:var(--text-3);\n margin-bottom:12px; display:flex; align-items:center; gap:8px;\n }\n .sec-label::after { content:''; flex:1; height:1px; background:var(--border); }\n .field { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:8px; margin-bottom:9px; }\n .field:last-child { margin-bottom:0; }\n .field-label { font-size:12.5px; font-weight:400; color:var(--text-2); line-height:1.3; }\n .field-sub { font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--text-3); display:block; margin-top:1px; }\n .inp {\n background:var(--surface2); border:1px solid var(--border); border-radius:4px;\n color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:13px;\n padding:6px 8px; width:84px; text-align:right; outline:none; transition:border-color 0.15s;\n }\n .inp:focus { border-color:var(--accent); background:#fff; }\n .inp.manual { border-color:var(--gold); color:var(--gold); }\n .inp-sel {\n background:var(--surface2); border:1px solid var(--border); border-radius:4px;\n color:var(--text); font-family:'IBM Plex Mono',monospace; font-size:12px;\n padding:6px 6px; width:84px; outline:none; transition:border-color 0.15s; cursor:pointer;\n }\n .inp-sel:focus { border-color:var(--accent); background:#fff; }\n .unit { font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--text-3); width:34px; }\n .run-btn {\n margin:14px 18px 18px; width:calc(100% - 36px); padding:11px;\n background:var(--accent); border:none; border-radius:6px; color:#fff;\n font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;\n letter-spacing:1px; cursor:pointer; transition:background 0.15s;\n }\n .run-btn:hover { background:#1244b0; }\n\n \/* \u2550\u2550 CONTENT \u2550\u2550 *\/\n .content { padding:20px; display:flex; flex-direction:column; gap:18px; overflow-y:auto; }\n\n \/* KEY BANNER *\/\n .key-banner {\n background:var(--text); border-radius:8px; padding:18px 24px;\n display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:space-around;\n box-shadow:var(--shadow);\n }\n .key-item { display:flex; flex-direction:column; align-items:center; gap:2px; padding:0 14px; text-align:center; }\n .key-label { font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); }\n .key-val { font-family:'IBM Plex Mono',monospace; font-size:20px; font-weight:600; color:#fff; line-height:1.1; }\n .key-val.blue { color:#6fa3f7; }\n .key-val.gold { color:#f0b050; }\n .key-val.green { color:#52c97a; }\n .key-unit { font-family:'IBM Plex Mono',monospace; font-size:10px; color:rgba(255,255,255,0.3); }\n .key-div { width:1px; height:40px; background:rgba(255,255,255,0.1); }\n\n \/* CARDS *\/\n .cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }\n @media(max-width:900px) { .cards-grid { grid-template-columns:1fr 1fr; } }\n .card { background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }\n .card-head {\n padding:9px 14px; background:var(--surface2); border-bottom:1px solid var(--border);\n font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;\n letter-spacing:0.8px; text-transform:uppercase; color:var(--text-2);\n }\n .card-body { padding:10px 14px; }\n .r-row { display:flex; justify-content:space-between; align-items:center; padding:4.5px 0; border-bottom:1px solid var(--surface2); gap:8px; }\n .r-row:last-child { border-bottom:none; }\n .r-name { font-size:12px; color:var(--text-2); line-height:1.3; }\n .r-val { font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--text); white-space:nowrap; }\n .r-val.blue { color:var(--accent); }\n .r-val.gold { color:var(--gold); }\n .r-val.green { color:var(--green); }\n .r-val.red { color:var(--red); }\n .badge { display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:3px; font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600; }\n .badge-ok { background:var(--green-dim); color:var(--green); border:1px solid #a8d8ba; }\n .badge-fail { background:var(--red-dim); color:var(--red); border:1px solid #f0b8b0; }\n\n \/* DIAGRAM *\/\n .diagram-wrap { background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }\n .sec-head {\n padding:9px 14px; background:var(--surface2); border-bottom:1px solid var(--border);\n font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;\n letter-spacing:0.8px; text-transform:uppercase; color:var(--text-2);\n display:flex; align-items:center; gap:7px;\n }\n .dot { width:7px; height:7px; border-radius:50%; }\n .dot-blue { background:var(--accent); }\n .dot-green { background:var(--green); }\n .dot-gold { background:var(--gold); }\n #footingDiagram { width:100%; display:block; background:#f8f8f6; }\n\n \/* REBAR TABLE *\/\n .rebar-wrap { background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }\n .rebar-table { width:100%; border-collapse:collapse; }\n .rebar-table th {\n font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;\n letter-spacing:0.5px; color:var(--text-2); background:var(--surface2);\n padding:7px 12px; text-align:left; border-bottom:1px solid var(--border);\n }\n .rebar-table td { font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text); padding:6px 12px; border-bottom:1px solid var(--surface2); }\n .rebar-table tr:last-child td { border-bottom:none; }\n .rebar-table tr.rec td { background:var(--green-dim); color:var(--green); font-weight:600; }\n .rebar-table tr.sel-bar td { background:var(--accent-dim); color:var(--accent); font-weight:600; }\n .rec-note { padding:9px 14px; background:var(--green-dim); border-top:1px solid #a8d8ba; font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--green); }\n\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n WORD-STYLE CALCULATION DOCUMENT\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n .calc-doc-wrap { background:var(--surface); border:1px solid var(--border); border-radius:8px; overflow:hidden; box-shadow:var(--shadow); }\n .calc-doc-body { padding:0; max-height:700px; overflow-y:auto; background:#f8f8f6; }\n .calc-doc-body::-webkit-scrollbar { width:5px; }\n .calc-doc-body::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }\n\n \/* Document page wrapper *\/\n .doc-page { padding:28px 36px; max-width:860px; margin:0 auto; }\n\n \/* Document title block *\/\n .doc-title-block {\n text-align:center; padding:20px 0 16px; border-bottom:2.5px solid var(--text); margin-bottom:20px;\n }\n .doc-title-block h2 { font-family:'IBM Plex Mono',monospace; font-size:16px; font-weight:600; letter-spacing:1px; color:var(--text); }\n .doc-title-block .doc-sub { font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--text-3); letter-spacing:2px; margin-top:4px; }\n\n \/* Section block *\/\n .doc-section { margin-bottom:20px; }\n .doc-sec-title {\n font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;\n letter-spacing:1px; text-transform:uppercase;\n padding:7px 12px; margin-bottom:0;\n display:flex; align-items:center; gap:8px;\n border-radius:4px 4px 0 0;\n }\n .doc-sec-title.blue { background:var(--accent-dim); color:var(--accent); border-left:3px solid var(--accent); }\n .doc-sec-title.gold { background:var(--gold-dim); color:var(--gold); border-left:3px solid var(--gold); }\n .doc-sec-title.green { background:var(--green-dim); color:var(--green); border-left:3px solid var(--green); }\n .doc-sec-title.cyan { background:var(--cyan-dim); color:var(--cyan); border-left:3px solid var(--cyan); }\n .doc-sec-title.red { background:var(--red-dim); color:var(--red); border-left:3px solid var(--red); }\n\n .doc-content {\n border:1px solid var(--border); border-top:none; border-radius:0 0 4px 4px;\n background:#fff; padding:14px 16px;\n }\n\n \/* Given block *\/\n .doc-given {\n background:var(--surface2); border-radius:4px; padding:10px 14px;\n margin-bottom:12px;\n font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-2); line-height:1.8;\n }\n .doc-given strong { color:var(--text); font-weight:600; }\n\n \/* Calc lines *\/\n .doc-calc { margin-bottom:12px; }\n .calc-line {\n font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-2);\n line-height:1.6; padding:1px 0;\n display:grid; grid-template-columns:220px 1fr;\n gap:0;\n }\n .calc-line-wide {\n font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-2);\n line-height:1.6; padding:1px 0;\n }\n .calc-label { font-weight:500; color:var(--text); }\n .calc-expr { color:var(--text-2); }\n .calc-val { color:var(--accent); font-weight:600; }\n .calc-note { font-size:10px; color:var(--text-3); font-style:italic; margin-top:2px; padding-left:8px; }\n\n \/* Formula display *\/\n .formula-box {\n background:var(--surface2); border-left:3px solid var(--border-strong);\n padding:8px 14px; margin:8px 0;\n font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-2);\n line-height:1.7;\n }\n .formula-box .fv { color:var(--accent); font-weight:600; }\n\n \/* Result answer box *\/\n .doc-result {\n margin-top:12px; padding:10px 14px;\n border-radius:4px; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;\n }\n .doc-result.ok { background:var(--green-dim); color:var(--green); border:1px solid #a8d8ba; }\n .doc-result.fail { background:var(--red-dim); color:var(--red); border:1px solid #f0b8b0; }\n .doc-result.info { background:var(--accent-dim); color:var(--accent); border:1px solid #b8cef5; }\n .doc-result.gold { background:var(--gold-dim); color:var(--gold); border:1px solid #e8c088; }\n\n \/* ACI reference tag *\/\n .aci-ref {\n display:inline-block; background:var(--surface2); border:1px solid var(--border);\n border-radius:3px; padding:1px 7px; font-family:'IBM Plex Mono',monospace;\n font-size:9.5px; color:var(--text-3); letter-spacing:0.5px; margin-left:6px;\n }\n .divider-line { height:1px; background:var(--border); margin:10px 0; }\n .check-row { display:flex; align-items:center; gap:12px; margin-top:8px; }\n .check-val { font-family:'IBM Plex Mono',monospace; font-size:12px; }\n .check-ok { color:var(--green); font-weight:600; }\n .check-fail { color:var(--red); font-weight:600; }\n\n .empty-msg { padding:40px; text-align:center; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-3); }\n\n @media(max-width:1000px) {\n .page { grid-template-columns:1fr; }\n .sidebar { height:auto; position:static; }\n .content { padding:14px; }\n }\n\n \/* \u2550\u2550 PDF BUTTON \u2550\u2550 *\/\n .pdf-btn {\n margin-left:auto; padding:5px 14px; border:none; border-radius:4px;\n background:var(--accent); color:#fff;\n font-family:'IBM Plex Mono',monospace; font-size:10px; font-weight:600;\n letter-spacing:1px; cursor:pointer; transition:background 0.15s; white-space:nowrap;\n }\n .pdf-btn:hover { background:#1244b0; }\n\n \/* \u2550\u2550 SPACING CHECK BADGE \u2550\u2550 *\/\n .spacing-check {\n margin:6px 18px 0; padding:7px 12px; border-radius:4px;\n font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;\n text-align:center; letter-spacing:0.5px;\n display:none;\n }\n .spacing-check.ok { background:var(--green-dim); color:var(--green); border:1px solid #a8d8ba; }\n .spacing-check.fail{ background:var(--red-dim); color:var(--red); border:1px solid #f0b8b0; }\n\n \/* \u2550\u2550 PRINT \/ PDF \u2550\u2550 *\/\n @media print {\n #lockScreen, .header, .sidebar, .key-banner, .cards-grid,\n .rebar-wrap, .diagram-wrap, .pdf-btn { display:none !important; }\n body { background:#fff !important; }\n .page { display:block !important; }\n .content { padding:0 !important; overflow:visible !important; gap:0 !important; }\n .calc-doc-wrap { box-shadow:none !important; border:none !important; border-radius:0 !important; }\n .calc-doc-body { max-height:none !important; overflow:visible !important; background:#fff !important; }\n .doc-page { padding:16px 24px !important; }\n .sec-head { display:none !important; }\n }\n<\/style>\n<\/head>\n<body>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LOCK SCREEN\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n MAIN APP\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div id=\"app\">\n\n <!-- HEADER -->\n <header class=\"header\">\n <div class=\"header-left\">\n <div class=\"header-title\">SQUARE FOOTING DESIGN \u00b7 ACI 318-19<\/div>\n <div class=\"header-sub\">REINFORCED CONCRETE \u00b7 FLEXURE \u00b7 SHEAR \u00b7 REBAR<\/div>\n <\/div>\n <div class=\"header-right\">\n <!-- Unit toggle -->\n <div class=\"unit-toggle\">\n <input type=\"radio\" name=\"unit\" id=\"u_imp\" value=\"imperial\" checked onchange=\"switchUnits()\">\n <label for=\"u_imp\">Imperial<\/label>\n <div class=\"unit-sep\"><\/div>\n <input type=\"radio\" name=\"unit\" id=\"u_si\" value=\"si\" onchange=\"switchUnits()\">\n <label for=\"u_si\">SI<\/label>\n <\/div>\n <span class=\"htag\">FLEXURE<\/span>\n <span class=\"htag\">SHEAR<\/span>\n <span class=\"htag\">REBAR<\/span>\n <\/div>\n <\/header>\n\n <div class=\"page\">\n\n <!-- \u2500\u2500 LEFT SIDEBAR \u2500\u2500 -->\n <aside class=\"sidebar\">\n\n <div class=\"sidebar-section\">\n <div class=\"sec-label\">Column \/ Pedestal<\/div>\n <div class=\"field\">\n <div class=\"field-label\">Column Length<span class=\"field-sub\">Square column<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"colLen\" value=\"18\" step=\"0.5\">\n <div class=\"unit\" id=\"u_colLen\">in<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Column Width<\/div>\n <input type=\"number\" class=\"inp\" id=\"colWid\" value=\"18\" step=\"0.5\">\n <div class=\"unit\" id=\"u_colWid\">in<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sidebar-section\">\n <div class=\"sec-label\">Loading<\/div>\n <div class=\"field\">\n <div class=\"field-label\">Factored Load Pu<span class=\"field-sub\">1.2DL + 1.6LL<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"load\" value=\"240\" step=\"5\">\n <div class=\"unit\" id=\"u_load\">kip<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sidebar-section\">\n <div class=\"sec-label\">Soil & Site<\/div>\n <div class=\"field\">\n <div class=\"field-label\">Allowable Bearing<span class=\"field-sub\">q\u2090<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"qa\" value=\"5.00\" step=\"0.25\">\n <div class=\"unit\" id=\"u_qa\">ksf<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Depth Below GL<span class=\"field-sub\">Df<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"depth\" value=\"4.75\" step=\"0.25\">\n <div class=\"unit\" id=\"u_depth\">ft<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Unit Weight<span class=\"field-sub\">Soil + Conc. avg.<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"unitWt\" value=\"0\" step=\"0.01\">\n <div class=\"unit\" id=\"u_unitWt\">kcf<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sidebar-section\">\n <div class=\"sec-label\">Material Properties<\/div>\n <div class=\"field\">\n <div class=\"field-label\">Concrete f'c<span class=\"field-sub\">Compressive strength<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"fc\" value=\"3828\" step=\"100\">\n <div class=\"unit\" id=\"u_fc\">psi<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Steel Yield fy<span class=\"field-sub\">Rebar yield strength<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"fy\" value=\"72500\" step=\"500\">\n <div class=\"unit\" id=\"u_fy\">psi<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Concrete \u03b3c<span class=\"field-sub\">Unit weight of concrete<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"gammaC\" value=\"0.150\" step=\"0.005\">\n <div class=\"unit\" id=\"u_gammaC\">kcf<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sidebar-section\">\n <div class=\"sec-label\">Footing Dimensions<\/div>\n <div class=\"field\">\n <div class=\"field-label\">Thickness t<span class=\"field-sub\">Assumed<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"thick\" value=\"20\" step=\"1\">\n <div class=\"unit\" id=\"u_thick\">in<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Width B<span class=\"field-sub\">\u2605 Manual override<\/span><\/div>\n <input type=\"number\" class=\"inp manual\" id=\"footB\" value=\"10.5\" step=\"0.5\">\n <div class=\"unit\" id=\"u_footB\">ft<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Length L<span class=\"field-sub\">\u2605 Manual override<\/span><\/div>\n <input type=\"number\" class=\"inp manual\" id=\"footL\" value=\"10.5\" step=\"0.5\">\n <div class=\"unit\" id=\"u_footL\">ft<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Clear Cover<\/div>\n <input type=\"number\" class=\"inp\" id=\"cover\" value=\"3\" step=\"0.5\">\n <div class=\"unit\" id=\"u_cover\">in<\/div>\n <\/div>\n <\/div>\n\n <div class=\"sidebar-section\">\n <div class=\"sec-label\">Governing Steel Area<\/div>\n <div style=\"display:none;\">\n <input type=\"number\" id=\"factorCoeff\" value=\"1.33\">\n <\/div>\n <div class=\"field\" style=\"grid-template-columns:1fr auto;\">\n <div class=\"field-label\">Override Method<span class=\"field-sub\">Manual selection<\/span><\/div>\n <select class=\"inp-sel\" id=\"governOverride\" style=\"width:100px;\">\n <option value=\"auto\">As Max<\/option>\n <option value=\"option2\">As Max (33% increased)<\/option>\n <option value=\"As_comp\" style=\"display:none;\">As,comp<\/option>\n <option value=\"As_min\" style=\"display:none;\">As,min<\/option>\n <\/select>\n <\/div>\n <\/div>\n\n <div class=\"sidebar-section\">\n <div class=\"sec-label\">Rebar Selection<\/div>\n <div class=\"field\">\n <div class=\"field-label\">Design Bar Size<span class=\"field-sub\">Metric standard<\/span><\/div>\n <select class=\"inp-sel\" id=\"barSel\">\n <option value=\"10\">\u03d510 mm<\/option>\n <option value=\"12\">\u03d512 mm<\/option>\n <option value=\"16\" selected>\u03d516 mm<\/option>\n <option value=\"20\">\u03d520 mm<\/option>\n <option value=\"25\">\u03d525 mm<\/option>\n <option value=\"32\">\u03d532 mm<\/option>\n <\/select>\n <div class=\"unit\">mm<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">No. of Bars<span class=\"field-sub\">Auto-calculated<\/span><\/div>\n <input type=\"text\" class=\"inp\" id=\"nBarsDisplay\" value=\"\u2014\" readonly\n style=\"background:#f0efe9; color:var(--green); cursor:default; text-align:right;\">\n <div class=\"unit\">pcs<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Req. Spacing<span class=\"field-sub\">c\/c (calculated)<\/span><\/div>\n <input type=\"text\" class=\"inp\" id=\"spacingDisplay\" value=\"\u2014\" readonly\n style=\"background:#f0efe9; color:var(--green); cursor:default; text-align:right;\">\n <div class=\"unit\" id=\"u_spacing\">mm<\/div>\n <\/div>\n <div class=\"field\">\n <div class=\"field-label\">Prov. Spacing<span class=\"field-sub\">c\/c check<\/span><\/div>\n <input type=\"number\" class=\"inp\" id=\"provSpacing\" value=\"150\" step=\"10\" oninput=\"checkProvSpacing()\">\n <div class=\"unit\" id=\"u_provSpacing\">mm<\/div>\n <\/div>\n <\/div>\n <!-- Spacing Report -->\n <div id=\"spacingReport\" style=\"display:none; margin:0 18px 4px; padding:8px 12px; border-radius:4px; border:1px solid var(--border); background:var(--surface2); font-family:'IBM Plex Mono',monospace; font-size:10.5px; line-height:1.8;\">\n <div style=\"display:flex;justify-content:space-between;\"><span style=\"color:var(--text-3);\">Required:<\/span><span id=\"srReq\" style=\"color:var(--text);font-weight:600;\">\u2014<\/span><\/div>\n <div style=\"display:flex;justify-content:space-between;\"><span style=\"color:var(--text-3);\">Provided:<\/span><span id=\"srProv\" style=\"color:var(--text);font-weight:600;\">\u2014<\/span><\/div>\n <\/div>\n <div class=\"spacing-check\" id=\"spacingCheckBadge\"><\/div>\n\n <button class=\"run-btn\" onclick=\"runDesign()\">\u26a1 RUN CALCULATION<\/button>\n\n <\/aside>\n\n <!-- \u2500\u2500 RIGHT CONTENT \u2500\u2500 -->\n <main class=\"content\">\n\n <!-- KEY BANNER -->\n <div class=\"key-banner\" style=\"display:none;\">\n <div class=\"key-item\">\n <div class=\"key-label\">Footing Size<\/div>\n <div class=\"key-val blue\" id=\"kSize\">\u2014<\/div>\n <div class=\"key-unit\" id=\"ku_size\">B \u00d7 L (ft)<\/div>\n <\/div>\n <div class=\"key-div\"><\/div>\n <div class=\"key-item\">\n <div class=\"key-label\">Net Pressure<\/div>\n <div class=\"key-val gold\" id=\"kPres\">\u2014<\/div>\n <div class=\"key-unit\" id=\"ku_pres\">qu,net (ksf)<\/div>\n <\/div>\n <div class=\"key-div\"><\/div>\n <div class=\"key-item\">\n <div class=\"key-label\">Punching Shear<\/div>\n <div class=\"key-val\" id=\"kPunch\">\u2014<\/div>\n <div class=\"key-unit\">Status<\/div>\n <\/div>\n <div class=\"key-div\"><\/div>\n <div class=\"key-item\">\n <div class=\"key-label\">Beam Shear<\/div>\n <div class=\"key-val\" id=\"kBeam\">\u2014<\/div>\n <div class=\"key-unit\">Status<\/div>\n <\/div>\n <div class=\"key-div\"><\/div>\n <div class=\"key-item\">\n <div class=\"key-label\">Steel Required<\/div>\n <div class=\"key-val green\" id=\"kSteel\">\u2014<\/div>\n <div class=\"key-unit\" id=\"ku_steel\">As,req (in\u00b2\/ft)<\/div>\n <\/div>\n <div class=\"key-div\"><\/div>\n <div class=\"key-item\">\n <div class=\"key-label\">Design Bar<\/div>\n <div class=\"key-val\" style=\"color:#f0b050;\" id=\"kBar\">\u2014<\/div>\n <div class=\"key-unit\" id=\"ku_bar\">@ spacing<\/div>\n <\/div>\n <div class=\"key-div\"><\/div>\n <div class=\"key-item\">\n <div class=\"key-label\">Req. Spacing<\/div>\n <div class=\"key-val\" style=\"color:#9a9888;\" id=\"kReqSpacing\">\u2014<\/div>\n <div class=\"key-unit\">c\/c (calc)<\/div>\n <\/div>\n <div class=\"key-div\"><\/div>\n <div class=\"key-item\">\n <div class=\"key-label\">Prov. Spacing<\/div>\n <div class=\"key-val\" style=\"color:#9a9888;\" id=\"kProvSpacing\">\u2014<\/div>\n <div class=\"key-unit\">c\/c (used)<\/div>\n <\/div>\n <div class=\"key-div\"><\/div>\n <div class=\"key-item\">\n <div class=\"key-label\">Spacing Check<\/div>\n <div class=\"key-val\" id=\"kSpacingOK\" style=\"font-size:15px;\">\u2014<\/div>\n <div class=\"key-unit\">Req vs Prov<\/div>\n <\/div>\n <\/div>\n\n <!-- DESIGN SUMMARY PANEL -->\n <div id=\"designSummaryPanel\" style=\"background:var(--surface);border:1px solid var(--border);border-radius:8px;overflow:hidden;box-shadow:var(--shadow);\">\n <div class=\"sec-head\" style=\"cursor:pointer;user-select:none;\" onclick=\"toggleSummarySection('all')\">\n <span class=\"dot dot-blue\"><\/span>\n <span>Design Summary<\/span>\n <span style=\"margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--text-3);\" id=\"summaryToggleHint\">\u25be click to collapse<\/span>\n <\/div>\n <div id=\"summaryContent\" style=\"padding:0 14px 14px;display:block;\">\n <!-- Sub-toggles -->\n <div style=\"display:flex;gap:8px;margin:10px 0 8px;flex-wrap:wrap;\">\n <button onclick=\"toggleSummarySection('footingSize')\" style=\"font-family:'IBM Plex Mono',monospace;font-size:10px;padding:4px 10px;border:1px solid var(--border);border-radius:3px;background:var(--surface2);cursor:pointer;color:var(--text-2);\" id=\"btn_footingSize\">Footing Size \u25be<\/button>\n <button onclick=\"toggleSummarySection('shearDesign')\" style=\"font-family:'IBM Plex Mono',monospace;font-size:10px;padding:4px 10px;border:1px solid var(--border);border-radius:3px;background:var(--surface2);cursor:pointer;color:var(--text-2);\" id=\"btn_shearDesign\">Shear Design \u25be<\/button>\n <button onclick=\"toggleSummarySection('flexuralDesign')\" style=\"font-family:'IBM Plex Mono',monospace;font-size:10px;padding:4px 10px;border:1px solid var(--border);border-radius:3px;background:var(--surface2);cursor:pointer;color:var(--text-2);\" id=\"btn_flexuralDesign\">Flexural Design \u25be<\/button>\n <\/div>\n <div id=\"sec_footingSize\" style=\"display:block;\"><\/div>\n <div id=\"sec_shearDesign\" style=\"display:block;\"><\/div>\n <div id=\"sec_flexuralDesign\" style=\"display:block;\"><\/div>\n <div id=\"sec_summaryTable\" style=\"margin-top:10px;\"><\/div>\n <div id=\"sec_summaryFooter\" style=\"margin-top:10px;\"><\/div>\n <\/div>\n <\/div>\n\n <!-- RESULT CARDS -->\n <div class=\"cards-grid\" style=\"display:none;\">\n\n <!-- Sizing -->\n <div class=\"card\">\n <div class=\"card-head\">\u25b8 Footing Sizing<\/div>\n <div class=\"card-body\">\n <div class=\"r-row\"><span class=\"r-name\">Surcharge Pressure<\/span><span class=\"r-val blue\" id=\"r_sur\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Footing Self-Weight<\/span><span class=\"r-val blue\" id=\"r_qconc\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Avail. Bearing Press.<\/span><span class=\"r-val blue\" id=\"r_abp\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Required Area<\/span><span class=\"r-val gold\" id=\"r_reqA\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Area Provided<\/span><span class=\"r-val\" id=\"r_provA\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Width B<\/span><span class=\"r-val gold\" id=\"r_B\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Length L<\/span><span class=\"r-val gold\" id=\"r_L\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Net Pressure qu<\/span><span class=\"r-val blue\" id=\"r_qu\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n\n <!-- Shear -->\n <div class=\"card\">\n <div class=\"card-head\">\u25b8 Shear Design<\/div>\n <div class=\"card-body\">\n <div class=\"r-row\"><span class=\"r-name\">Effective Depth d<\/span><span class=\"r-val blue\" id=\"r_d\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Critical Perimeter b\u2080<\/span><span class=\"r-val blue\" id=\"r_b0\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Punch. Shear Vp<\/span><span class=\"r-val\" id=\"r_Vp\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Allow. Punch. Va<\/span><span class=\"r-val\" id=\"r_Vpa\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Punching Check<\/span><span id=\"r_punchBadge\">\u2014<\/span><\/div>\n <div style=\"height:1px;background:var(--border);margin:5px 0;\"><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Beam Strip Length<\/span><span class=\"r-val blue\" id=\"r_bsl\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Beam Shear Vb<\/span><span class=\"r-val\" id=\"r_Vb\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Allow. Beam Va<\/span><span class=\"r-val\" id=\"r_Vba\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Beam Shear Check<\/span><span id=\"r_beamBadge\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n\n <!-- Flexure -->\n <div class=\"card\">\n <div class=\"card-head\">\u25b8 Flexure Design<\/div>\n <div class=\"card-body\">\n <div class=\"r-row\"><span class=\"r-name\">Moment Arm<\/span><span class=\"r-val blue\" id=\"r_arm\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Design Moment Mu<\/span><span class=\"r-val gold\" id=\"r_Ml\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Rn<\/span><span class=\"r-val blue\" id=\"r_Rn\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">\u03c1 (Steel Ratio)<\/span><span class=\"r-val blue\" id=\"r_rho\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">\u03c1_max (\u03b5t\u22650.004)<\/span><span class=\"r-val blue\" id=\"r_rhomax\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">\u03c1_max Check<\/span><span id=\"r_rhomaxBadge\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">As,computed<\/span><span class=\"r-val\" id=\"r_Asc\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">As,min<\/span><span class=\"r-val\" id=\"r_Asmin\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">As,T&S (Temp.)<\/span><span class=\"r-val\" id=\"r_Asts\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">As,req (Governs)<\/span><span class=\"r-val gold\" id=\"r_Asreq\">\u2014<\/span><\/div>\n <div class=\"r-row\"><span class=\"r-name\">Controls<\/span><span class=\"r-val\" id=\"r_ctrl\">\u2014<\/span><\/div>\n <\/div>\n <\/div>\n\n <\/div><!-- \/cards-grid -->\n\n <!-- REBAR TABLE (hidden) -->\n <div class=\"rebar-wrap\" style=\"display:none;\">\n <div class=\"sec-head\">\n <span class=\"dot dot-green\"><\/span>\n Rebar Selection Table \u2014 All Standard Metric Bars\n <\/div>\n <div id=\"rebarTableContainer\">\n <div class=\"empty-msg\">Run calculation to see rebar options.<\/div>\n <\/div>\n <\/div>\n\n <!-- DIAGRAM -->\n <div class=\"diagram-wrap\">\n <div class=\"sec-head\">\n <span class=\"dot dot-blue\"><\/span>\n Footing Diagram \u2014 Plan & Section View\n <\/div>\n <svg id=\"footingDiagram\" viewBox=\"0 0 900 420\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"height:420px;\"><\/svg>\n <\/div>\n\n <!-- \u2550\u2550 WORD-STYLE CALCULATION DOCUMENT \u2550\u2550 -->\n <div class=\"calc-doc-wrap\">\n <div class=\"sec-head\">\n <span class=\"dot dot-gold\"><\/span>\n Detailed Calculation \u2014 Engineering Report Format\n <button class=\"pdf-btn\" onclick=\"window.print()\">\u2b07 PDF<\/button>\n <\/div>\n\n <!-- PASSWORD LOCK -->\n <div id=\"reportLock\" style=\"\n background:#f8f8f6; border-top:1px solid var(--border);\n display:flex; flex-direction:column; align-items:center; justify-content:center;\n padding:40px 20px; gap:14px; text-align:center;\">\n <div style=\"font-size:32px;\">\ud83d\udd12<\/div>\n <div style=\"font-family:'IBM Plex Mono',monospace; font-size:13px; font-weight:600; color:var(--text); letter-spacing:0.5px;\">\n Engineering Report \u2014 Password Protected\n <\/div>\n <div style=\"font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--text-3);\">\n Enter password to view the detailed calculation report\n <\/div>\n <div style=\"display:flex; gap:8px; align-items:center;\">\n <input type=\"password\" id=\"reportPassInput\"\n placeholder=\"Enter password\"\n style=\"font-family:'IBM Plex Mono',monospace; font-size:13px; padding:8px 12px;\n border:1px solid var(--border); border-radius:5px; background:#fff;\n color:var(--text); outline:none; width:180px; letter-spacing:2px;\"\n onkeydown=\"if(event.key==='Enter') checkReportPass()\">\n <button onclick=\"checkReportPass()\" style=\"\n font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;\n padding:8px 16px; background:var(--accent); color:#fff; border:none;\n border-radius:5px; cursor:pointer; letter-spacing:0.5px;\">\n UNLOCK\n <\/button>\n <\/div>\n <div id=\"reportPassError\" style=\"\n font-family:'IBM Plex Mono',monospace; font-size:11px;\n color:var(--red); display:none;\">\n \u2717 Incorrect password. Try again.\n <\/div>\n <\/div>\n\n <!-- REPORT CONTENT (hidden until unlocked) -->\n <div id=\"reportContent\" style=\"display:none;\">\n <div class=\"calc-doc-body\">\n <div id=\"calcDoc\">\n <div class=\"empty-msg\">Press [RUN CALCULATION] to generate detailed engineering report.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <\/main>\n <\/div><!-- \/page -->\n<\/div><!-- \/app -->\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n JAVASCRIPT\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<script>\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 REPORT PASSWORD \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction checkReportPass() {\n const input = $('reportPassInput');\n const error = $('reportPassError');\n if (input.value === '1050') {\n $('reportLock').style.display = 'none';\n $('reportContent').style.display = 'block';\n error.style.display = 'none';\n } else {\n error.style.display = 'block';\n input.value = '';\n input.style.borderColor = 'var(--red)';\n setTimeout(() => { input.style.borderColor = 'var(--border)'; }, 1500);\n }\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 HELPERS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst $ = id => document.getElementById(id);\nconst num = id => parseFloat($(id).value) || 0;\nconst fmt = (v, d=2) => (v == null || isNaN(v)) ? '\u2014' : v.toFixed(d);\n\nfunction setR(id, val, cls='') {\n const el = $(id); if(!el) return;\n el.textContent = typeof val === 'string' ? val : fmt(val);\n el.className = 'r-val ' + cls;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 UNIT LABELS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n All inputs stored in Imperial internally.\n When SI selected, convert display values.\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst IMP = {\n colLen:'in', colWid:'in', load:'kip', qa:'ksf', depth:'ft',\n unitWt:'kcf', fc:'psi', fy:'psi', thick:'in', footB:'ft', footL:'ft', cover:'in',\n gammaC:'kcf',\n spacing:'mm' \/\/ bar spacing always in mm\n};\nconst SIu = {\n colLen:'mm', colWid:'mm', load:'kN', qa:'kPa', depth:'m',\n unitWt:'kN\/m\u00b3', fc:'MPa', fy:'MPa', thick:'mm', footB:'m', footL:'m', cover:'mm',\n gammaC:'kN\/m\u00b3',\n spacing:'mm'\n};\n\n\/\/ Conversion: Imperial \u2192 SI\nconst toSI = {\n colLen: v => v * 25.4,\n colWid: v => v * 25.4,\n load: v => v * 4.44822,\n qa: v => v * 47.88,\n depth: v => v * 0.3048,\n unitWt: v => v * 157.087,\n fc: v => v * 0.006895,\n fy: v => v * 0.006895,\n thick: v => v * 25.4,\n footB: v => v * 0.3048,\n footL: v => v * 0.3048,\n cover: v => v * 25.4,\n gammaC: v => v * 157.087,\n};\n\/\/ Conversion: SI \u2192 Imperial\nconst toImp = {\n colLen: v => v \/ 25.4,\n colWid: v => v \/ 25.4,\n load: v => v \/ 4.44822,\n qa: v => v \/ 47.88,\n depth: v => v \/ 0.3048,\n unitWt: v => v \/ 157.087,\n fc: v => v \/ 0.006895,\n fy: v => v \/ 0.006895,\n thick: v => v \/ 25.4,\n footB: v => v \/ 0.3048,\n footL: v => v \/ 0.3048,\n cover: v => v \/ 25.4,\n gammaC: v => v \/ 157.087,\n};\n\nconst FIELDS = ['colLen','colWid','load','qa','depth','unitWt','fc','fy','thick','footB','footL','cover','gammaC'];\n\nfunction switchUnits() {\n const isSI = document.getElementById('u_si').checked;\n FIELDS.forEach(id => {\n const el = $(id);\n const unitEl = $('u_' + id);\n const val = parseFloat(el.value) || 0;\n if (isSI) {\n el.value = +(toSI[id](val).toFixed(4));\n if (unitEl) unitEl.textContent = SIu[id];\n } else {\n el.value = +(toImp[id](val).toFixed(4));\n if (unitEl) unitEl.textContent = IMP[id];\n }\n });\n \/\/ Update key banner units\n updateUnitLabels(isSI);\n runDesign();\n}\n\nfunction updateUnitLabels(isSI) {\n $('ku_size').textContent = isSI ? 'B \u00d7 L (m)' : 'B \u00d7 L (ft)';\n $('ku_pres').textContent = isSI ? 'qu,net (kPa)' : 'qu,net (ksf)';\n $('ku_steel').textContent = isSI ? 'As,req (mm\u00b2\/m)' : 'As,req (in\u00b2\/ft)';\n $('u_spacing').textContent = isSI ? 'mm' : 'in';\n $('u_provSpacing').textContent = isSI ? 'mm' : 'in';\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n MAIN CALCULATION (all Imperial internally)\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst REBAR_DB = [\n {name:'\u03d510', dia_mm:10, area_mm2:78.54},\n {name:'\u03d512', dia_mm:12, area_mm2:113.1},\n {name:'\u03d516', dia_mm:16, area_mm2:201.1},\n {name:'\u03d520', dia_mm:20, area_mm2:314.2},\n {name:'\u03d525', dia_mm:25, area_mm2:490.9},\n {name:'\u03d532', dia_mm:32, area_mm2:804.2},\n];\n\nfunction runDesign() {\n const isSI = document.getElementById('u_si').checked;\n\n \/\/ Read inputs \u2014 convert to Imperial if SI\n let colLen_in, colWid_in, Pu, qa, Df, gamma, fc, fy, t_in, B, L, cover_in, gammaC_kcf;\n\n \/\/ gammaC: read raw so 0 is treated as valid (not replaced by fallback)\n const _gammaCVal = parseFloat($('gammaC').value);\n const _gammaCEntered = $('gammaC').value.trim() !== '';\n\n if (isSI) {\n colLen_in = num('colLen') \/ 25.4;\n colWid_in = num('colWid') \/ 25.4;\n Pu = num('load') \/ 4.44822;\n qa = num('qa') \/ 47.88;\n Df = num('depth') \/ 0.3048;\n gamma = num('unitWt') \/ 157.087;\n fc = num('fc') \/ 0.006895;\n fy = num('fy') \/ 0.006895;\n t_in = num('thick') \/ 25.4;\n B = num('footB') \/ 0.3048;\n L = num('footL') \/ 0.3048;\n cover_in = num('cover') \/ 25.4;\n gammaC_kcf = _gammaCEntered ? _gammaCVal \/ 157.087 : 0.150;\n } else {\n colLen_in = num('colLen');\n colWid_in = num('colWid');\n Pu = num('load');\n qa = num('qa');\n Df = num('depth');\n gamma = num('unitWt');\n fc = num('fc');\n fy = num('fy');\n t_in = num('thick');\n B = num('footB');\n L = num('footL');\n cover_in = num('cover');\n gammaC_kcf = _gammaCEntered ? _gammaCVal : 0.150;\n }\n \/\/ gammaC: use exactly what user entered (0 is valid = no self-weight)\n \/\/ only fallback if field is empty\/missing\n const gammaCRaw = $('gammaC').value;\n if (gammaCRaw === '' || gammaCRaw === null) gammaC_kcf = 0.150;\n\n const selBar_mm = parseInt($('barSel').value);\n const selBar = REBAR_DB.find(r => r.dia_mm === selBar_mm) || REBAR_DB[2];\n const barDia_in = selBar.dia_mm \/ 25.4;\n\n \/* \u2500\u2500 STEP 1: SIZING \u2500\u2500 *\/\n const sur_ksf = gamma * Df;\n const q_conc_ksf = gammaC_kcf * (t_in \/ 12); \/\/ footing concrete self-weight (ksf)\n const avail_bp = qa - sur_ksf - q_conc_ksf;\n const req_area = avail_bp > 0 ? Pu \/ avail_bp : 0;\n const prov_area = B * L;\n\n \/* \u2500\u2500 STEP 2: NET PRESSURE \u2500\u2500 *\/\n const qu_net = prov_area > 0 ? Pu \/ prov_area : 0;\n\n \/* \u2500\u2500 STEP 3: EFFECTIVE DEPTH \u2500\u2500 *\/\n const d_in = t_in - cover_in - selBar.dia_mm \/ 25.4;\n\n \/* \u2500\u2500 STEP 4: PUNCHING SHEAR \u2500\u2500 *\/\n const c_side_in = colLen_in + d_in; \/\/ side of critical area\n const b0_in = 4 * c_side_in;\n const punch_area = (c_side_in * c_side_in) \/ 144; \/\/ ft\u00b2\n const Vp = qu_net * (prov_area - punch_area);\n const phi_v = 0.75;\n const Va_punch = phi_v * 4 * Math.sqrt(fc) * b0_in * d_in \/ 1000; \/\/ kip\n\n \/* \u2500\u2500 STEP 5: BEAM SHEAR \u2500\u2500 *\/\n const bsl_in = (B * 12 - colWid_in) \/ 2 - d_in; \/\/ strip length (in)\n const bsl_ft = bsl_in \/ 12;\n const Vb = qu_net * bsl_ft; \/\/ kip per ft width\n const Va_beam = phi_v * 2 * Math.sqrt(fc) * 12 * d_in \/ 1000; \/\/ kip per ft\n\n \/* \u2500\u2500 STEP 6: FLEXURE \u2500\u2500 *\/\n const arm_ft = B \/ 2 - colLen_in \/ 24;\n const Ml = qu_net * arm_ft * arm_ft \/ 2; \/\/ kip\u00b7ft\/ft\n const phi_f = 0.90;\n const Rn = (Ml * 12000) \/ (phi_f * 12 * d_in * d_in); \/\/ psi\n const rho = (0.85 * fc \/ fy) * (1 - Math.sqrt(Math.max(0, 1 - 2 * Rn \/ (0.85 * fc))));\n \/\/ \u03c1_max: ACI 318-19 \u00a713.3.2 \u2014 net tensile strain \u03b5t \u2265 0.004 at nominal strength\n const beta1 = Math.max(0.65, 0.85 - 0.05 * Math.max(0, fc - 4000) \/ 1000);\n const rho_max = 0.85 * (fc \/ fy) * beta1 * (3 \/ 7); \/\/ c\/d = \u03b5cu\/(\u03b5cu+0.004) = 3\/7\n const rho_ok = rho <= rho_max;\n const As_max = rho_max * 12 * d_in; \/\/ in\u00b2\/ft\n const As_comp = rho * 12 * d_in; \/\/ in\u00b2\/ft\n const As_min = (200 \/ fy) * 12 * d_in; \/\/ in\u00b2\/ft [ACI \u00a79.6.1.2]\n\n \/\/ Temperature & Shrinkage [ACI 318-19 \u00a724.4.3.2]\n const rho_ts = fy <= 60000 ? 0.0018 : Math.max(0.0014, 0.0018 * 60000 \/ fy);\n const As_ts = rho_ts * 12 * t_in; \/\/ in\u00b2\/ft (gross thickness h = t)\n\n const factorCoeff = parseFloat($('factorCoeff').value) || 1.33;\n const As_133 = factorCoeff * As_comp; \/\/ factor \u00d7 As,comp (for Option 2)\n const overrideMode = $('governOverride').value;\n let As_req, controls;\n if (overrideMode === 'As_comp') {\n As_req = As_comp; controls = 'As,comp (manual)';\n } else if (overrideMode === 'As_min') {\n As_req = As_min; controls = 'As,min (manual)';\n } else if (overrideMode === 'option2') {\n \/\/ Option 2: Max(Min(factor\u00d7As,comp, As,min), As,ts)\n const inner = Math.min(As_133, As_min);\n As_req = Math.max(inner, As_ts);\n if (As_req === As_ts && As_ts > inner) controls = 'As,T&S governs (Opt.2)';\n else if (inner === As_133) controls = factorCoeff.toFixed(2)+'\u00d7As,comp governs (Opt.2)';\n else controls = 'As,min governs (Opt.2)';\n } else {\n \/\/ Option 1 (default): Max(As,comp, As,min, As,ts)\n As_req = Math.max(As_comp, As_min, As_ts);\n if (As_req === As_ts && As_ts >= As_comp && As_ts >= As_min) controls = 'As,T&S governs (Opt.1)';\n else if (As_req === As_min && As_min >= As_comp) controls = 'As,min governs (Opt.1)';\n else controls = 'Flexure governs (Opt.1)';\n }\n\n \/* \u2500\u2500 STEP 7: REBAR SPACING \u2500\u2500\n Correct formula:\n As_req_per_mm = As_req[in\u00b2\/ft] \u00d7 645.16[mm\u00b2\/in\u00b2] \/ 304.8[mm\/ft]\n spacing [mm] = bar_area[mm\u00b2] \/ As_req_per_mm\n = bar_area[mm\u00b2] \u00d7 304.8 \/ (As_req \u00d7 645.16)\n \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\n const As_req_mm2perft = As_req * 645.16; \/\/ mm\u00b2\/ft width\n const footLen_mm = L * 304.8;\n\n const rebarRows = REBAR_DB.map(r => {\n const spacing_mm = r.area_mm2 * 304.8 \/ As_req_mm2perft; \/\/ \u2190 CORRECT\n const spacing_fl = Math.floor(spacing_mm);\n const nBars = spacing_fl > 0 ? Math.ceil(footLen_mm \/ spacing_fl) : 0;\n const spacing_use = spacing_fl > 0 ? Math.floor((footLen_mm - 2*cover_in*25.4) \/ Math.max(nBars-1, 1)) : 0;\n return { ...r, spacing_raw: spacing_mm, spacing: spacing_use, nBars };\n });\n\n \/\/ Selected bar from dropdown\n const selRow = rebarRows.find(r => r.dia_mm === selBar_mm) || rebarRows[2];\n\n \/\/ Auto-recommend: first bar where raw spacing \u2264 300mm and bar \u2265 10mm\n const autoRec = rebarRows.find(r => r.spacing_raw <= 300) || rebarRows[rebarRows.length - 1];\n\n \/* \u2500\u2500 DISPLAY CONVERSIONS \u2500\u2500 *\/\n const dispF = isSI ? {\n len: v => fmt(v * 25.4, 0) + ' mm',\n ft: v => fmt(v * 0.3048, 3) + ' m',\n ft2: v => fmt(v * 0.0929, 3) + ' m\u00b2',\n pres: v => fmt(v * 47.88, 2) + ' kPa',\n force: v => fmt(v * 4.44822, 1) + ' kN',\n moment: v => fmt(v * 1.35582, 2) + ' kN\u00b7m\/m',\n stress: v => fmt(v * 0.006895, 3) + ' MPa',\n steel: v => fmt(v * 645.16 \/ 0.3048, 0) + ' mm\u00b2\/m',\n steelv: v => v * 645.16 \/ 0.3048,\n } : {\n len: v => fmt(v, 2) + ' in',\n ft: v => fmt(v, 2) + ' ft',\n ft2: v => fmt(v, 2) + ' ft\u00b2',\n pres: v => fmt(v, 3) + ' ksf',\n force: v => fmt(v, 1) + ' kip',\n moment: v => fmt(v, 2) + ' k\u00b7ft\/ft',\n stress: v => fmt(v, 1) + ' psi',\n steel: v => fmt(v, 3) + ' in\u00b2\/ft',\n steelv: v => v,\n };\n\n \/* \u2500\u2500 UPDATE KEY BANNER \u2500\u2500 *\/\n $('kSize').textContent = isSI\n ? fmt(B*0.3048,2) + ' \u00d7 ' + fmt(L*0.3048,2)\n : fmt(B,1) + ' \u00d7 ' + fmt(L,1);\n $('kPres').textContent = isSI ? fmt(qu_net*47.88, 2) : fmt(qu_net, 3);\n\n const pOK = Vp < Va_punch;\n const bOK = Vb < Va_beam;\n $('kPunch').innerHTML = pOK ? '<span style=\"color:#52c97a\">\u2713 OK<\/span>' : '<span style=\"color:#f07070\">\u2717 FAIL<\/span>';\n $('kBeam').innerHTML = bOK ? '<span style=\"color:#52c97a\">\u2713 OK<\/span>' : '<span style=\"color:#f07070\">\u2717 FAIL<\/span>';\n $('kSteel').textContent = isSI ? fmt(As_req * 645.16 \/ 0.3048, 0) : fmt(As_req, 3);\n $('kBar').textContent = `\u03d5${selBar_mm}mm @ ${selRow.spacing}mm`;\n $('ku_bar').textContent = selRow.nBars + ' bars each way';\n\n \/* \u2500\u2500 SIZING CARD \u2500\u2500 *\/\n setR('r_sur', dispF.pres(sur_ksf), 'blue');\n setR('r_qconc',dispF.pres(q_conc_ksf), 'blue');\n setR('r_abp', dispF.pres(avail_bp), 'blue');\n setR('r_reqA', dispF.ft2(req_area), 'gold');\n setR('r_provA',dispF.ft2(prov_area), prov_area >= req_area ? '' : 'red');\n setR('r_B', dispF.ft(B), 'gold');\n setR('r_L', dispF.ft(L), 'gold');\n setR('r_qu', dispF.pres(qu_net), 'blue');\n\n \/* \u2500\u2500 SHEAR CARD \u2500\u2500 *\/\n setR('r_d', dispF.len(d_in), 'blue');\n setR('r_b0', dispF.len(b0_in), 'blue');\n setR('r_Vp', dispF.force(Vp), pOK ? '' : 'red');\n setR('r_Vpa', dispF.force(Va_punch));\n $('r_punchBadge').innerHTML = pOK\n ? '<span class=\"badge badge-ok\">\u2713 PASS<\/span>'\n : '<span class=\"badge badge-fail\">\u2717 FAIL<\/span>';\n setR('r_bsl', dispF.ft(bsl_ft), 'blue');\n setR('r_Vb', dispF.force(Vb), bOK ? '' : 'red');\n setR('r_Vba', dispF.force(Va_beam));\n $('r_beamBadge').innerHTML = bOK\n ? '<span class=\"badge badge-ok\">\u2713 PASS<\/span>'\n : '<span class=\"badge badge-fail\">\u2717 FAIL<\/span>';\n\n \/* \u2500\u2500 FLEXURE CARD \u2500\u2500 *\/\n setR('r_arm', dispF.ft(arm_ft), 'blue');\n setR('r_Ml', dispF.moment(Ml), 'gold');\n setR('r_Rn', dispF.stress(Rn), 'blue');\n setR('r_rho', rho.toExponential(3), 'blue');\n setR('r_rhomax', rho_max.toExponential(3), 'blue');\n $('r_rhomaxBadge').innerHTML = rho_ok\n ? '<span class=\"badge badge-ok\">\u2713 PASS<\/span>'\n : '<span class=\"badge badge-fail\">\u2717 FAIL<\/span>';\n setR('r_Asc', dispF.steel(As_comp));\n setR('r_Asmin', dispF.steel(As_min));\n setR('r_Asts', dispF.steel(As_ts));\n setR('r_Asreq', dispF.steel(As_req), 'gold');\n setR('r_ctrl', controls, As_req > As_comp ? 'red' : 'green');\n\n \/* \u2500\u2500 SELECTED BAR DISPLAY \u2500\u2500 *\/\n const reqSpacingMM = selRow.spacing;\n $('nBarsDisplay').value = selRow.nBars + ' bars';\n\n \/\/ Show spacing in selected unit in sidebar\n const isSI_sp = isSI;\n const reqSpacingDisp = isSI_sp ? reqSpacingMM + ' mm' : (reqSpacingMM \/ 25.4).toFixed(2) + ' in';\n $('spacingDisplay').value = reqSpacingDisp;\n $('spacingDisplay').dataset.reqMM = reqSpacingMM;\n $('u_spacing').textContent = isSI_sp ? 'mm' : 'in';\n\n \/\/ Update key banner spacing items\n const provRaw = parseFloat($('provSpacing').value) || 0;\n const provMM = isSI_sp ? provRaw : provRaw * 25.4; \/\/ convert to mm for comparison\n $('kReqSpacing').textContent = isSI_sp ? reqSpacingMM + ' mm' : (reqSpacingMM\/25.4).toFixed(2) + '\"';\n $('kProvSpacing').textContent = isSI_sp ? provRaw + ' mm' : provRaw + '\"';\n if (provRaw > 0) {\n const spOK = provMM <= reqSpacingMM;\n $('kSpacingOK').innerHTML = spOK\n ? '<span style=\"color:#52c97a;font-size:13px;\">\u2713 OK<\/span>'\n : '<span style=\"color:#f07070;font-size:13px;\">\u2717 NOT OK<\/span>';\n } else {\n $('kSpacingOK').textContent = '\u2014';\n }\n\n checkProvSpacing();\n\n \/* \u2500\u2500 BUILD REBAR TABLE \u2500\u2500 *\/\n buildRebarTable(rebarRows, autoRec, selRow, As_req, isSI);\n\n \/* \u2500\u2500 DIAGRAM \u2500\u2500 *\/\n drawDiagram(B, L, colLen_in, colWid_in, t_in, d_in, selRow, Df);\n\n \/* \u2500\u2500 WORD-STYLE CALC DOC \u2500\u2500 *\/\n buildCalcDoc({\n isSI, colLen_in, colWid_in, Pu, qa, Df, gamma, fc, fy,\n t_in, cover_in, barDia_in, selBar_mm, B, L, gammaC_kcf,\n sur_ksf, q_conc_ksf, avail_bp, req_area, prov_area, qu_net,\n d_in, c_side_in, b0_in, punch_area, Vp, Va_punch,\n bsl_in, bsl_ft, Vb, Va_beam, phi_v, phi_f,\n arm_ft, Ml, Rn, rho, beta1, rho_max, rho_ok, As_max,\n As_comp, As_min, As_ts, rho_ts, As_req, As_133, factorCoeff,\n controls, overrideMode,\n selRow, autoRec, As_req_mm2perft, footLen_mm, dispF,\n provSpacingMM: parseFloat($('provSpacing').value) || null\n });\n\n \/* \u2500\u2500 DESIGN SUMMARY (top panel) \u2500\u2500 *\/\n buildDesignSummary({\n isSI, B, L, t_in, cover_in, d_in, qu_net, req_area, prov_area,\n Vp, Va_punch, Vb, Va_beam, As_req, As_min, As_ts, selBar_mm, selRow,\n rho, rho_max, rho_ok, controls, fc, fy, dispF,\n provSpacingMM: parseFloat($('provSpacing').value) || null\n });\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n REBAR TABLE\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction buildRebarTable(rows, autoRec, selRow, As_req, isSI) {\n const As_unit = isSI ? fmt(As_req * 645.16 \/ 0.3048, 0) + ' mm\u00b2\/m' : fmt(As_req, 3) + ' in\u00b2\/ft';\n let html = `<table class=\"rebar-table\">\n <thead><tr>\n <th>Bar<\/th>\n <th>Dia (mm)<\/th>\n <th>Area (mm\u00b2)<\/th>\n <th>Spacing (mm)<\/th>\n <th>No. Bars (each way)<\/th>\n <th>Note<\/th>\n <\/tr><\/thead><tbody>`;\n\n rows.forEach(r => {\n const isSel = r.dia_mm === selRow.dia_mm;\n const isRec = r.dia_mm === autoRec.dia_mm && !isSel;\n const cls = isSel ? 'sel-bar' : (isRec ? 'rec' : '');\n const note = isSel ? '\u2605 Selected' : (isRec ? '\u2b24 Auto-rec' : '');\n html += `<tr class=\"${cls}\">\n <td>${r.name}<\/td>\n <td>${r.dia_mm}<\/td>\n <td>${r.area_mm2.toFixed(0)}<\/td>\n <td>${r.spacing}<\/td>\n <td>${r.nBars}<\/td>\n <td>${note}<\/td>\n <\/tr>`;\n });\n\n html += `<\/tbody><\/table>\n <div class=\"rec-note\">\n \u2605 Selected bar: \u03d5${selRow.dia_mm}mm @ ${selRow.spacing}mm c\/c \u00b7\n ${selRow.nBars} bars each direction \u00b7\n As,req = ${As_unit}\n <\/div>`;\n $('rebarTableContainer').innerHTML = html;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n SVG DIAGRAM\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction drawDiagram(B, L, colLen, colWid, thick, d, rec, Df) {\n const svg = $('footingDiagram');\n const isSI = document.getElementById('u_si').checked;\n const f2 = (v,d=2) => isNaN(v)?'\u2014':v.toFixed(d);\n\n \/\/ \u2500\u2500 PLAN VIEW \u2500\u2500\n const pad = 50;\n const planX0 = pad, planY0 = 55;\n const planScale = Math.min(320\/(B*12), 270\/(L*12));\n const planW = B*12*planScale, planH = L*12*planScale;\n const planCX = planX0+planW\/2, planCY = planY0+planH\/2;\n const cW = colWid*planScale, cH = colLen*planScale;\n const dPlan = d*planScale;\n const nLines = Math.min(rec.nBars, 12);\n\n \/\/ rebar lines (simple, spaced)\n const rH = Array.from({length:nLines},(_,i)=>{\n const y = planY0 + planH*(i+1)\/(nLines+1);\n return `<line x1=\"${planX0+4}\" y1=\"${y.toFixed(1)}\" x2=\"${(planX0+planW-4).toFixed(1)}\" y2=\"${y.toFixed(1)}\" stroke=\"#2e7d32\" stroke-width=\"1.2\"\/>`;\n });\n const rV = Array.from({length:nLines},(_,i)=>{\n const x = planX0 + planW*(i+1)\/(nLines+1);\n return `<line x1=\"${x.toFixed(1)}\" y1=\"${planY0+4}\" x2=\"${x.toFixed(1)}\" y2=\"${(planY0+planH-4).toFixed(1)}\" stroke=\"#2e7d32\" stroke-width=\"1.2\" opacity=\"0.6\"\/>`;\n });\n\n \/\/ \u2500\u2500 SECTION VIEW \u2500\u2500\n const secX0 = 500;\n const secScale = Math.min(320\/(B*12), 180\/thick);\n const secW = B*12*secScale, secH = thick*secScale;\n const secY0 = 100, secCX = secX0+secW\/2;\n const gY = secY0 - Math.min(Df*secScale*0.35, 40);\n const rebarY = secY0+secH - (3*secScale);\n const nDots = Math.min(rec.nBars, 10);\n const dots = Array.from({length:nDots},(_,i)=>{\n const x = secX0+14+i*(secW-28)\/Math.max(nDots-1,1);\n return `<circle cx=\"${x.toFixed(1)}\" cy=\"${rebarY.toFixed(1)}\" r=\"${Math.max(2.5,Math.min(5,32\/nDots)).toFixed(1)}\" fill=\"#2e7d32\"\/>`;\n });\n\n const sizeB = isSI ? f2(B*0.3048,2)+' m' : f2(B,1)+' ft';\n const sizeT = isSI ? f2(thick*25.4,0)+' mm' : f2(thick,0)+'\"';\n const sizeD = isSI ? f2(d*25.4,0)+' mm' : f2(d,1)+'\"';\n const sizeDf = isSI ? f2(Df*0.3048,2)+' m' : f2(Df,2)+' ft';\n\n svg.innerHTML = `\n <defs>\n <marker id=\"arr\" markerWidth=\"7\" markerHeight=\"7\" refX=\"3\" refY=\"3.5\" orient=\"auto\">\n <path d=\"M0,1 L6,3.5 L0,6 Z\" fill=\"#1565c0\"\/>\n <\/marker>\n <marker id=\"arrl\" markerWidth=\"7\" markerHeight=\"7\" refX=\"3\" refY=\"3.5\" orient=\"auto-start-reverse\">\n <path d=\"M0,1 L6,3.5 L0,6 Z\" fill=\"#1565c0\"\/>\n <\/marker>\n <\/defs>\n <rect width=\"900\" height=\"400\" fill=\"#f8f8f6\"\/>\n\n <!-- \u2500\u2500 PLAN \u2500\u2500 -->\n <text x=\"${planCX.toFixed(1)}\" y=\"22\" fill=\"#555\" font-size=\"10\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" letter-spacing=\"2\" font-weight=\"600\">PLAN VIEW<\/text>\n <!-- footing outline -->\n <rect x=\"${planX0}\" y=\"${planY0}\" width=\"${planW.toFixed(1)}\" height=\"${planH.toFixed(1)}\" fill=\"#e8f0fb\" stroke=\"#1565c0\" stroke-width=\"2\"\/>\n <!-- rebar lines -->\n ${rH.join('')}${rV.join('')}\n <!-- critical perimeter -->\n <rect x=\"${(planCX-cW\/2-dPlan).toFixed(1)}\" y=\"${(planCY-cH\/2-dPlan).toFixed(1)}\" width=\"${(cW+2*dPlan).toFixed(1)}\" height=\"${(cH+2*dPlan).toFixed(1)}\" fill=\"none\" stroke=\"#c62828\" stroke-width=\"1.5\" stroke-dasharray=\"5,3\"\/>\n <!-- column -->\n <rect x=\"${(planCX-cW\/2).toFixed(1)}\" y=\"${(planCY-cH\/2).toFixed(1)}\" width=\"${cW.toFixed(1)}\" height=\"${cH.toFixed(1)}\" fill=\"#ffe0b2\" stroke=\"#e65100\" stroke-width=\"2\"\/>\n <text x=\"${planCX.toFixed(1)}\" y=\"${(planCY+4).toFixed(1)}\" fill=\"#e65100\" font-size=\"9\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" font-weight=\"600\">COL<\/text>\n <!-- crit label -->\n <text x=\"${(planCX).toFixed(1)}\" y=\"${(planCY-cH\/2-dPlan-6).toFixed(1)}\" fill=\"#c62828\" font-size=\"8\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\">d\/2 CRIT. PERIM.<\/text>\n <!-- B dimension -->\n <line x1=\"${planX0}\" y1=\"${(planY0+planH+14).toFixed(1)}\" x2=\"${(planX0+planW).toFixed(1)}\" y2=\"${(planY0+planH+14).toFixed(1)}\" stroke=\"#1565c0\" stroke-width=\"1.5\" marker-start=\"url(#arrl)\" marker-end=\"url(#arr)\"\/>\n <text x=\"${planCX.toFixed(1)}\" y=\"${(planY0+planH+28).toFixed(1)}\" fill=\"#1565c0\" font-size=\"10\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" font-weight=\"600\">B = ${sizeB}<\/text>\n <!-- rebar note -->\n <text x=\"${planX0}\" y=\"${(planY0-6).toFixed(1)}\" fill=\"#2e7d32\" font-size=\"9\" font-family=\"IBM Plex Mono\" font-weight=\"600\">\u03d5${rec.dia_mm} @ ${rec.spacing}mm c\/c (${rec.nBars} bars)<\/text>\n\n <!-- \u2500\u2500 SECTION \u2500\u2500 -->\n <text x=\"${secCX.toFixed(1)}\" y=\"22\" fill=\"#555\" font-size=\"10\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" letter-spacing=\"2\" font-weight=\"600\">SECTION VIEW<\/text>\n <!-- soil\/fill above -->\n <rect x=\"${secX0}\" y=\"${gY.toFixed(1)}\" width=\"${secW.toFixed(1)}\" height=\"${(secY0-gY).toFixed(1)}\" fill=\"#d7ccc8\" stroke=\"#795548\" stroke-width=\"1\"\/>\n ${Array.from({length:8},(_,i)=>{const x=secX0+i*(secW\/7);return `<line x1=\"${x}\" y1=\"${gY}\" x2=\"${x-10}\" y2=\"${(gY+10)}\" stroke=\"#a1887f\" stroke-width=\"1\"\/>`;}).join('')}\n <!-- GL line -->\n <line x1=\"${(secX0-8).toFixed(1)}\" y1=\"${gY.toFixed(1)}\" x2=\"${(secX0+secW+8).toFixed(1)}\" y2=\"${gY.toFixed(1)}\" stroke=\"#555\" stroke-width=\"1.5\" stroke-dasharray=\"6,3\"\/>\n <text x=\"${(secX0-10).toFixed(1)}\" y=\"${(gY+4).toFixed(1)}\" fill=\"#555\" font-size=\"9\" font-family=\"IBM Plex Mono\" text-anchor=\"end\">GL<\/text>\n <!-- column above grade -->\n <rect x=\"${(secCX-colWid*secScale\/2).toFixed(1)}\" y=\"${gY.toFixed(1)}\" width=\"${(colWid*secScale).toFixed(1)}\" height=\"${(secY0-gY).toFixed(1)}\" fill=\"#ffe0b2\" stroke=\"#e65100\" stroke-width=\"1.5\"\/>\n <text x=\"${secCX.toFixed(1)}\" y=\"${((gY+secY0)\/2+4).toFixed(1)}\" fill=\"#e65100\" font-size=\"8\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" font-weight=\"600\">COL<\/text>\n <!-- footing body -->\n <rect x=\"${secX0}\" y=\"${secY0}\" width=\"${secW.toFixed(1)}\" height=\"${secH.toFixed(1)}\" fill=\"#e8f0fb\" stroke=\"#1565c0\" stroke-width=\"2\"\/>\n <!-- rebar line -->\n <line x1=\"${(secX0+10).toFixed(1)}\" y1=\"${rebarY.toFixed(1)}\" x2=\"${(secX0+secW-10).toFixed(1)}\" y2=\"${rebarY.toFixed(1)}\" stroke=\"#2e7d32\" stroke-width=\"2.5\"\/>\n ${dots.join('')}\n <!-- thickness arrow -->\n <line x1=\"${(secX0-18).toFixed(1)}\" y1=\"${secY0}\" x2=\"${(secX0-18).toFixed(1)}\" y2=\"${(secY0+secH).toFixed(1)}\" stroke=\"#1565c0\" stroke-width=\"1.5\" marker-start=\"url(#arrl)\" marker-end=\"url(#arr)\"\/>\n <text x=\"${(secX0-22).toFixed(1)}\" y=\"${(secY0+secH\/2+4).toFixed(1)}\" fill=\"#1565c0\" font-size=\"9\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" transform=\"rotate(-90,${(secX0-22).toFixed(1)},${(secY0+secH\/2).toFixed(1)})\">t = ${sizeT}<\/text>\n <!-- d arrow -->\n <line x1=\"${(secX0+secW+14).toFixed(1)}\" y1=\"${secY0}\" x2=\"${(secX0+secW+14).toFixed(1)}\" y2=\"${rebarY.toFixed(1)}\" stroke=\"#e65100\" stroke-width=\"1.5\" marker-start=\"url(#arrl)\" marker-end=\"url(#arr)\"\/>\n <text x=\"${(secX0+secW+24).toFixed(1)}\" y=\"${((secY0+rebarY)\/2+4).toFixed(1)}\" fill=\"#e65100\" font-size=\"9\" font-family=\"IBM Plex Mono\">d=${sizeD}<\/text>\n <!-- B dimension -->\n <line x1=\"${secX0}\" y1=\"${(secY0+secH+14).toFixed(1)}\" x2=\"${(secX0+secW).toFixed(1)}\" y2=\"${(secY0+secH+14).toFixed(1)}\" stroke=\"#1565c0\" stroke-width=\"1.5\" marker-start=\"url(#arrl)\" marker-end=\"url(#arr)\"\/>\n <text x=\"${secCX.toFixed(1)}\" y=\"${(secY0+secH+28).toFixed(1)}\" fill=\"#1565c0\" font-size=\"10\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" font-weight=\"600\">B = ${sizeB}<\/text>\n <!-- Df dimension -->\n <line x1=\"${(secX0-36).toFixed(1)}\" y1=\"${gY.toFixed(1)}\" x2=\"${(secX0-36).toFixed(1)}\" y2=\"${secY0}\" stroke=\"#795548\" stroke-width=\"1.5\" marker-start=\"url(#arrl)\" marker-end=\"url(#arr)\"\/>\n <text x=\"${(secX0-40).toFixed(1)}\" y=\"${((gY+secY0)\/2+4).toFixed(1)}\" fill=\"#795548\" font-size=\"9\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" transform=\"rotate(-90,${(secX0-40).toFixed(1)},${((gY+secY0)\/2).toFixed(1)})\">Df=${sizeDf}<\/text>\n <!-- rebar label -->\n <text x=\"${secCX.toFixed(1)}\" y=\"${(rebarY+15).toFixed(1)}\" fill=\"#2e7d32\" font-size=\"9\" font-family=\"IBM Plex Mono\" text-anchor=\"middle\" font-weight=\"600\">\u03d5${rec.dia_mm} @ ${rec.spacing}mm<\/text>\n `;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\n WORD-STYLE CALCULATION DOCUMENT\n\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction buildCalcDoc(D) {\n const isSI = D.isSI;\n const f = D.dispF;\n const f2 = (v, d=2) => isNaN(v) ? '\u2014' : v.toFixed(d);\n\n \/\/ Label helpers\n const uF = isSI ? 'kN' : 'kip';\n const uP = isSI ? 'kPa' : 'ksf';\n const uM = isSI ? 'MPa' : 'psi';\n const uL = isSI ? 'mm' : 'in';\n const uLf = isSI ? 'm' : 'ft';\n const uA = isSI ? 'mm\u00b2\/m' : 'in\u00b2\/ft';\n const uMom = isSI ? 'kN\u00b7m\/m' : 'kip\u00b7ft\/ft';\n\n \/\/ Value display helpers (always show in selected unit)\n const vF = v => f.force(v);\n const vP = v => f.pres(v);\n const vL = v => f.len(v);\n const vFt = v => f.ft(v);\n const vA2 = v => f.ft2(v);\n const vSt = v => f.stress(v);\n const vAs = v => f.steel(v);\n const vMo = v => f.moment(v);\n\n \/\/ Raw display (imperial values for formula substitution)\n const rv = (v, d=3) => f2(v, d);\n\n const html = `\n <div class=\"doc-page\">\n\n <!-- TITLE -->\n <div class=\"doc-title-block\">\n <h2>SQUARE ISOLATED FOOTING DESIGN<\/h2>\n <div class=\"doc-sub\">ACI 318-19 \u00b7 REINFORCED CONCRETE \u00b7 ${isSI ? 'SI UNITS' : 'IMPERIAL UNITS'}<\/div>\n <\/div>\n\n <!-- \u2500\u2500\u2500 STEP 1 \u2500\u2500\u2500 -->\n <div class=\"doc-section\">\n <div class=\"doc-sec-title blue\">1. DESIGN DATA & FOOTING SIZING<\/div>\n <div class=\"doc-content\">\n\n <div class=\"doc-given\">\n <strong>Given Design Data:<\/strong><br>\n Pedestal Column Size: ${isSI ? Math.round(D.colLen_in*25.4)+' \u00d7 '+Math.round(D.colWid_in*25.4)+' mm' : Math.round(D.colLen_in)+'\" \u00d7 '+Math.round(D.colWid_in)+'\"'}<br>\n Factored Column Load: Pu = ${vF(D.Pu)}<br>\n Allowable Soil Bearing Capacity: q\u2090 = ${vP(D.qa)}<br>\n Depth of Footing Below Ground: Df = ${vFt(D.Df)}<br>\n Unit Weight of Soil + Concrete (avg.): \u03b3 = ${isSI ? f2(D.gamma*157.087,2)+' kN\/m\u00b3' : f2(D.gamma,3)+' kcf'}<br>\n Unit Weight of Concrete: \u03b3<sub>c<\/sub> = ${isSI ? f2(D.gammaC_kcf*157.087,2)+' kN\/m\u00b3' : f2(D.gammaC_kcf,4)+' kcf'}\n <\/div>\n\n <div class=\"doc-calc\">\n <div class=\"calc-line-wide\"><strong>1.1 Surcharge Pressure:<\/strong><\/div>\n <div class=\"formula-box\">\n q<sub>sur<\/sub> = \u03b3 \u00d7 D<sub>f<\/sub><br>\n      = ${isSI ? f2(D.gamma*157.087,3)+' kN\/m\u00b3' : f2(D.gamma,3)+' kcf'} \u00d7 ${vFt(D.Df)}<br>\n      = <span class=\"fv\">${vP(D.sur_ksf)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>1.2 Footing Concrete Self-Weight:<\/strong><\/div>\n <div class=\"formula-box\">\n q<sub>conc<\/sub> = \u03b3<sub>c<\/sub> \u00d7 t<br>\n          = ${isSI ? f2(D.gammaC_kcf*157.087,2)+' kN\/m\u00b3' : f2(D.gammaC_kcf,4)+' kcf'} \u00d7 ${isSI ? f2(D.t_in*25.4\/1000,4)+' m' : f2(D.t_in\/12,4)+' ft'}<br>\n          = <span class=\"fv\">${vP(D.q_conc_ksf)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>1.3 Available Bearing Pressure:<\/strong><\/div>\n <div class=\"formula-box\">\n q<sub>avail<\/sub> = q<sub>a<\/sub> \u2212 q<sub>sur<\/sub> \u2212 q<sub>conc<\/sub><br>\n         = ${vP(D.qa)} \u2212 ${vP(D.sur_ksf)} \u2212 ${vP(D.q_conc_ksf)}<br>\n         = <span class=\"fv\">${vP(D.avail_bp)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>1.4 Required Footing Area:<\/strong><\/div>\n <div class=\"formula-box\">\n A<sub>req<\/sub> = P<sub>u<\/sub> \/ q<sub>avail<\/sub><br>\n       = ${vF(D.Pu)} \/ ${vP(D.avail_bp)}<br>\n       = <span class=\"fv\">${vA2(D.req_area)}<\/span><br>\n Min. footing side = \u221a${vA2(D.req_area)} = <span class=\"fv\">${isSI ? f2(Math.sqrt(D.req_area)*0.3048,2)+' m' : f2(Math.sqrt(D.req_area),2)+' ft'}<\/span>\n <\/div>\n <\/div>\n\n <div class=\"doc-result ${D.prov_area >= D.req_area ? 'ok' : 'fail'}\">\n \u2234 Selected: B = ${vFt(D.B)} \u00d7 L = ${vFt(D.L)}<br>\n    Area Provided = ${vA2(D.prov_area)} ${D.prov_area >= D.req_area ? '\u2265' : '<'} Required ${vA2(D.req_area)} ${D.prov_area >= D.req_area ? '\u2713 OK' : '\u2717 REVISE'}\n <\/div>\n\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500\u2500 STEP 2 \u2500\u2500\u2500 -->\n <div class=\"doc-section\">\n <div class=\"doc-sec-title gold\">2. NET FACTORED UPWARD PRESSURE<\/div>\n <div class=\"doc-content\">\n <div class=\"doc-calc\">\n <div class=\"formula-box\">\n q<sub>u,net<\/sub> = P<sub>u<\/sub> \/ (B \u00d7 L)<br>\n         = ${vF(D.Pu)} \/ (${vFt(D.B)} \u00d7 ${vFt(D.L)})<br>\n         = ${vF(D.Pu)} \/ ${vA2(D.prov_area)}<br>\n         = <span class=\"fv\">${vP(D.qu_net)}<\/span>\n <\/div>\n <\/div>\n <div class=\"doc-result info\">q<sub>u,net<\/sub> = ${vP(D.qu_net)} (Net factored upward bearing pressure for strength design)<\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500\u2500 STEP 3 \u2500\u2500\u2500 -->\n <div class=\"doc-section\">\n <div class=\"doc-sec-title blue\">3. EFFECTIVE DEPTH OF FOOTING<\/div>\n <div class=\"doc-content\">\n <div class=\"doc-given\">\n Footing Thickness: t = ${vL(D.t_in)}<br>\n Clear Cover: c = ${vL(D.cover_in)}<br>\n Selected Bar Diameter: \u03d5 = ${isSI ? D.selBar_mm+' mm' : D.selBar_mm+' mm ('+f2(D.barDia_in,4)+' in)'}\n <\/div>\n <div class=\"doc-calc\">\n <div class=\"formula-box\">\n d = t \u2212 cover \u2212 \u03d5\/2<br>\n d = ${vL(D.t_in)} \u2212 ${vL(D.cover_in)} \u2212 ${vL(D.barDia_in\/2)}<br>\n d = <span class=\"fv\">${vL(D.d_in)}<\/span>\n <\/div>\n <div class=\"calc-note\">Note: \u03d5\/2 is half bar diameter; bottom bar centroid assumed at d from compression face.<\/div>\n <\/div>\n <div class=\"doc-result info\">Effective depth d = ${vL(D.d_in)}<\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500\u2500 STEP 4 \u2500\u2500\u2500 -->\n <div class=\"doc-section\">\n <div class=\"doc-sec-title cyan\">4. PUNCHING (TWO-WAY) SHEAR CHECK<\/div>\n <div class=\"doc-content\">\n <div class=\"doc-given\">\n Critical section is located at d\/2 from face of column on all four sides.\n <\/div>\n <div class=\"doc-calc\">\n <div class=\"calc-line-wide\"><strong>4.1 Critical Perimeter Side Length:<\/strong><\/div>\n <div class=\"formula-box\">\n c = col + d = ${vL(D.colLen_in)} + ${vL(D.d_in)} = <span class=\"fv\">${vL(D.c_side_in)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>4.2 Critical Perimeter b\u2080:<\/strong><\/div>\n <div class=\"formula-box\">\n b\u2080 = 4 \u00d7 c = 4 \u00d7 ${vL(D.c_side_in)} = <span class=\"fv\">${vL(D.b0_in)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>4.3 Area within Critical Perimeter:<\/strong><\/div>\n <div class=\"formula-box\">\n A<sub>crit<\/sub> = c\u00b2 = (${vL(D.c_side_in)})\u00b2 = <span class=\"fv\">${vA2(D.punch_area)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>4.4 Factored Punching Shear Force Vp:<\/strong><\/div>\n <div class=\"formula-box\">\n V<sub>p<\/sub> = q<sub>u<\/sub> \u00d7 (A<sub>ftg<\/sub> \u2212 A<sub>crit<\/sub>)<br>\n     = ${vP(D.qu_net)} \u00d7 (${vA2(D.prov_area)} \u2212 ${vA2(D.punch_area)})<br>\n     = <span class=\"fv\">${vF(D.Vp)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>4.5 Allowable Punching Shear Capacity Va:<\/strong><\/div>\n <div class=\"formula-box\">\n V<sub>c<\/sub> = \u03c6 \u00d7 4 \u00d7 \u03bb \u00d7 \u221af'c \u00d7 b\u2080 \u00d7 d   [${isSI ? 'SI: \u03c6 \u00d7 (1\/3) \u00d7 \u03bb \u00d7 \u221af\\'c[MPa] \u00d7 b\u2080 \u00d7 d' : 'Imperial: kip'}]<br>\n ${isSI\n ? `V<sub>c<\/sub> = ${D.phi_v} \u00d7 (1\/3) \u00d7 1.0 \u00d7 \u221a${f2(D.fc*0.006895,1)} \u00d7 ${f2(D.b0_in*25.4,0)} \u00d7 ${f2(D.d_in*25.4,0)}<br>\n     = <span class=\"fv\">${vF(D.Va_punch)}<\/span>`\n : `V<sub>c<\/sub> = ${D.phi_v} \u00d7 4 \u00d7 1.0 \u00d7 \u221a${Math.round(D.fc)} \u00d7 ${f2(D.b0_in,1)} \u00d7 ${f2(D.d_in,2)} \/ 1000<br>\n     = ${D.phi_v} \u00d7 4 \u00d7 ${f2(Math.sqrt(D.fc),2)} \u00d7 ${f2(D.b0_in,1)} \u00d7 ${f2(D.d_in,2)} \/ 1000<br>\n     = <span class=\"fv\">${vF(D.Va_punch)}<\/span>`\n }\n <\/div>\n <\/div>\n <div class=\"check-row\">\n <span class=\"fv\" style=\"font-family:'IBM Plex Mono',monospace;font-size:12px;\">V<sub>p<\/sub> = ${vF(D.Vp)}<\/span>\n <span style=\"font-family:'IBM Plex Mono',monospace;font-size:14px;color:${D.Vp < D.Va_punch ? 'var(--green)' : 'var(--red)'}\">${D.Vp < D.Va_punch ? '<' : '>'}<\/span>\n <span class=\"fv\" style=\"font-family:'IBM Plex Mono',monospace;font-size:12px;\">V<sub>a<\/sub> = ${vF(D.Va_punch)}<\/span>\n <\/div>\n <div class=\"doc-result ${D.Vp < D.Va_punch ? 'ok' : 'fail'}\" style=\"margin-top:8px;\">\n ${D.Vp < D.Va_punch ? '\u2713 PUNCHING SHEAR OK' : '\u2717 PUNCHING SHEAR FAILS \u2014 Increase footing thickness'}  \u00b7 \n D\/C Ratio = ${f2(D.Vp\/D.Va_punch*100, 1)}%\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500\u2500 STEP 5 \u2500\u2500\u2500 -->\n <div class=\"doc-section\">\n <div class=\"doc-sec-title cyan\">5. BEAM (ONE-WAY) SHEAR CHECK<\/div>\n <div class=\"doc-content\">\n <div class=\"doc-given\">\n Critical section is located at distance d from face of column.\n <\/div>\n <div class=\"doc-calc\">\n <div class=\"calc-line-wide\"><strong>5.1 Beam Strip Length (from footing edge to critical section):<\/strong><\/div>\n <div class=\"formula-box\">\n L<sub>strip<\/sub> = (B\/2) \u2212 (col\/2) \u2212 d<br>\n          = ${vFt(D.B\/2)} \u2212 ${vL(D.colWid_in\/2)} \u2212 ${vL(D.d_in)}<br>\n          = ${vFt(D.bsl_ft)}\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>5.2 Factored Beam Shear (per unit width):<\/strong><\/div>\n <div class=\"formula-box\">\n V<sub>b<\/sub> = q<sub>u<\/sub> \u00d7 L<sub>strip<\/sub> \u00d7 1<br>\n     = ${vP(D.qu_net)} \u00d7 ${vFt(D.bsl_ft)} \u00d7 1${uLf}<br>\n     = <span class=\"fv\">${vF(D.Vb)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>5.3 Allowable Beam Shear Capacity:<\/strong><\/div>\n <div class=\"formula-box\">\n V<sub>a<\/sub> = \u03c6 \u00d7 2 \u00d7 \u03bb \u00d7 \u221af'c \u00d7 b<sub>w<\/sub> \u00d7 d<br>\n ${isSI\n ? `V<sub>a<\/sub> = ${D.phi_v} \u00d7 (1\/6) \u00d7 1.0 \u00d7 \u221a${f2(D.fc*0.006895,2)} \u00d7 ${f2(D.d_in*25.4,0)} \/ 1000<br>\n     = <span class=\"fv\">${vF(D.Va_beam)}<\/span> per m width`\n : `V<sub>a<\/sub> = ${D.phi_v} \u00d7 2 \u00d7 1.0 \u00d7 \u221a${Math.round(D.fc)} \u00d7 12 \u00d7 ${f2(D.d_in,2)} \/ 1000<br>\n     = ${D.phi_v} \u00d7 2 \u00d7 ${f2(Math.sqrt(D.fc),2)} \u00d7 12 \u00d7 ${f2(D.d_in,2)} \/ 1000<br>\n     = <span class=\"fv\">${vF(D.Va_beam)}<\/span> per ft width`\n }\n <\/div>\n <\/div>\n <div class=\"check-row\">\n <span style=\"font-family:'IBM Plex Mono',monospace;font-size:12px;\">V<sub>b<\/sub> = ${vF(D.Vb)}<\/span>\n <span style=\"font-family:'IBM Plex Mono',monospace;font-size:14px;color:${D.Vb < D.Va_beam ? 'var(--green)' : 'var(--red)'}\">${D.Vb < D.Va_beam ? '<' : '>'}<\/span>\n <span style=\"font-family:'IBM Plex Mono',monospace;font-size:12px;\">V<sub>a<\/sub> = ${vF(D.Va_beam)}<\/span>\n <\/div>\n <div class=\"doc-result ${D.Vb < D.Va_beam ? 'ok' : 'fail'}\" style=\"margin-top:8px;\">\n ${D.Vb < D.Va_beam ? '\u2713 BEAM SHEAR OK' : '\u2717 BEAM SHEAR FAILS \u2014 Increase footing thickness'}  \u00b7 \n D\/C Ratio = ${f2(D.Vb\/D.Va_beam*100, 1)}%\n <\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500\u2500 STEP 6 \u2500\u2500\u2500 -->\n <div class=\"doc-section\">\n <div class=\"doc-sec-title gold\">6. FLEXURAL STEEL DESIGN<\/div>\n <div class=\"doc-content\">\n <div class=\"doc-given\">\n Critical section for bending is at face of column (ACI 318-19 \u00a713.2.7.1)\n <\/div>\n <div class=\"doc-calc\">\n <div class=\"calc-line-wide\"><strong>6.1 Bending Moment Arm (from column face to footing edge):<\/strong><\/div>\n <div class=\"formula-box\">\n arm = B\/2 \u2212 col\/2<br>\n      = ${vFt(D.B\/2)} \u2212 ${isSI ? f2(D.colLen_in*25.4\/2\/1000,4)+' m' : f2(D.colLen_in\/2\/12,4)+' ft'}<br>\n      = <span class=\"fv\">${vFt(D.arm_ft)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>6.2 Factored Design Moment (per unit width, at column face):<\/strong><\/div>\n <div class=\"formula-box\">\n M<sub>u<\/sub> = q<sub>u<\/sub> \u00d7 arm\u00b2 \/ 2<br>\n     = ${vP(D.qu_net)} \u00d7 (${vFt(D.arm_ft)})\u00b2 \/ 2<br>\n     = <span class=\"fv\">${vMo(D.Ml)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>6.3 Nominal Resistance Factor Rn:<\/strong><\/div>\n <div class=\"formula-box\">\n R<sub>n<\/sub> = M<sub>u<\/sub> \/ (\u03c6 \u00d7 b \u00d7 d\u00b2)<br>\n ${isSI\n ? `R<sub>n<\/sub> = ${f2(D.Ml*1355.82,0)} N\u00b7mm\/mm \/ (${D.phi_f} \u00d7 1000 \u00d7 ${f2(D.d_in*25.4,1)}\u00b2)<br>\n     = <span class=\"fv\">${vSt(D.Rn)}<\/span>`\n : `R<sub>n<\/sub> = ${f2(D.Ml,3)}\u00d712,000 \/ (${D.phi_f} \u00d7 12 \u00d7 ${f2(D.d_in,2)}\u00b2)<br>\n     = <span class=\"fv\">${vSt(D.Rn)}<\/span>`\n }\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>6.4 Required Steel Ratio \u03c1:<\/strong><\/div>\n <div class=\"formula-box\">\n \u03c1 = (0.85 \u00d7 f'c \/ f<sub>y<\/sub>) \u00d7 [1 \u2212 \u221a(1 \u2212 2R<sub>n<\/sub> \/ (0.85 \u00d7 f'c))]<br>\n  = (0.85 \u00d7 ${vSt(D.fc)} \/ ${vSt(D.fy)}) \u00d7 [1 \u2212 \u221a(1 \u2212 2\u00d7${vSt(D.Rn)} \/ (0.85\u00d7${vSt(D.fc)}))]<br>\n  = <span class=\"fv\">${D.rho.toExponential(4)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>6.5 Computed Steel Area:<\/strong><\/div>\n <div class=\"formula-box\">\n A<sub>s,comp<\/sub> = \u03c1 \u00d7 b \u00d7 d = ${D.rho.toExponential(4)} \u00d7 ${isSI ? '1000 mm' : '12 in'} \u00d7 ${vL(D.d_in)}<br>\n            = <span class=\"fv\">${vAs(D.As_comp)}<\/span>\n <\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:10px;\"><strong>6.6 Minimum Steel Area [ACI 318-19 \u00a79.6.1.2]:<\/strong><\/div>\n <div class=\"formula-box\">\n ${isSI\n ? `A<sub>s,min<\/sub> = (1.4 \/ f<sub>y<\/sub>[MPa]) \u00d7 b \u00d7 d<br>\n           = (1.4 \/ ${f2(D.fy*0.006895,2)}) \u00d7 1000 \u00d7 ${vL(D.d_in)}<br>\n           = <span class=\"fv\">${vAs(D.As_min)}<\/span>`\n : `A<sub>s,min<\/sub> = (200 \/ f<sub>y<\/sub>[psi]) \u00d7 b \u00d7 d<br>\n           = (200 \/ ${Math.round(D.fy)}) \u00d7 12 \u00d7 ${vL(D.d_in)}<br>\n           = <span class=\"fv\">${vAs(D.As_min)}<\/span>`\n }\n <\/div>\n\n <div class=\"divider-line\"><\/div>\n <div class=\"calc-line-wide\"><strong>6.7 Maximum Steel Ratio [ACI 318-19 \u00a713.3.2, \u03b5t \u2265 0.004]:<\/strong><\/div>\n <div class=\"formula-box\">\n \u03b2<sub>1<\/sub> = ${f2(D.beta1, 4)}  ${isSI ? '[0.85 \u2212 0.05\u00d7(f\\'c[MPa]\u221228)\/7, min 0.65]' : '[0.85 \u2212 0.05\u00d7(f\\'c[psi]\u22124000)\/1000, min 0.65]'}<br><br>\n \u03c1<sub>max<\/sub> = 0.85 \u00d7 (f'c \/ f<sub>y<\/sub>) \u00d7 \u03b2<sub>1<\/sub> \u00d7 (3\/7)<br>\n          [c\/d = \u03b5<sub>cu<\/sub>\/(\u03b5<sub>cu<\/sub>+\u03b5<sub>t,min<\/sub>) = 0.003\/(0.003+0.004) = 3\/7]<br>\n          = 0.85 \u00d7 (${vSt(D.fc)} \/ ${vSt(D.fy)}) \u00d7 ${f2(D.beta1,4)} \u00d7 (3\/7)<br>\n          = <span class=\"fv\">${D.rho_max.toExponential(4)}<\/span><br><br>\n A<sub>s,max<\/sub> = \u03c1<sub>max<\/sub> \u00d7 b \u00d7 d = ${D.rho_max.toExponential(4)} \u00d7 ${isSI ? '1000 mm' : '12 in'} \u00d7 ${vL(D.d_in)}<br>\n            = <span class=\"fv\">${vAs(D.As_max)}<\/span>\n <\/div>\n <div class=\"check-row\">\n <span style=\"font-family:'IBM Plex Mono',monospace;font-size:12px;\">\u03c1 = ${D.rho.toExponential(4)}<\/span>\n <span style=\"font-family:'IBM Plex Mono',monospace;font-size:14px;color:${D.rho_ok ? 'var(--green)' : 'var(--red)'}\">${D.rho_ok ? '<' : '>'}<\/span>\n <span style=\"font-family:'IBM Plex Mono',monospace;font-size:12px;\">\u03c1<sub>max<\/sub> = ${D.rho_max.toExponential(4)}<\/span>\n <\/div>\n <div class=\"doc-result ${D.rho_ok ? 'ok' : 'fail'}\" style=\"margin-top:8px;\">\n ${D.rho_ok ? '\u2713 \u03c1 \u2264 \u03c1_max \u2014 Section is tension-controlled (\u03b5t \u2265 0.004 satisfied)' : '\u2717 \u03c1 > \u03c1_max \u2014 EXCEEDS \u00a713.3.2 LIMIT \u2014 Increase d or reduce As'}\n <\/div>\n\n <div class=\"divider-line\"><\/div>\n <div class=\"calc-line-wide\"><strong>6.8 Temperature & Shrinkage Steel [ACI 318-19 \u00a724.4.3.2]:<\/strong><\/div>\n <div class=\"formula-box\">\n ${isSI\n ? `\u03c1<sub>ts<\/sub> = ${D.fy*0.006895 <= 420 ? '0.0018' : 'max(0.0014, 0.0018\u00d7420\/f<sub>y<\/sub>)'}  [f<sub>y<\/sub> ${D.fy*0.006895 <= 420 ? '\u2264' : '>'} 420 MPa]<br>\n \u03c1<sub>ts<\/sub> = <span class=\"fv\">${D.rho_ts.toFixed(4)}<\/span><br><br>\n A<sub>s,T&S<\/sub> = \u03c1<sub>ts<\/sub> \u00d7 b \u00d7 h = ${D.rho_ts.toFixed(4)} \u00d7 1000 mm \u00d7 ${f2(D.t_in*25.4,0)} mm<br>\n           = <span class=\"fv\">${vAs(D.As_ts)}<\/span>`\n : `\u03c1<sub>ts<\/sub> = ${D.fy <= 60000 ? '0.0018' : 'max(0.0014, 0.0018\u00d760000\/f<sub>y<\/sub>)'}  [f<sub>y<\/sub> ${D.fy <= 60000 ? '\u2264' : '>'} 60,000 psi]<br>\n \u03c1<sub>ts<\/sub> = <span class=\"fv\">${D.rho_ts.toFixed(4)}<\/span><br><br>\n A<sub>s,T&S<\/sub> = \u03c1<sub>ts<\/sub> \u00d7 b \u00d7 h = ${D.rho_ts.toFixed(4)} \u00d7 12 in \u00d7 ${vL(D.t_in)}<br>\n           = <span class=\"fv\">${vAs(D.As_ts)}<\/span>`\n }\n <\/div>\n <div class=\"doc-result info\" style=\"margin-top:6px;\">A<sub>s,T&S<\/sub> = ${vAs(D.As_ts)}  (Temperature & Shrinkage minimum)<\/div>\n\n <div class=\"divider-line\"><\/div>\n <div class=\"calc-line-wide\"><strong>6.9 Governing Steel Area \u2014 ${D.overrideMode === 'option2' ? 'Option 2 [\u00a79.6.1.3 Exception]' : D.overrideMode === 'As_comp' ? 'Manual (As,comp)' : D.overrideMode === 'As_min' ? 'Manual (As,min)' : 'Option 1 [As,max]'}:<\/strong><\/div>\n <div class=\"formula-box\">\n ${D.overrideMode === 'option2' ? `\n <strong>Option 2:<\/strong> A<sub>s,req<\/sub> = Max [ Min(${D.factorCoeff.toFixed(2)} \u00d7 A<sub>s,comp<\/sub>, A<sub>s,min<\/sub>), A<sub>s,T&S<\/sub> ]<br><br>\n Step 1: ${D.factorCoeff.toFixed(2)} \u00d7 A<sub>s,comp<\/sub> = ${D.factorCoeff.toFixed(2)} \u00d7 ${vAs(D.As_comp)} = <span class=\"fv\">${vAs(D.As_133)}<\/span><br>\n Step 2: Min(${vAs(D.As_133)}, ${vAs(D.As_min)}) = <span class=\"fv\">${vAs(Math.min(D.As_133, D.As_min))}<\/span><br>\n Step 3: Max(${vAs(Math.min(D.As_133, D.As_min))}, ${vAs(D.As_ts)}) = <span class=\"fv\">${vAs(D.As_req)}<\/span>  [${D.controls}]\n ` : D.overrideMode === 'As_comp' ? `\n A<sub>s,req<\/sub> = A<sub>s,comp<\/sub> = <span class=\"fv\">${vAs(D.As_req)}<\/span>  [${D.controls}]\n ` : D.overrideMode === 'As_min' ? `\n A<sub>s,req<\/sub> = A<sub>s,min<\/sub> = <span class=\"fv\">${vAs(D.As_req)}<\/span>  [${D.controls}]\n ` : `\n <strong>Option 1:<\/strong> A<sub>s,req<\/sub> = Max (A<sub>s,comp<\/sub>, A<sub>s,min<\/sub>, A<sub>s,T&S<\/sub>)<br>\n         = Max (${vAs(D.As_comp)}, ${vAs(D.As_min)}, ${vAs(D.As_ts)})<br>\n         = <span class=\"fv\">${vAs(D.As_req)}<\/span>  [${D.controls}]\n `}\n <\/div>\n <\/div>\n <div class=\"doc-result gold\">A<sub>s,req<\/sub> = ${vAs(D.As_req)}  \u00b7  ${D.controls}<\/div>\n <\/div>\n <\/div>\n\n <!-- \u2500\u2500\u2500 STEP 7 \u2500\u2500\u2500 -->\n <div class=\"doc-section\">\n <div class=\"doc-sec-title green\">7. REBAR SPACING CALCULATION<\/div>\n <div class=\"doc-content\">\n <div class=\"doc-given\">\n Selected Bar: \u03d5${D.selBar_mm}mm  \u00b7  Bar Area = ${D.selRow.area_mm2.toFixed(0)} mm\u00b2${isSI ? '' : ' = '+f2(D.selRow.area_mm2\/645.16,4)+' in\u00b2'}<br>\n As,req = ${vAs(D.As_req)}\n <\/div>\n <div class=\"doc-calc\">\n <div class=\"calc-line-wide\"><strong>7.1 Required Spacing:<\/strong><\/div>\n <div class=\"formula-box\">\n spacing = bar area \/ (A<sub>s,req<\/sub> per unit width)<br><br>\n ${isSI ? `\n A<sub>s,req<\/sub> per mm width = ${f2(D.As_req*645.16\/0.3048,1)} mm\u00b2\/m \u00f7 1000 mm\/m<br>\n                          = ${f2(D.As_req*645.16\/0.3048\/1000,4)} mm\u00b2\/mm<br><br>\n spacing = ${D.selRow.area_mm2.toFixed(0)} mm\u00b2 \u00f7 ${f2(D.As_req*645.16\/0.3048\/1000,4)} mm\u00b2\/mm<br>\n          = ${D.selRow.area_mm2.toFixed(0)} \u00d7 1000 \/ ${f2(D.As_req*645.16\/0.3048,1)}<br>\n          = <span class=\"fv\">${f2(D.selRow.spacing_raw,0)} mm c\/c<\/span>\n ` : `\n A<sub>s,req<\/sub> per mm width = ${f2(D.As_req_mm2perft,1)} mm\u00b2\/ft \u00f7 304.8 mm\/ft<br>\n                          = ${f2(D.As_req_mm2perft\/304.8,4)} mm\u00b2\/mm<br><br>\n spacing = ${D.selRow.area_mm2.toFixed(0)} mm\u00b2 \u00f7 ${f2(D.As_req_mm2perft\/304.8,4)} mm\u00b2\/mm<br>\n          = ${D.selRow.area_mm2.toFixed(0)} \u00d7 304.8 \/ ${f2(D.As_req_mm2perft,1)}<br>\n          = <span class=\"fv\">${f2(D.selRow.spacing_raw,0)} mm c\/c (= ${f2(D.selRow.spacing_raw\/25.4,2)} in c\/c)<\/span>\n `}\n <\/div>\n <\/div>\n <div class=\"doc-result gold\">Required Spacing s<sub>req<\/sub> = <strong>${f2(D.selRow.spacing_raw, 0)} mm c\/c${isSI ? '' : ' = '+f2(D.selRow.spacing_raw\/25.4,2)+' in c\/c'}<\/strong> for \u03d5${D.selBar_mm}mm bars<\/div>\n\n <div class=\"calc-line-wide\" style=\"margin-top:14px;\"><strong>7.2 Spacing Check \u2014 Provided vs Required:<\/strong><\/div>\n <div class=\"formula-box\">\n Required spacing   s<sub>req<\/sub>  = ${f2(D.selRow.spacing_raw,0)} mm c\/c${isSI ? '' : ' (= '+f2(D.selRow.spacing_raw\/25.4,2)+' in c\/c)'}<br>\n Provided spacing   s<sub>prov<\/sub> = ${D.provSpacingMM || D.selRow.spacing} mm c\/c${isSI ? '' : ' (= '+f2((D.provSpacingMM||D.selRow.spacing)\/25.4,2)+' in c\/c)'}<br><br>\n Check: s<sub>prov<\/sub> \u2264 s<sub>req<\/sub>  \u2192 \n ${(()=>{\n const p = D.provSpacingMM || D.selRow.spacing;\n const r = D.selRow.spacing_raw;\n return p<=r\n ? `<span class=\"fv\" style=\"color:var(--green);\">${f2(p,0)} mm \u2264 ${f2(r,0)} mm  \u2713 OK<\/span>`\n : `<span class=\"fv\" style=\"color:var(--red);\">${f2(p,0)} mm > ${f2(r,0)} mm  \u2717 NOT OK \u2014 Reduce spacing<\/span>`;\n })()}\n <\/div>\n ${(()=>{\n const p = D.provSpacingMM || D.selRow.spacing;\n const r = D.selRow.spacing_raw;\n return p<=r\n ? `<div class=\"doc-result ok\">\u2713 SPACING OK \u2014 Provided ${f2(p,0)} mm \u2264 Required ${f2(r,0)} mm c\/c<\/div>`\n : `<div class=\"doc-result fail\">\u2717 SPACING NOT OK \u2014 Provided ${f2(p,0)} mm > Required ${f2(r,0)} mm c\/c \u2014 Use tighter spacing or larger bar<\/div>`;\n })()}\n <\/div>\n <\/div>\n\n <\/div><!-- \/doc-page -->\n `;\n\n $('calcDoc').innerHTML = html;\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 PROVIDED SPACING CHECK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nfunction checkProvSpacing() {\n const isSI = document.getElementById('u_si').checked;\n const badge = $('spacingCheckBadge');\n const report = $('spacingReport');\n const reqEl = $('spacingDisplay');\n const reqMM = parseFloat(reqEl.dataset.reqMM);\n const provRaw = parseFloat($('provSpacing').value);\n \/\/ Convert provided spacing to mm for comparison\n const provMM = isSI ? provRaw : provRaw * 25.4;\n if (!reqMM || isNaN(provRaw)) {\n badge.style.display = 'none';\n report.style.display = 'none';\n return;\n }\n report.style.display = 'block';\n const unit = isSI ? 'mm' : 'in';\n const reqDisp = isSI ? reqMM.toFixed(0) + ' mm c\/c' : (reqMM\/25.4).toFixed(2) + ' in c\/c';\n const provDisp = isSI ? provRaw + ' mm c\/c' : provRaw + ' in c\/c';\n $('srReq').textContent = reqDisp;\n $('srProv').textContent = provDisp;\n badge.style.display = 'block';\n if (provMM <= reqMM) {\n badge.className = 'spacing-check ok';\n badge.textContent = `\u2713 OK \u2014 Prov. ${provDisp} \u2264 Req. ${reqDisp}`;\n $('srProv').style.color = 'var(--green)';\n } else {\n badge.className = 'spacing-check fail';\n badge.textContent = `\u2717 NOT OK \u2014 Prov. ${provDisp} > Req. ${reqDisp}`;\n $('srProv').style.color = 'var(--red)';\n }\n}\n\n\/* \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 SUMMARY TOGGLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 *\/\nconst summaryState = { footingSize: true, shearDesign: true, flexuralDesign: true, mainOpen: true };\n\nfunction toggleSummarySection(which) {\n if (which === 'all') {\n summaryState.mainOpen = !summaryState.mainOpen;\n $('summaryContent').style.display = summaryState.mainOpen ? 'block' : 'none';\n $('summaryToggleHint').textContent = summaryState.mainOpen ? '\u25be click to collapse' : '\u25b8 click to expand';\n return;\n }\n summaryState[which] = !summaryState[which];\n $('sec_' + which).style.display = summaryState[which] ? 'block' : 'none';\n const btn = $('btn_' + which);\n if (btn) {\n const label = which === 'footingSize' ? 'Footing Size' : which === 'shearDesign' ? 'Shear Design' : 'Flexural Design';\n btn.textContent = label + (summaryState[which] ? ' \u25be' : ' \u25b8');\n }\n}\n\nfunction buildDesignSummary(D) {\n const isSI = D.isSI;\n const f = D.dispF;\n const f2 = (v,d=2)=>isNaN(v)?'\u2014':v.toFixed(d);\n const vF = v=>f.force(v); const vP = v=>f.pres(v);\n const vFt = v=>f.ft(v); const vL = v=>f.len(v);\n const vA2 = v=>f.ft2(v); const vSt = v=>f.stress(v);\n const vAs = v=>f.steel(v);\n\n \/\/ Footing Size section\n $('sec_footingSize').innerHTML = `\n <div style=\"border:1px solid var(--border);border-radius:4px;margin-bottom:8px;overflow:hidden;\">\n <div style=\"background:var(--accent-dim);padding:6px 12px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--accent);border-left:3px solid var(--accent);\">FOOTING SIZE<\/div>\n <div style=\"padding:8px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-2);line-height:1.8;\">\n B \u00d7 L \u00d7 t = <strong style=\"color:var(--text);\">${vFt(D.B)} \u00d7 ${vFt(D.L)} \u00d7 ${vL(D.t_in)}<\/strong><br>\n Net Pressure = ${vP(D.qu_net)}  \u00b7  Area Req = ${vA2(D.req_area)}  \u00b7  Area Prov = ${vA2(D.prov_area)}\n <span style=\"margin-left:8px;color:${D.prov_area>=D.req_area?'var(--green)':'var(--red)'};font-weight:600;\">${D.prov_area>=D.req_area?'\u2713 OK':'\u2717 REVISE'}<\/span>\n <\/div>\n <\/div>`;\n\n \/\/ Shear Design section\n $('sec_shearDesign').innerHTML = `\n <div style=\"border:1px solid var(--border);border-radius:4px;margin-bottom:8px;overflow:hidden;\">\n <div style=\"background:var(--cyan-dim);padding:6px 12px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--cyan);border-left:3px solid var(--cyan);\">SHEAR DESIGN<\/div>\n <div style=\"padding:8px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-2);line-height:1.8;\">\n Punching: Vp = ${vF(D.Vp)}  \u00b7  \u03d5Vn = ${vF(D.Va_punch)} \n <span style=\"margin-left:8px;color:${D.Vp<D.Va_punch?'var(--green)':'var(--red)'};font-weight:600;\">${D.Vp<D.Va_punch?'\u2713 PASS':'\u2717 FAIL'}<\/span><br>\n Beam Shear: Vb = ${vF(D.Vb)}  \u00b7  \u03d5Vn = ${vF(D.Va_beam)}\n <span style=\"margin-left:8px;color:${D.Vb<D.Va_beam?'var(--green)':'var(--red)'};font-weight:600;\">${D.Vb<D.Va_beam?'\u2713 PASS':'\u2717 FAIL'}<\/span>\n <\/div>\n <\/div>`;\n\n \/\/ Flexural Design section\n $('sec_flexuralDesign').innerHTML = `\n <div style=\"border:1px solid var(--border);border-radius:4px;margin-bottom:8px;overflow:hidden;\">\n <div style=\"background:var(--gold-dim);padding:6px 12px;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;color:var(--gold);border-left:3px solid var(--gold);\">FLEXURAL DESIGN<\/div>\n <div style=\"padding:8px 12px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--text-2);line-height:1.8;\">\n As,comp = ${vAs(D.As_comp)} \u00b7 As,min = ${vAs(D.As_min)} \u00b7 As,T&S = ${vAs(D.As_ts)}<br>\n As,req = ${vAs(D.As_req)} (${D.controls})<br>\n Steel: \u03d5${D.selBar_mm}mm @ ${D.selRow.spacing}mm c\/c \u00b7 ${D.selRow.nBars} bars each way<br>\n \u03c1 = ${D.rho.toExponential(3)}  \u00b7  \u03c1_max = ${D.rho_max.toExponential(3)}\n <span style=\"margin-left:8px;color:${D.rho_ok?'var(--green)':'var(--red)'};font-weight:600;\">${D.rho_ok?'\u2713 PASS':'\u2717 FAIL'}<\/span>\n <\/div>\n <\/div>`;\n\n \/\/ Summary table\n const prov = D.provSpacingMM || D.selRow.spacing;\n const req = D.selRow.spacing_raw;\n $('sec_summaryTable').innerHTML = `\n <table style=\"width:100%;border-collapse:collapse;font-family:'IBM Plex Mono',monospace;font-size:11px;\">\n <thead><tr style=\"background:var(--surface2);\">\n <th style=\"padding:6px 10px;text-align:left;border:1px solid var(--border);font-size:9px;letter-spacing:0.5px;\">CHECK ITEM<\/th>\n <th style=\"padding:6px 10px;text-align:left;border:1px solid var(--border);font-size:9px;letter-spacing:0.5px;\">DEMAND<\/th>\n <th style=\"padding:6px 10px;text-align:left;border:1px solid var(--border);font-size:9px;letter-spacing:0.5px;\">CAPACITY<\/th>\n <th style=\"padding:6px 10px;text-align:center;border:1px solid var(--border);font-size:9px;letter-spacing:0.5px;\">D\/C%<\/th>\n <th style=\"padding:6px 10px;text-align:center;border:1px solid var(--border);font-size:9px;letter-spacing:0.5px;\">STATUS<\/th>\n <\/tr><\/thead>\n <tbody>\n <tr>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">Punching Shear<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">${vF(D.Vp)}<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">${vF(D.Va_punch)}<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;\">${f2(D.Vp\/D.Va_punch*100,1)}%<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;color:${D.Vp<D.Va_punch?'var(--green)':'var(--red)'};font-weight:600;\">${D.Vp<D.Va_punch?'\u2713 PASS':'\u2717 FAIL'}<\/td>\n <\/tr>\n <tr style=\"background:var(--surface2);\">\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">Beam Shear<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">${vF(D.Vb)}<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">${vF(D.Va_beam)}<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;\">${f2(D.Vb\/D.Va_beam*100,1)}%<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;color:${D.Vb<D.Va_beam?'var(--green)':'var(--red)'};font-weight:600;\">${D.Vb<D.Va_beam?'\u2713 PASS':'\u2717 FAIL'}<\/td>\n <\/tr>\n <tr>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">Flexure (As)<br><span style=\"font-size:9px;color:var(--text-3);\">Req. s: ${f2(D.selRow.spacing_raw,0)} mm<\/span><\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">${vAs(D.As_req)}<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">\u03d5${D.selBar_mm}@${D.selRow.spacing}mm<br><span style=\"font-size:9px;color:var(--text-3);\">Prov. s: ${prov} mm<\/span><\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;\">\u2014<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;color:${prov<=req?'var(--green)':'var(--red)'};font-weight:600;\">${prov<=req?'\u2713 OK':'\u2717 FAIL'}<\/td>\n <\/tr>\n <tr style=\"background:var(--surface2);\">\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">\u03c1 \u2264 \u03c1_max \u00a713.3.2<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">\u03c1 = ${D.rho.toExponential(3)}<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">\u03c1_max = ${D.rho_max.toExponential(3)}<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;\">${f2(D.rho\/D.rho_max*100,1)}%<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;color:${D.rho_ok?'var(--green)':'var(--red)'};font-weight:600;\">${D.rho_ok?'\u2713 PASS':'\u2717 FAIL'}<\/td>\n <\/tr>\n <tr>\n <td style=\"padding:5px 10px;border:1px solid var(--border);font-weight:600;\">Spacing Check<br><span style=\"font-size:9px;color:var(--text-3);font-weight:400;\">Prov. \u2264 Req. ?<\/span><\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">\n Req. = ${f2(D.selRow.spacing_raw,0)} mm c\/c<br>\n <span style=\"font-size:9px;color:var(--text-3);\">${isSI ? '' : '= '+f2(D.selRow.spacing_raw\/25.4,2)+' in c\/c'}<\/span>\n <\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);\">\n Prov. = ${D.provSpacingMM || D.selRow.spacing} mm c\/c<br>\n <span style=\"font-size:9px;color:var(--text-3);\">${isSI ? '' : '= '+f2((D.provSpacingMM||D.selRow.spacing)\/25.4,2)+' in c\/c'}<\/span>\n <\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;\">\u2014<\/td>\n <td style=\"padding:5px 10px;border:1px solid var(--border);text-align:center;font-weight:700;font-size:13px;color:${prov<=req?'var(--green)':'var(--red)'};\">\n ${prov<=req?'\u2713 OK':'\u2717 NOT OK'}\n <\/td>\n <\/tr>\n <\/tbody>\n <\/table>`;\n\n $('sec_summaryFooter').innerHTML = `\n <div style=\"background:var(--accent-dim);border:1px solid #b8cef5;border-radius:4px;padding:10px 14px;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--accent);line-height:1.9;\">\n FOOTING: B \u00d7 L \u00d7 t = ${vFt(D.B)} \u00d7 ${vFt(D.L)} \u00d7 ${vL(D.t_in)}<br>\n STEEL: \u03d5${D.selBar_mm}mm @ ${D.selRow.spacing}mm c\/c BOTH WAYS (${D.selRow.nBars} bars each)<br>\n f'c = ${vSt(D.fc)}  \u00b7  fy = ${vSt(D.fy)}  \u00b7  cover = ${vL(D.cover_in)}  \u00b7  d = ${vL(D.d_in)}\n <\/div>`;\n}\n\n\nwindow.addEventListener('DOMContentLoaded', () => {\n $('factorCoeff').addEventListener('change', runDesign);\n $('governOverride').addEventListener('change', runDesign);\n runDesign();\n});\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1870\" class=\"elementor-element elementor-element-07afcb8 e-con-full e-flex e-con e-child\" data-id=\"07afcb8\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1871\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"2\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1871\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Flexural strengthening of an interior reinforced concrete beam with FRP <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-calculator\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M400 0H48C22.4 0 0 22.4 0 48v416c0 25.6 22.4 48 48 48h352c25.6 0 48-22.4 48-48V48c0-25.6-22.4-48-48-48zM128 435.2c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm0-128c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm128 128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm0-128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm128 128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8V268.8c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v166.4zm0-256c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8V76.8C64 70.4 70.4 64 76.8 64h294.4c6.4 0 12.8 6.4 12.8 12.8v102.4z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1871\" class=\"elementor-element elementor-element-e01ab3d e-con-full e-flex e-con e-child\" data-id=\"e01ab3d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1871\" class=\"elementor-element elementor-element-6883086 e-flex e-con-boxed e-con e-child\" data-id=\"6883086\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c8e83cb elementor-widget elementor-widget-html\" data-id=\"c8e83cb\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n<title>CFRP Beam Retrofitting Calculator | ACI 440.2R-17<\/title>\n<script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/mathjax\/3.2.2\/es5\/tex-mml-chtml.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/html2pdf.js\/0.10.1\/html2pdf.bundle.min.js\"><\/script>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap\" rel=\"stylesheet\">\n<style>\n :root {\n --primary: #0f4c81;\n --primary-light: #1565c0;\n --accent: #e65100;\n --accent-light: #ff6d00;\n --success: #2e7d32;\n --warning: #f57f17;\n --danger: #c62828;\n --bg: #f5f6fa;\n --panel: #ffffff;\n --border: #dde1e7;\n --text: #1a1d23;\n --text-muted: #5a6278;\n --input-bg: #f8f9ff;\n }\n * { box-sizing: border-box; }\n body { font-family: 'IBM Plex Sans', sans-serif; background: var(--bg); color: var(--text); margin: 0; }\n .mono { font-family: 'IBM Plex Mono', monospace; }\n .header-bar { background: var(--primary); padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; height: 60px; }\n .header-title { color: white; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.3px; }\n .header-sub { color: rgba(255,255,255,0.65); font-size: 0.75rem; margin-top: 1px; }\n .unit-toggle-wrap { display: flex; align-items: center; gap: 10px; }\n .unit-label { color: rgba(255,255,255,0.8); font-size: 0.8rem; font-weight: 500; }\n .toggle-track { width: 52px; height: 26px; background: rgba(255,255,255,0.2); border-radius: 13px; position: relative; cursor: pointer; transition: background 0.3s; border: 1px solid rgba(255,255,255,0.3); }\n .toggle-track.si-active { background: rgba(255,255,255,0.35); }\n .toggle-thumb { width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 3px; transition: transform 0.3s; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }\n .toggle-thumb.si { transform: translateX(26px); }\n .main-wrap { display: grid; grid-template-columns: 420px 1fr; gap: 0; min-height: calc(100vh - 60px); }\n .left-panel { background: var(--panel); border-right: 1px solid var(--border); overflow-y: auto; padding: 1.5rem; }\n .right-panel { background: var(--bg); overflow-y: auto; padding: 1.5rem; }\n .section-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 1rem; overflow: hidden; }\n .section-header { background: #f0f4fa; padding: 0.6rem 1rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }\n .section-num { background: var(--primary); color: white; width: 20px; height: 20px; border-radius: 50%; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n .section-title { font-size: 0.8rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px; }\n .section-body { padding: 0.9rem 1rem; }\n .input-row { display: grid; grid-template-columns: 1fr 80px 56px; gap: 6px; align-items: center; margin-bottom: 0.55rem; }\n .input-row:last-child { margin-bottom: 0; }\n .input-label { font-size: 0.78rem; color: var(--text); line-height: 1.3; }\n .input-label span { font-size: 0.7rem; color: var(--text-muted); display: block; }\n .inp { width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 0.82rem; font-family: 'IBM Plex Mono', monospace; background: var(--input-bg); color: var(--text); transition: border-color 0.2s; text-align: right; }\n .inp:focus { outline: none; border-color: var(--primary); background: #fff; }\n .unit-badge { font-size: 0.68rem; color: var(--text-muted); font-weight: 500; text-align: center; background: #eef1f8; padding: 3px 4px; border-radius: 4px; border: 1px solid var(--border); }\n .results-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1.2rem; }\n .result-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; border-left: 4px solid var(--primary); }\n .result-card.ok { border-left-color: var(--success); }\n .result-card.fail { border-left-color: var(--danger); }\n .result-card.warn { border-left-color: var(--warning); }\n .result-card.accent { border-left-color: var(--accent); }\n .rc-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }\n .rc-value { font-size: 1.3rem; font-weight: 700; font-family: 'IBM Plex Mono', monospace; color: var(--text); }\n .rc-unit { font-size: 0.75rem; color: var(--text-muted); margin-left: 3px; }\n .rc-status { margin-top: 6px; font-size: 0.7rem; font-weight: 600; display: flex; align-items: center; gap: 4px; }\n .rc-status.ok { color: var(--success); }\n .rc-status.fail { color: var(--danger); }\n .rc-status.warn { color: var(--warning); }\n .status-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; }\n .viz-card { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem; margin-bottom: 1.2rem; }\n .viz-title { font-size: 0.8rem; font-weight: 600; color: var(--primary); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1rem; }\n .report-section { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }\n .report-title { font-size: 1rem; font-weight: 700; color: var(--primary); margin-bottom: 1.2rem; display: flex; align-items: center; gap: 8px; padding-bottom: 0.8rem; border-bottom: 2px solid var(--border); }\n .step-block { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.85rem; overflow: hidden; }\n .step-head { background: #f0f4fa; padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); font-size: 0.78rem; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 8px; }\n .step-badge { background: var(--primary); color: white; border-radius: 4px; padding: 1px 7px; font-size: 0.68rem; }\n .step-body { padding: 0.8rem 1rem; }\n .formula-line { background: #f8f9ff; border: 1px solid #e8ecf8; border-radius: 5px; padding: 0.5rem 0.8rem; margin: 0.4rem 0; font-size: 0.82rem; }\n .formula-label { font-size: 0.7rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 2px; }\n .formula-result { font-family: 'IBM Plex Mono', monospace; font-size: 0.9rem; font-weight: 600; color: var(--primary); }\n .icr-box { background: #eef6ff; border: 1px solid #bcd8f8; border-radius: 6px; padding: 0.7rem 1rem; margin: 0.5rem 0; }\n .icr-title { font-size: 0.72rem; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.4rem; }\n .icr-row { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem; font-size: 0.8rem; margin: 0.2rem 0; align-items: baseline; }\n .icr-step { background: #dbeeff; color: var(--primary); border-radius: 3px; padding: 1px 6px; font-size: 0.65rem; font-weight: 700; white-space: nowrap; }\n .check-row { display: flex; align-items: center; gap: 10px; padding: 0.4rem 0.8rem; border-radius: 5px; margin-top: 0.5rem; font-size: 0.8rem; font-weight: 600; }\n .check-row.pass { background: #e8f5e9; color: var(--success); border: 1px solid #a5d6a7; }\n .check-row.fail { background: #ffebee; color: var(--danger); border: 1px solid #ef9a9a; }\n .btn-pdf { background: var(--accent); color: white; border: none; padding: 0.55rem 1.2rem; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: background 0.2s; font-family: 'IBM Plex Sans', sans-serif; }\n .btn-pdf:hover { background: var(--accent-light); }\n .btn-calc { background: var(--primary); color: white; border: none; padding: 0.55rem 1.4rem; border-radius: 6px; font-size: 0.82rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 7px; transition: background 0.2s; font-family: 'IBM Plex Sans', sans-serif; }\n .btn-calc:hover { background: var(--primary-light); }\n .conv-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; padding: 3px 9px; border-radius: 12px; font-weight: 600; }\n .conv-badge.ok { background: #e8f5e9; color: var(--success); }\n .conv-badge.warn { background: #fff8e1; color: var(--warning); }\n @media print {\n .no-print { display: none !important; }\n .left-panel { display: none; }\n .right-panel { width: 100%; padding: 0; }\n .main-wrap { grid-template-columns: 1fr; }\n }\n @media (max-width: 900px) {\n .main-wrap { grid-template-columns: 1fr; }\n .left-panel { border-right: none; border-bottom: 1px solid var(--border); }\n }\n .divider { height: 1px; background: var(--border); margin: 0.7rem 0; }\n .info-pill { display: inline-flex; align-items: center; gap: 5px; background: #e8f0fe; color: var(--primary); font-size: 0.7rem; padding: 3px 9px; border-radius: 12px; font-weight: 500; margin-bottom: 0.8rem; }\n .na-note { font-size: 0.72rem; color: var(--text-muted); margin-top: 4px; }\n .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }\n .calc-note { font-size: 0.72rem; color: var(--text-muted); font-style: italic; margin-top: 0.3rem; }\n .notation-tag { display: inline-block; background: #fff3e0; color: #bf360c; border: 1px solid #ffcc80; border-radius: 3px; font-size: 0.65rem; padding: 1px 5px; font-weight: 600; margin-left: 4px; vertical-align: middle; }\n<\/style>\n<\/head>\n<body>\n\n<!-- HEADER -->\n<div class=\"header-bar no-print\">\n <div>\n <div class=\"header-title\">CFRP Beam Retrofitting Calculator<\/div>\n <div class=\"header-sub\">ACI 440.2R-17 \u00b7 Flexural Strengthening of RC Beams \u00b7 Cross-Checked Against Example 16.3<\/div>\n <\/div>\n <div style=\"display:flex;align-items:center;gap:16px;\">\n <div class=\"unit-toggle-wrap\">\n <span class=\"unit-label\" id=\"unitLabelLeft\">US Customary<\/span>\n <div class=\"toggle-track\" id=\"toggleTrack\" onclick=\"toggleUnit()\">\n <div class=\"toggle-thumb\" id=\"toggleThumb\"><\/div>\n <\/div>\n <span class=\"unit-label\" id=\"unitLabelRight\" style=\"color:rgba(255,255,255,0.4)\">SI<\/span>\n <\/div>\n <button class=\"btn-pdf\" onclick=\"exportPDF()\">\n <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><line x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\/><line x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\/><polyline points=\"10 9 9 9 8 9\"\/><\/svg>\n Download PDF\n <\/button>\n <\/div>\n<\/div>\n\n<div class=\"main-wrap\" id=\"mainWrap\">\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 LEFT PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"left-panel no-print\">\n <div style=\"margin-bottom:1rem;\">\n <div class=\"info-pill\">\n <svg width=\"12\" height=\"12\" fill=\"currentColor\" viewBox=\"0 0 24 24\"><path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z\"\/><\/svg>\n ACI Notation: d<sub>f<\/sub> = FRP soffit depth  |  d<sub>s<\/sub> = steel effective depth\n <\/div>\n <\/div>\n\n <!-- PROJECT INFO -->\n <div class=\"section-card\">\n <div class=\"section-header\">\n <div class=\"section-num\">P<\/div>\n <div class=\"section-title\">Project Information<\/div>\n <\/div>\n <div class=\"section-body\">\n <div style=\"margin-bottom:0.5rem;\">\n <label style=\"font-size:0.75rem;color:var(--text-muted);font-weight:500;\">Location \/ Grid Reference<\/label>\n <input type=\"text\" id=\"projLocation\" value=\"Grid (C-1-E-1)\" style=\"width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:5px;font-size:0.82rem;margin-top:3px;background:var(--input-bg);\" oninput=\"updateReport()\">\n <\/div>\n <div style=\"margin-bottom:0.5rem;\">\n <label style=\"font-size:0.75rem;color:var(--text-muted);font-weight:500;\">Floor Level<\/label>\n <input type=\"text\" id=\"projFloor\" value=\"Level 00\" style=\"width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:5px;font-size:0.82rem;margin-top:3px;background:var(--input-bg);\" oninput=\"updateReport()\">\n <\/div>\n <div>\n <label style=\"font-size:0.75rem;color:var(--text-muted);font-weight:500;\">Steel Description<\/label>\n <input type=\"text\" id=\"projSteel\" value=\"3-20+2-16mm \u03a6\" style=\"width:100%;padding:5px 8px;border:1px solid var(--border);border-radius:5px;font-size:0.82rem;margin-top:3px;background:var(--input-bg);\" oninput=\"updateReport()\">\n <\/div>\n <\/div>\n <\/div>\n\n <!-- BEAM GEOMETRY -->\n <div class=\"section-card\">\n <div class=\"section-header\">\n <div class=\"section-num\">1<\/div>\n <div class=\"section-title\">Beam Geometry<\/div>\n <\/div>\n <div class=\"section-body\">\n <div class=\"input-row\">\n <div class=\"input-label\">Width of beam, <i>b<\/i><\/div>\n <input class=\"inp\" id=\"inp_b\" type=\"number\" value=\"15\" step=\"0.1\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_b\">in<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">FRP Soffit Depth (Total Height), <i>d<sub>f<\/sub><\/i> <span>= overall beam height; FRP bonded to soffit<\/span><\/div>\n <input class=\"inp\" id=\"inp_d\" type=\"number\" value=\"18\" step=\"0.1\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_d\">in<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Steel Effective Depth, <i>d<sub>s<\/sub><\/i> <span>= dist. from top fiber to steel centroid<\/span><\/div>\n <input class=\"inp\" id=\"inp_def\" type=\"number\" value=\"15.5\" step=\"0.1\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_def\">in<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Steel area, <i>A<sub>s<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_As\" type=\"number\" value=\"2.06\" step=\"0.01\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_As\">in\u00b2<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- MATERIAL PROPERTIES -->\n <div class=\"section-card\">\n <div class=\"section-header\">\n <div class=\"section-num\">2<\/div>\n <div class=\"section-title\">Concrete & Steel Properties<\/div>\n <\/div>\n <div class=\"section-body\">\n <div class=\"input-row\">\n <div class=\"input-label\">Concrete strength, <i>f'<sub>c<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_fc\" type=\"number\" value=\"4943\" step=\"1\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_fc\">psi<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Steel yield strength, <i>f<sub>y<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_fy\" type=\"number\" value=\"72500\" step=\"100\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_fy\">psi<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- CFRP PROPERTIES -->\n <div class=\"section-card\">\n <div class=\"section-header\">\n <div class=\"section-num\">3<\/div>\n <div class=\"section-title\">CFRP System Properties<\/div>\n <\/div>\n <div class=\"section-body\">\n <div class=\"input-row\">\n <div class=\"input-label\">Ultimate tensile strength, <i>f*<sub>fu<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_ffu\" type=\"number\" value=\"450\" step=\"1\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_ffu\">ksi<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Elastic modulus, <i>E<sub>f<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_Ef\" type=\"number\" value=\"23931\" step=\"1\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_Ef\">ksi<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Rupture strain, <i>\u03b5*<sub>fu<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_efu\" type=\"number\" value=\"0.018\" step=\"0.001\" oninput=\"calculate()\">\n <div class=\"unit-badge\">in\/in<\/div>\n <\/div>\n <div class=\"divider\"><\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">No. of CFRP layers, <i>n<sub>i<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_ni\" type=\"number\" value=\"1\" step=\"1\" min=\"1\" oninput=\"calculate()\">\n <div class=\"unit-badge\">nos<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Width of CFRP sheet, <i>w<sub>f<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_wf\" type=\"number\" value=\"12\" step=\"0.1\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_wf\">in<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Thickness per ply, <i>t<sub>f<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_tf\" type=\"number\" value=\"0.05511\" step=\"0.001\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_tf\">in<\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- LOADING -->\n <div class=\"section-card\">\n <div class=\"section-header\">\n <div class=\"section-num\">4<\/div>\n <div class=\"section-title\">Applied Loading<\/div>\n <\/div>\n <div class=\"section-body\">\n <div class=\"input-row\">\n <div class=\"input-label\">Dead load moment, <i>M<sub>DL<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_MDL\" type=\"number\" value=\"6.16\" step=\"0.01\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_M\">k-ft<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Live load moment, <i>M<sub>LL<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_MLL\" type=\"number\" value=\"2.42\" step=\"0.01\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_Mb\">k-ft<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Factored design moment, <i>M<sub>u<\/sub><\/i><\/div>\n <input class=\"inp\" id=\"inp_Mu\" type=\"number\" value=\"170\" step=\"1\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_Mu\">k-ft<\/div>\n <\/div>\n <div class=\"input-row\">\n <div class=\"input-label\">Assumed neutral axis depth, <i>c<\/i> <span>(iterate until convergence)<\/span><\/div>\n <input class=\"inp\" id=\"inp_C\" type=\"number\" value=\"4.86\" step=\"0.01\" oninput=\"calculate()\">\n <div class=\"unit-badge\" id=\"u_C\">in<\/div>\n <\/div>\n <div class=\"na-note\" id=\"naConvergence\"><\/div>\n <\/div>\n <\/div>\n\n <div style=\"text-align:center;padding-top:0.3rem;\">\n <button class=\"btn-calc\" onclick=\"calculate()\">\n <svg width=\"14\" height=\"14\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" viewBox=\"0 0 24 24\"><polyline points=\"9 11 12 14 22 4\"\/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"\/><\/svg>\n Calculate\n <\/button>\n <\/div>\n<\/div>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 RIGHT PANEL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"right-panel\" id=\"rightPanel\">\n\n <!-- Result Summary Cards -->\n <div id=\"resultSummary\">\n <div style=\"font-size:0.8rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:0.8rem;display:flex;align-items:center;justify-content:space-between;\">\n <span>Design Summary<\/span>\n <span id=\"overallStatus\" class=\"conv-badge ok\">\u2014<\/span>\n <\/div>\n <div class=\"results-grid\">\n <div class=\"result-card accent\">\n <div class=\"rc-label\">Design Moment, M<sub>u<\/sub><\/div>\n <div class=\"rc-value\" id=\"rc_Mu\">\u2014<span class=\"rc-unit\" id=\"rcu_Mu\">k-ft<\/span><\/div>\n <\/div>\n <div class=\"result-card\" id=\"rcard_existing\">\n <div class=\"rc-label\">Existing Capacity, \u03c6M<sub>n,exist<\/sub><\/div>\n <div class=\"rc-value\" id=\"rc_MnExist\">\u2014<span class=\"rc-unit\" id=\"rcu_MnExist\">k-ft<\/span><\/div>\n <\/div>\n <div class=\"result-card\" id=\"rcard_retrofit\">\n <div class=\"rc-label\">Retrofitted Capacity, \u03c6M<sub>n<\/sub><\/div>\n <div class=\"rc-value\" id=\"rc_MnRetro\">\u2014<span class=\"rc-unit\" id=\"rcu_MnRetro\">k-ft<\/span><\/div>\n <div class=\"rc-status\" id=\"st_capacity\">\u2014<\/div>\n <\/div>\n <div class=\"result-card\" id=\"rcard_service\">\n <div class=\"rc-label\">Service Limit (1.1DL+0.75LL)<\/div>\n <div class=\"rc-value\" id=\"rc_Ms\">\u2014<span class=\"rc-unit\" id=\"rcu_Ms\">k-ft<\/span><\/div>\n <div class=\"rc-status\" id=\"st_service\">\u2014<\/div>\n <\/div>\n <div class=\"result-card\" id=\"rcard_steel\">\n <div class=\"rc-label\">Steel Service Stress, f<sub>s,s<\/sub><\/div>\n <div class=\"rc-value\" id=\"rc_fss\">\u2014<span class=\"rc-unit\" id=\"rcu_fss\">ksi<\/span><\/div>\n <div class=\"rc-status\" id=\"st_steel\">\u2014<\/div>\n <\/div>\n <div class=\"result-card\" id=\"rcard_frp\">\n <div class=\"rc-label\">FRP Creep Stress, f<sub>f,s<\/sub><\/div>\n <div class=\"rc-value\" id=\"rc_ffs\">\u2014<span class=\"rc-unit\" id=\"rcu_ffs\">ksi<\/span><\/div>\n <div class=\"rc-status\" id=\"st_frp\">\u2014<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"rc-label\">CFRP Debond Strain, \u03b5<sub>fd<\/sub><\/div>\n <div class=\"rc-value\" id=\"rc_efd\">\u2014<\/div>\n <div style=\"font-size:0.7rem;color:var(--text-muted);margin-top:3px;\" id=\"rc_efd_note\">in\/in<\/div>\n <\/div>\n <div class=\"result-card\">\n <div class=\"rc-label\">Development Length, L<sub>df<\/sub><\/div>\n <div class=\"rc-value\" id=\"rc_Ldf\">\u2014<span class=\"rc-unit\" id=\"rcu_Ldf\">in<\/span><\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <!-- Beam Cross-Section Visualization -->\n <div class=\"viz-card\">\n <div class=\"viz-title\">\ud83d\udcd0 Beam Cross-Section & Strain Distribution<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:1rem;\">\n <canvas id=\"beamCanvas\" width=\"280\" height=\"240\" style=\"width:100%;border:1px solid var(--border);border-radius:6px;\"><\/canvas>\n <canvas id=\"strainCanvas\" width=\"280\" height=\"240\" style=\"width:100%;border:1px solid var(--border);border-radius:6px;\"><\/canvas>\n <\/div>\n <div style=\"display:flex;gap:1.5rem;margin-top:0.6rem;flex-wrap:wrap;\">\n <div style=\"font-size:0.72rem;color:var(--text-muted);display:flex;align-items:center;gap:5px;\"><div style=\"width:12px;height:12px;background:#b0bec5;border-radius:2px;\"><\/div>Concrete<\/div>\n <div style=\"font-size:0.72rem;color:var(--text-muted);display:flex;align-items:center;gap:5px;\"><div style=\"width:12px;height:12px;background:#424242;border-radius:50%;\"><\/div>Steel Bars (at d<sub>s<\/sub>)<\/div>\n <div style=\"font-size:0.72rem;color:var(--text-muted);display:flex;align-items:center;gap:5px;\"><div style=\"width:12px;height:4px;background:#e65100;border-radius:2px;\"><\/div>CFRP Layer (at d<sub>f<\/sub>)<\/div>\n <div style=\"font-size:0.72rem;color:var(--text-muted);display:flex;align-items:center;gap:5px;\"><div style=\"width:12px;height:2px;background:#1565c0;border-radius:2px;\"><\/div>Neutral Axis<\/div>\n <\/div>\n <\/div>\n\n <!-- DETAILED REPORT (Password Protected) -->\n <div class=\"report-section\" id=\"detailReport\">\n <div class=\"report-title\">\n <svg width=\"18\" height=\"18\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" viewBox=\"0 0 24 24\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><\/svg>\n Detailed Design Report \u2014 ACI 440.2R-17 (Cross-Checked vs. Example 16.3)\n <\/div>\n\n <!-- Password Gate -->\n <div id=\"reportPasswordGate\" style=\"\n display:flex; flex-direction:column; align-items:center; justify-content:center;\n padding: 2.5rem 1rem; gap: 1rem;\n \">\n <div style=\"background:#f0f4fa;border:1px solid var(--border);border-radius:10px;padding:2rem 2.5rem;text-align:center;max-width:340px;width:100%;\">\n <div style=\"margin-bottom:1rem;\">\n <svg width=\"38\" height=\"38\" fill=\"none\" stroke=\"var(--primary)\" stroke-width=\"1.7\" viewBox=\"0 0 24 24\" style=\"margin:0 auto;display:block;\">\n <rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\" ry=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/>\n <\/svg>\n <\/div>\n <div style=\"font-size:0.95rem;font-weight:700;color:var(--primary);margin-bottom:0.3rem;\">Report Access Required<\/div>\n <div style=\"font-size:0.78rem;color:var(--text-muted);margin-bottom:1.2rem;\">Enter the password to view the Detailed Design Report.<\/div>\n <input\n type=\"password\"\n id=\"reportPasswordInput\"\n placeholder=\"Enter password\"\n maxlength=\"20\"\n style=\"width:100%;padding:8px 12px;border:1.5px solid var(--border);border-radius:6px;font-size:0.88rem;font-family:'IBM Plex Mono',monospace;background:#fff;text-align:center;margin-bottom:0.8rem;outline:none;transition:border-color 0.2s;\"\n onkeydown=\"if(event.key==='Enter') unlockReport()\"\n onfocus=\"this.style.borderColor='var(--primary)'\"\n onblur=\"this.style.borderColor='var(--border)'\"\n >\n <div id=\"reportPasswordError\" style=\"font-size:0.75rem;color:var(--danger);min-height:1rem;margin-bottom:0.5rem;display:none;\">\n \u2717 Incorrect password. Please try again.\n <\/div>\n <button onclick=\"unlockReport()\" style=\"\n background:var(--primary);color:white;border:none;padding:0.55rem 1.6rem;\n border-radius:6px;font-size:0.83rem;font-weight:600;cursor:pointer;\n font-family:'IBM Plex Sans',sans-serif;width:100%;transition:background 0.2s;\n \" onmouseover=\"this.style.background='var(--primary-light)'\" onmouseout=\"this.style.background='var(--primary)'\">\n \ud83d\udd13 Unlock Report\n <\/button>\n <\/div>\n <\/div>\n\n <!-- Report Content (hidden until unlocked) -->\n <div id=\"reportContent\" style=\"display:none;\"><\/div>\n <\/div>\n\n<\/div>\n<\/div>\n\n<script>\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ UNIT SYSTEM\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nlet isSI = false;\n\nfunction toggleUnit() {\n isSI = !isSI;\n document.getElementById('toggleThumb').classList.toggle('si', isSI);\n document.getElementById('toggleTrack').classList.toggle('si-active', isSI);\n document.getElementById('unitLabelLeft').style.color = isSI ? 'rgba(255,255,255,0.4)' : 'rgba(255,255,255,0.9)';\n document.getElementById('unitLabelRight').style.color = isSI ? 'rgba(255,255,255,0.9)' : 'rgba(255,255,255,0.4)';\n updateUnitLabels();\n convertInputs();\n calculate();\n}\n\nfunction updateUnitLabels() {\n const pairs = [\n ['u_b','mm','in'], ['u_d','mm','in'], ['u_def','mm','in'],\n ['u_As','mm\u00b2','in\u00b2'], ['u_fc','MPa','psi'], ['u_fy','MPa','psi'],\n ['u_ffu','MPa','ksi'], ['u_Ef','MPa','ksi'],\n ['u_wf','mm','in'], ['u_tf','mm','in'],\n ['u_M','kN\u00b7m','k-ft'], ['u_Mb','kN\u00b7m','k-ft'], ['u_Mu','kN\u00b7m','k-ft'],\n ['u_C','mm','in']\n ];\n pairs.forEach(([id, si, us]) => {\n const el = document.getElementById(id);\n if(el) el.textContent = isSI ? si : us;\n });\n}\n\nconst CF = {\n length_in_mm: 25.4,\n area_in2_mm2: 645.16,\n stress_psi_MPa: 0.006895,\n stress_ksi_MPa: 6.895,\n moment_kft_kNm: 1.35582\n};\n\nlet lastValues = null;\n\nfunction convertInputs() {\n if(!lastValues) return;\n const f = (id, fac) => {\n const el = document.getElementById(id);\n if(!el) return;\n const v = parseFloat(el.value) || 0;\n if(isSI) el.value = +(v * fac).toFixed(4);\n else el.value = +(v \/ fac).toFixed(4);\n };\n if(isSI) {\n f('inp_b', CF.length_in_mm); f('inp_d', CF.length_in_mm); f('inp_def', CF.length_in_mm);\n f('inp_As', CF.area_in2_mm2);\n f('inp_fc', CF.stress_psi_MPa); f('inp_fy', CF.stress_psi_MPa);\n f('inp_ffu', CF.stress_ksi_MPa); f('inp_Ef', CF.stress_ksi_MPa);\n f('inp_wf', CF.length_in_mm); f('inp_tf', CF.length_in_mm);\n f('inp_MDL', CF.moment_kft_kNm); f('inp_MLL', CF.moment_kft_kNm);\n f('inp_Mu', CF.moment_kft_kNm); f('inp_C', CF.length_in_mm);\n } else {\n f('inp_b', CF.length_in_mm); f('inp_d', CF.length_in_mm); f('inp_def', CF.length_in_mm);\n f('inp_As', CF.area_in2_mm2);\n f('inp_fc', CF.stress_psi_MPa); f('inp_fy', CF.stress_psi_MPa);\n f('inp_ffu', CF.stress_ksi_MPa); f('inp_Ef', CF.stress_ksi_MPa);\n f('inp_wf', CF.length_in_mm); f('inp_tf', CF.length_in_mm);\n f('inp_MDL', CF.moment_kft_kNm); f('inp_MLL', CF.moment_kft_kNm);\n f('inp_Mu', CF.moment_kft_kNm); f('inp_C', CF.length_in_mm);\n }\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ GET INPUTS (always in US Customary internally)\n\/\/ Variable mapping vs ACI 440.2R-17 notation:\n\/\/ d (HTML) = df (ACI) = FRP depth = total beam height\n\/\/ def_ (HTML) = d (ACI) = steel effective depth\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction getInputs() {\n const g = id => parseFloat(document.getElementById(id).value) || 0;\n let b=g('inp_b'), d=g('inp_d'), def_=g('inp_def'), As=g('inp_As');\n let fc=g('inp_fc'), fy=g('inp_fy');\n let ffu_star=g('inp_ffu'), Ef=g('inp_Ef'), efu_star=g('inp_efu');\n let ni=g('inp_ni'), wf=g('inp_wf'), tf=g('inp_tf');\n let MDL=g('inp_MDL'), MLL=g('inp_MLL'), Mu=g('inp_Mu');\n let C_assume=g('inp_C');\n if(isSI) {\n b \/= CF.length_in_mm; d \/= CF.length_in_mm; def_ \/= CF.length_in_mm;\n As \/= CF.area_in2_mm2;\n fc \/= CF.stress_psi_MPa; fy \/= CF.stress_psi_MPa;\n ffu_star \/= CF.stress_ksi_MPa; Ef \/= CF.stress_ksi_MPa;\n wf \/= CF.length_in_mm; tf \/= CF.length_in_mm;\n MDL \/= CF.moment_kft_kNm; MLL \/= CF.moment_kft_kNm;\n Mu \/= CF.moment_kft_kNm; C_assume \/= CF.length_in_mm;\n }\n return {b,d,def_,As,fc,fy,ffu_star,Ef,efu_star,ni,wf,tf,MDL,MLL,Mu,C_assume};\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ CORE CALCULATIONS (ACI 440.2R-17)\n\/\/ All variable corrections applied per cross-check vs Example 16.3\n\/\/ NOTATION (throughout this function):\n\/\/ d = ACI df = FRP depth = total beam height (distance top \u2192 CFRP soffit)\n\/\/ def_ = ACI d = steel effective depth (distance top \u2192 steel centroid)\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction compute(inp) {\n const {b, d, def_, As, fc, fy, ffu_star, Ef, efu_star, ni, wf, tf, MDL, MLL, Mu, C_assume} = inp;\n const Es = 29000; \/\/ ksi\n const CE = 0.95;\n\n \/\/ \u2500\u2500 Step 0: Existing beam capacity (Whitney stress block) \u2500\u2500\n \/\/ Use def_ (ACI d = steel effective depth) for moment arm \u2014 CORRECTED\n const a0 = As * fy \/ (0.85 * fc * b);\n const phi_Mn_exist = 0.9 * As * fy * (def_ - a0 \/ 2) \/ 12000; \/\/ k-ft\n\n \/\/ \u2500\u2500 Step 1: CFRP design material properties \u2500\u2500\n const ffu = CE * ffu_star; \/\/ ksi\n const efu = CE * efu_star; \/\/ in\/in\n\n \/\/ \u2500\u2500 Step 2: Preliminary calculations \u2500\u2500\n const b1_conc = fc <= 4000 ? 0.85 : Math.max(0.65, 0.85 - 0.05 * (fc - 4000) \/ 1000);\n const Ec = 57000 * Math.sqrt(fc); \/\/ psi\n const Ec_ksi = Ec \/ 1000; \/\/ ksi\n const n = Es \/ Ec_ksi; \/\/ modular ratio (unitless)\n const Af = ni * tf * wf; \/\/ in\u00b2\n\n \/\/ \u2500\u2500 Step 3: Cracked Moment of Inertia (FULL DERIVATION) \u2500\u2500\n \/\/ CORRECTED: k formula using standard cracked-section quadratic solution\n \/\/ Reinforcement ratio referenced to ACI d = def_ (steel effective depth)\n const rho_s_cr = As \/ (b * def_); \/\/ \u03c1 = As\/(b\u00b7ds) [unitless]\n const rho_n = rho_s_cr * n; \/\/ \u03c1\u00b7n\n const rho_n_sq = rho_n * rho_n; \/\/ (\u03c1\u00b7n)\u00b2\n const two_rho_n = 2 * rho_n; \/\/ 2\u03c1\u00b7n\n const under_sqrt = two_rho_n + rho_n_sq; \/\/ 2\u03c1n + (\u03c1n)\u00b2\n const k_cr = Math.sqrt(under_sqrt) - rho_n; \/\/ k = \u221a(2\u03c1n+(\u03c1n)\u00b2) \u2212 \u03c1n [CORRECT FORMULA]\n\n \/\/ Neutral axis depth \u2014 referenced to ACI d = def_ (steel depth)\n const kd = k_cr * def_; \/\/ in [CORRECTED: was k_cr * d]\n\n \/\/ Icr \u2014 moment arm (def_ \u2212 kd) is to steel centroid [CORRECTED: was (d \u2212 kd)]\n const Icr_comp = b * Math.pow(kd, 3) \/ 3; \/\/ Compression zone contribution (in\u2074)\n const Icr_steel = n * As * Math.pow(def_ - kd, 2); \/\/ Steel zone contribution (in\u2074)\n const Icr = Icr_comp + Icr_steel; \/\/ Total I_cr (in\u2074)\n\n \/\/ Initial substrate strain at soffit \u2014 distance (d \u2212 kd) to FRP\/soffit [CORRECTED: was def_-kd]\n const MDL_inlb = MDL * 12000; \/\/ lb-in\n const ebi = (MDL_inlb * (d - kd)) \/ (Icr * Ec); \/\/ (d-kd) = dist from NA to soffit [CORRECTED]\n\n \/\/ \u2500\u2500 Step 4: Design strain of CFRP (debonding limit) \u2500\u2500\n const efd_calc = 0.083 * Math.sqrt(fc \/ (ni * Ef * 1000 * tf));\n const efd_limit = 0.9 * efu;\n const efd = Math.min(efd_calc, efd_limit);\n\n \/\/ \u2500\u2500 Step 5\u20136: Neutral axis depth & effective FRP strain \u2500\u2500\n const C = C_assume;\n \/\/ FRP strain: (d \u2212 C) is distance from NA to FRP soffit [CORRECTED: was def_-C]\n let efe_raw = 0.003 * ((d - C) \/ C) - ebi;\n let efe = Math.min(efe_raw, efd);\n if (efe < 0) efe = 0;\n\n \/\/ Concrete extreme fiber strain at top\n const ec = (efe + ebi) * (C \/ (d - C)); \/\/ (d-C) = dist NA to soffit [CORRECTED: was def_-C]\n\n \/\/ \u2500\u2500 Step 7: Steel strain (similar triangles) \u2500\u2500\n \/\/ (def_-C) = dist from NA to steel; (d-C) = dist from NA to FRP soffit [CORRECTED: was swapped]\n const es = (efe + ebi) * ((def_ - C) \/ (d - C));\n\n \/\/ \u2500\u2500 Step 8: Stress in steel and FRP \u2500\u2500\n const fs_calc = Es * 1000 * es; \/\/ psi\n const fs = Math.min(fs_calc, fy); \/\/ psi (capped at fy)\n const ffe = Ef * efe; \/\/ ksi\n\n \/\/ \u2500\u2500 Step 9: Internal force equilibrium (parabolic-rectangular stress block) \u2500\u2500\n const ec_prime = 1.7 * fc \/ Ec; \/\/ strain at f'c\n const b1_stress = (4 * ec_prime - ec) \/ (6 * ec_prime - 2 * ec);\n const a1_stress = (3 * ec_prime * ec - ec * ec) \/ (3 * b1_stress * ec_prime * ec_prime);\n const C_calc = (As * (fy \/ 1000) + Af * ffe) \/ (a1_stress * (fc \/ 1000) * b1_stress * b);\n\n \/\/ \u2500\u2500 Step 10: Flexural strength components \u2500\u2500\n \/\/ Steel: moment arm = (def_ \u2212 \u03b2\u2081c\/2) = ACI d [CORRECTED: was d-\u03b21C\/2]\n const Mns = As * (fs \/ 1000) * (def_ - b1_stress * C \/ 2) \/ 12; \/\/ k-ft\n \/\/ FRP : moment arm = (d \u2212 \u03b2\u2081c\/2) = ACI df [CORRECTED: was def_-\u03b21C\/2]\n const Mnf = Af * ffe * (d - b1_stress * C \/ 2) \/ 12; \/\/ k-ft\n\n \/\/ \u2500\u2500 Step 11: Design flexural strength \u2500\u2500\n const psi_f = 0.85;\n const et = es; \/\/ net tensile strain in extreme tension steel\n let phi = et >= 0.005 ? 0.9 : (et <= 0.002 ? 0.65 : 0.65 + 0.25 * (et - 0.002) \/ 0.003);\n const phi_Mn = phi * (Mns + psi_f * Mnf);\n\n \/\/ \u2500\u2500 Step 12: Service stress check \u2500\u2500\n const Ms = 1.1 * MDL + 0.75 * MLL; \/\/ k-ft\n const Ms_kipin = Ms * 12; \/\/ kip-in\n\n \/\/ k for cracked section at service (steel + FRP):\n \/\/ Per ACI 440.2R-17 Eq. 10.2.10.1 footnote: BOTH \u03c1s and \u03c1f referenced to def_ (ACI d = steel depth)\n const rho_s = As \/ (b * def_); \/\/ CORRECTED: was As\/(b*d)\n const rho_f = Af \/ (b * def_); \/\/ Af\/(b\u00b7ds) per ACI footnote\n const ns_val = n; \/\/ Es\/Ec\n const nf_val = Ef * 1000 \/ Ec; \/\/ Ef\/Ec\n const df_ds = d \/ def_; \/\/ df\/ds ratio (> 1 since FRP deeper than steel)\n const A_k = rho_s * ns_val + rho_f * nf_val;\n const B_k = 2 * (rho_s * ns_val + rho_f * nf_val * df_ds); \/\/ df\/ds ratio CORRECT\n const k_s = Math.sqrt(A_k * A_k + B_k) - A_k;\n const kdef = k_s * def_; \/\/ service cracked NA depth (in)\n\n \/\/ Service steel stress \u2014 ACI Eq. 10.2.10.1 (all in kip-in \/ ksi)\n \/\/ Numerator: [Ms + \u03b5bi\u00b7Af\u00b7Ef\u00b7(df\u2212kd\/3)] \u00d7 (ds\u2212kd) \u00d7 Es\n \/\/ Denominator: As\u00b7Es\u00b7(ds\u2212kd\/3)\u00b7(ds\u2212kd) + Af\u00b7Ef\u00b7(df\u2212kd\/3)\u00b7(df\u2212kd)\n \/\/ HTML vars: df=d, ds=def_\n const num_fss = (Ms_kipin + ebi * Af * Ef * (d - kdef \/ 3)) * (def_ - kdef) * Es; \/\/ CORRECTED\n const den_fss = As * Es * (def_ - kdef \/ 3) * (def_ - kdef) + Af * Ef * (d - kdef \/ 3) * (d - kdef); \/\/ CORRECTED\n const fss = num_fss \/ den_fss; \/\/ ksi\n const limit_fss = 0.80 * fy \/ 1000; \/\/ ksi\n\n \/\/ \u2500\u2500 Step 13: Creep-rupture limit \u2500\u2500\n \/\/ f_f,s = f_s,s \u00d7 (Ef\/Es) \u00d7 (df\u2212kd)\/(ds\u2212kd) \u2212 \u03b5bi\u00b7Ef \u2014 already correct\n const ffs_val = fss * (Ef \/ Es) * ((d - kdef) \/ (def_ - kdef)) - ebi * Ef;\n const limit_ffs = 0.55 * ffu;\n\n \/\/ \u2500\u2500 Development length (ACI Eq. 14.1.3) \u2500\u2500\n const Ldf = 0.057 * Math.sqrt(ni * Ef * 1000 * tf \/ Math.sqrt(fc));\n\n \/\/ Service\/unstrengthened limit\n const unstrengthLimit = 1.1 * MDL + 0.75 * MLL;\n\n return {\n phi_Mn_exist, a0,\n ffu, efu, b1_conc, Ec, Ec_ksi, n, Af,\n rho_s_cr, rho_n, rho_n_sq, two_rho_n, under_sqrt, k_cr,\n kd, Icr, Icr_comp, Icr_steel,\n ebi, efd, efd_calc, efd_limit,\n efe, efe_raw, ec, es, fs, fs_calc, ffe,\n ec_prime, b1_stress, a1_stress, C_calc,\n Mns, Mnf, phi_Mn, phi,\n k_s, kdef, Ms, fss, limit_fss, ffs_val, limit_ffs,\n Ldf, unstrengthLimit,\n rho_s, rho_f, ns_val, nf_val, df_ds,\n b, d, def_, As, fc, fy, Ef, efu_star, ni, wf, tf,\n MDL, MLL, Mu, C_assume, ffu_star\n };\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ FORMAT HELPERS\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction fmt(v, dec=4) { return isNaN(v) ? '\u2014' : v.toFixed(dec); }\nfunction getMomentUnit() { return isSI ? 'kN\u00b7m' : 'k-ft'; }\nfunction getLengthUnit() { return isSI ? 'mm' : 'in'; }\nfunction momentOut(v) { return isSI ? +(v * CF.moment_kft_kNm).toFixed(3) : +v.toFixed(3); }\nfunction lengthOut(v) { return isSI ? +(v * CF.length_in_mm).toFixed(2) : +v.toFixed(4); }\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ MAIN CALCULATE & RENDER\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction calculate() {\n const inp = getInputs();\n lastValues = inp;\n const R = compute(inp);\n\n \/\/ Convergence note\n const convDiff = Math.abs(R.C_calc - R.C_assume);\n const convEl = document.getElementById('naConvergence');\n convEl.innerHTML = convDiff < 0.01\n ? `<span class=\"conv-badge ok\">\u2713 Converged \u2014 Calculated c = ${fmt(R.C_calc,4)} in<\/span>`\n : `<span class=\"conv-badge warn\">\u26a0 Not converged \u2014 Update c to ${fmt(R.C_calc,4)} in (\u0394 = ${fmt(convDiff,4)})<\/span>`;\n\n \/\/ Result cards\n const mu = getMomentUnit();\n document.getElementById('rc_Mu').innerHTML = `${momentOut(R.Mu)}<span class=\"rc-unit\">${mu}<\/span>`;\n document.getElementById('rc_MnExist').innerHTML = `${momentOut(R.phi_Mn_exist)}<span class=\"rc-unit\">${mu}<\/span>`;\n document.getElementById('rc_MnRetro').innerHTML = `${momentOut(R.phi_Mn)}<span class=\"rc-unit\">${mu}<\/span>`;\n document.getElementById('rc_Ms').innerHTML = `${momentOut(R.Ms)}<span class=\"rc-unit\">${mu}<\/span>`;\n\n const capOK = R.phi_Mn >= R.Mu;\n document.getElementById('rcard_retrofit').className = 'result-card ' + (capOK ? 'ok' : 'fail');\n const st_cap = document.getElementById('st_capacity');\n st_cap.className = 'rc-status ' + (capOK ? 'ok' : 'fail');\n st_cap.innerHTML = `<div class=\"status-dot\"><\/div>${capOK ? '\u2713 Adequate (\u03c6Mn \u2265 Mu)' : '\u2717 Inadequate (\u03c6Mn < Mu)'}`;\n\n const srvOK = R.unstrengthLimit <= R.phi_Mn_exist;\n document.getElementById('rcard_service').className = 'result-card ' + (srvOK ? 'ok' : 'fail');\n const st_srv = document.getElementById('st_service');\n st_srv.className = 'rc-status ' + (srvOK ? 'ok' : 'fail');\n st_srv.innerHTML = `<div class=\"status-dot\"><\/div>${srvOK ? '\u2713 1.1DL+0.75LL \u2264 \u03c6Mn,exist' : '\u2717 Exceeds existing capacity'}`;\n\n const fssOK = R.fss <= R.limit_fss;\n document.getElementById('rcard_steel').className = 'result-card ' + (fssOK ? 'ok' : 'fail');\n document.getElementById('rc_fss').innerHTML = `${fmt(R.fss,3)}<span class=\"rc-unit\">ksi<\/span>`;\n const st_steel = document.getElementById('st_steel');\n st_steel.className = 'rc-status ' + (fssOK ? 'ok' : 'fail');\n st_steel.innerHTML = `<div class=\"status-dot\"><\/div>${fssOK ? `\u2713 \u2264 0.8fy = ${fmt(R.limit_fss,2)} ksi` : `\u2717 > 0.8fy = ${fmt(R.limit_fss,2)} ksi`}`;\n\n const ffsOK = R.ffs_val <= R.limit_ffs;\n document.getElementById('rcard_frp').className = 'result-card ' + (ffsOK ? 'ok' : 'fail');\n document.getElementById('rc_ffs').innerHTML = `${fmt(R.ffs_val,3)}<span class=\"rc-unit\">ksi<\/span>`;\n const st_frp = document.getElementById('st_frp');\n st_frp.className = 'rc-status ' + (ffsOK ? 'ok' : 'fail');\n st_frp.innerHTML = `<div class=\"status-dot\"><\/div>${ffsOK ? `\u2713 \u2264 0.55ffu = ${fmt(R.limit_ffs,2)} ksi` : `\u2717 > 0.55ffu = ${fmt(R.limit_ffs,2)} ksi`}`;\n\n document.getElementById('rc_efd').textContent = R.efd.toFixed(6);\n document.getElementById('rc_efd_note').textContent = R.efd === R.efd_calc ? 'Debonding controls' : 'Rupture strain controls';\n document.getElementById('rc_Ldf').innerHTML = `${lengthOut(R.Ldf)}<span class=\"rc-unit\">${getLengthUnit()}<\/span>`;\n\n const allOK = capOK && srvOK && fssOK && ffsOK;\n const ovEl = document.getElementById('overallStatus');\n ovEl.className = 'conv-badge ' + (allOK ? 'ok' : 'warn');\n ovEl.textContent = allOK ? '\u2713 ALL CHECKS PASS' : '\u26a0 REVIEW REQUIRED';\n\n drawBeam(R);\n drawStrain(R);\n generateReport(R, inp);\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ VISUALIZATIONS \u2014 CORRECTED LABELS\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction drawBeam(R) {\n const canvas = document.getElementById('beamCanvas');\n const ctx = canvas.getContext('2d');\n const W = canvas.width, H = canvas.height;\n ctx.clearRect(0, 0, W, H);\n\n \/\/ Scale based on FRP depth (d = total beam height)\n const scale = Math.min((W - 80) \/ R.b, (H - 60) \/ R.d, 9);\n const bw = R.b * scale, bh = R.d * scale;\n const ox = (W - bw) \/ 2, oy = 20;\n\n \/\/ Concrete section\n ctx.fillStyle = '#cfd8dc';\n ctx.strokeStyle = '#607d8b';\n ctx.lineWidth = 1.5;\n ctx.fillRect(ox, oy, bw, bh);\n ctx.strokeRect(ox, oy, bw, bh);\n\n \/\/ CFRP at bottom soffit (at d = total height from top)\n const cfh = Math.max(3, R.ni * R.tf * scale * 4);\n ctx.fillStyle = '#e65100';\n ctx.fillRect(ox, oy + bh, bw, cfh);\n ctx.strokeStyle = '#bf360c';\n ctx.strokeRect(ox, oy + bh, bw, cfh);\n\n \/\/ Neutral axis at c from top\n const naY = oy + R.C_assume * scale;\n ctx.strokeStyle = '#1565c0';\n ctx.lineWidth = 1.5;\n ctx.setLineDash([4, 3]);\n ctx.beginPath(); ctx.moveTo(ox - 5, naY); ctx.lineTo(ox + bw + 5, naY); ctx.stroke();\n ctx.setLineDash([]);\n\n \/\/ Steel bars at def_ (steel effective depth from top) \u2014 CORRECTED position\n const steelY = oy + R.def_ * scale; \/\/ def_ = ACI d = steel depth\n const nbars = Math.max(2, Math.round(R.As \/ 0.31));\n const barR = Math.max(3, Math.min(7, R.d * scale \/ 14));\n ctx.fillStyle = '#212121';\n for (let i = 0; i < nbars; i++) {\n const bx = ox + (i + 1) * bw \/ (nbars + 1);\n ctx.beginPath(); ctx.arc(bx, steelY, barR, 0, Math.PI * 2); ctx.fill();\n }\n\n \/\/ Dimension line for b (top)\n ctx.fillStyle = '#37474f';\n ctx.font = '10px Arial';\n ctx.textAlign = 'center';\n ctx.fillText(`b = ${fmt(R.b,1)}\"`, ox + bw \/ 2, oy - 6);\n\n \/\/ Left side dimension: total height = d = df\n ctx.save();\n ctx.translate(ox - 20, oy + bh \/ 2);\n ctx.rotate(-Math.PI \/ 2);\n ctx.fillText(`df = ${fmt(R.d,1)}\"`, 0, 0);\n ctx.restore();\n\n \/\/ Right side: steel effective depth = def_ = ds\n ctx.strokeStyle = '#37474f';\n ctx.lineWidth = 1;\n ctx.setLineDash([2, 2]);\n ctx.beginPath(); ctx.moveTo(ox + bw + 4, oy); ctx.lineTo(ox + bw + 4, steelY); ctx.stroke();\n ctx.setLineDash([]);\n ctx.fillStyle = '#424242';\n ctx.font = '9px Arial';\n ctx.textAlign = 'left';\n ctx.fillText(`ds=${fmt(R.def_,1)}\"`, ox + bw + 7, steelY + 3);\n\n \/\/ Neutral axis label\n ctx.fillStyle = '#1565c0';\n ctx.font = '9px Arial';\n ctx.textAlign = 'left';\n ctx.fillText(`c = ${fmt(R.C_assume,2)}\"`, ox + bw + 7, naY + 3);\n\n \/\/ CFRP label\n ctx.fillStyle = '#e65100';\n ctx.textAlign = 'center';\n ctx.font = '9px Arial';\n ctx.fillText('CFRP', ox + bw \/ 2, oy + bh + cfh + 10);\n\n \/\/ Title\n ctx.fillStyle = '#546e7a';\n ctx.font = '9px Arial';\n ctx.textAlign = 'center';\n ctx.fillText('Cross Section', W \/ 2, H - 2);\n}\n\nfunction drawStrain(R) {\n const canvas = document.getElementById('strainCanvas');\n const ctx = canvas.getContext('2d');\n const W = canvas.width, H = canvas.height;\n ctx.clearRect(0, 0, W, H);\n\n const dh = H - 55;\n const scale = dh \/ R.d; \/\/ scale on FRP depth (d = total height)\n const oy = 20;\n const midX = W \/ 2;\n\n \/\/ Reference axes\n ctx.strokeStyle = '#b0bec5';\n ctx.lineWidth = 1;\n ctx.beginPath(); ctx.moveTo(midX, oy); ctx.lineTo(midX, oy + dh + 10); ctx.stroke();\n\n const eTop = R.ec;\n const eBot = R.efe + R.ebi; \/\/ total strain at FRP soffit (depth = d)\n const maxE = Math.max(Math.abs(eTop), Math.abs(eBot)) || 0.005;\n const xScale = (W \/ 2 - 30) \/ maxE;\n\n const topY = oy;\n const naY = oy + R.C_assume * scale;\n const botY = oy + R.d * scale; \/\/ FRP at full depth d\n const steelY = oy + R.def_ * scale; \/\/ steel at def_\n\n \/\/ Compression zone fill\n const compX = midX - eTop * xScale;\n ctx.fillStyle = 'rgba(21,101,192,0.15)';\n ctx.beginPath(); ctx.moveTo(midX, topY); ctx.lineTo(compX, topY); ctx.lineTo(midX, naY); ctx.fill();\n\n \/\/ Tension zone fill\n const tensX = midX + eBot * xScale;\n ctx.fillStyle = 'rgba(230,81,0,0.15)';\n ctx.beginPath(); ctx.moveTo(midX, naY); ctx.lineTo(tensX, botY); ctx.lineTo(midX, botY); ctx.fill();\n\n \/\/ Strain line\n ctx.strokeStyle = '#0f4c81';\n ctx.lineWidth = 2;\n ctx.beginPath(); ctx.moveTo(compX, topY); ctx.lineTo(midX, naY); ctx.lineTo(tensX, botY); ctx.stroke();\n\n \/\/ Steel strain marker (at def_)\n const steelStrainX = midX + R.es * xScale;\n ctx.strokeStyle = '#424242';\n ctx.lineWidth = 1.5;\n ctx.setLineDash([3, 2]);\n ctx.beginPath(); ctx.moveTo(midX, steelY); ctx.lineTo(steelStrainX, steelY); ctx.stroke();\n ctx.setLineDash([]);\n ctx.fillStyle = '#424242';\n ctx.beginPath(); ctx.arc(steelStrainX, steelY, 3, 0, Math.PI * 2); ctx.fill();\n\n \/\/ NA dashed line\n ctx.strokeStyle = '#1565c0';\n ctx.lineWidth = 1.5;\n ctx.setLineDash([4, 3]);\n ctx.beginPath(); ctx.moveTo(20, naY); ctx.lineTo(W - 10, naY); ctx.stroke();\n ctx.setLineDash([]);\n\n \/\/ Dots at top, NA, bottom\n ctx.fillStyle = '#0f4c81';\n [topY, naY, botY].forEach(y => { ctx.beginPath(); ctx.arc(midX, y, 3, 0, Math.PI * 2); ctx.fill(); });\n\n \/\/ Labels\n ctx.font = '9px Arial';\n ctx.textAlign = 'left';\n ctx.fillStyle = '#37474f';\n ctx.fillText(`\u03b5c=${R.ec.toFixed(4)}`, 2, topY + 9);\n ctx.fillStyle = '#424242';\n ctx.fillText(`\u03b5s=${R.es.toFixed(4)}`, 2, steelY - 3);\n ctx.fillStyle = '#e65100';\n ctx.fillText(`\u03b5fe=${R.efe.toFixed(4)}`, 2, botY + 10);\n ctx.fillStyle = '#e65100';\n ctx.textAlign = 'right';\n ctx.fillText(`\u03b5fe+\u03b5bi=${(R.efe + R.ebi).toFixed(4)}`, W - 2, botY + 10);\n ctx.fillStyle = '#1565c0';\n ctx.textAlign = 'right';\n ctx.fillText('N.A.', W - 3, naY - 3);\n\n \/\/ Title\n ctx.fillStyle = '#546e7a';\n ctx.font = '9px Arial';\n ctx.textAlign = 'center';\n ctx.fillText('Strain Distribution', W \/ 2, H - 2);\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ REPORT GENERATOR \u2014 All steps corrected\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction generateReport(R, inp) {\n const mu = getMomentUnit();\n const lu = getLengthUnit();\n const mO = v => momentOut(v);\n const lO = v => lengthOut(v);\n const loc = document.getElementById('projLocation').value;\n const floor = document.getElementById('projFloor').value;\n const steel = document.getElementById('projSteel').value;\n\n let html = `\n <div style=\"margin-bottom:1.5rem;padding:1rem;background:#f0f4fa;border-radius:6px;border-left:4px solid var(--primary);\">\n <div style=\"font-size:0.85rem;font-weight:700;color:var(--primary);margin-bottom:0.5rem;\">Project Details<\/div>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:0.3rem;font-size:0.8rem;\">\n <div><b>Location:<\/b> ${loc}<\/div><div><b>Floor:<\/b> ${floor}<\/div>\n <div><b>Steel:<\/b> ${steel}<\/div><div><b>Reference:<\/b> ACI 440.2R-17 (Example 16.3)<\/div>\n <div><b>Unit System:<\/b> ${isSI ? 'SI (MPa, mm, kN\u00b7m)' : 'US Customary (psi, in, k-ft)'}<\/div>\n <div><b>Notation:<\/b> d<sub>f<\/sub> = FRP depth  |  d<sub>s<\/sub> = steel depth<\/div>\n <\/div>\n <\/div>`;\n\n \/\/ Step 0 \u2014 Given Data Summary\n html += stepBlock('0', 'Given Data Summary', `\n <div style=\"display:grid;grid-template-columns:repeat(3,1fr);gap:0.4rem;font-size:0.78rem;\">\n <div><b>b<\/b> = ${lO(R.b)} ${lu}<\/div>\n <div><b>d<sub>f<\/sub><\/b> = ${lO(R.d)} ${lu} <span style=\"font-size:0.68rem;color:#bf360c;\">(FRP\/soffit depth)<\/span><\/div>\n <div><b>d<sub>s<\/sub><\/b> = ${lO(R.def_)} ${lu} <span style=\"font-size:0.68rem;color:#bf360c;\">(steel depth)<\/span><\/div>\n <div><b>A<sub>s<\/sub><\/b> = ${isSI ? (R.As*645.16).toFixed(1)+' mm\u00b2' : R.As.toFixed(3)+' in\u00b2'}<\/div>\n <div><b>f'<sub>c<\/sub><\/b> = ${isSI ? (R.fc*0.006895).toFixed(2)+' MPa' : R.fc.toFixed(0)+' psi'}<\/div>\n <div><b>f<sub>y<\/sub><\/b> = ${isSI ? (R.fy*0.006895).toFixed(1)+' MPa' : R.fy.toFixed(0)+' psi'}<\/div>\n <div><b>f*<sub>fu<\/sub><\/b> = ${R.ffu_star} ksi<\/div>\n <div><b>E<sub>f<\/sub><\/b> = ${R.Ef} ksi<\/div>\n <div><b>\u03b5*<sub>fu<\/sub><\/b> = ${R.efu_star}<\/div>\n <div><b>n<sub>i<\/sub><\/b> = ${R.ni}<\/div>\n <div><b>w<sub>f<\/sub><\/b> = ${lO(R.wf)} ${lu}<\/div>\n <div><b>t<sub>f<\/sub><\/b> = ${lO(R.tf)} ${lu}<\/div>\n <div><b>M<sub>DL<\/sub><\/b> = ${mO(R.MDL)} ${mu}<\/div>\n <div><b>M<sub>LL<\/sub><\/b> = ${mO(R.MLL)} ${mu}<\/div>\n <div><b>M<sub>u<\/sub><\/b> = ${mO(R.Mu)} ${mu}<\/div>\n <\/div>\n `);\n\n \/\/ Step 1\n html += stepBlock('1', 'FRP System Design Material Properties (ACI 440.2R-17 Table 9.4)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">Environmental reduction (C<sub>E<\/sub> = 0.95, interior CFRP)<\/div>\n \\\\( f_{fu} = C_E \\\\cdot f^*_{fu} = 0.95 \\\\times ${R.ffu_star} = ${fmt(R.ffu,2)} \\\\) ksi\n <\/div>\n <div class=\"formula-line\">\n \\\\( \\\\varepsilon_{fu} = C_E \\\\cdot \\\\varepsilon^*_{fu} = 0.95 \\\\times ${R.efu_star} = ${R.efu.toFixed(6)} \\\\) in\/in\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-result\">f<sub>fu<\/sub> = ${fmt(R.ffu,2)} ksi  |  \u03b5<sub>fu<\/sub> = ${R.efu.toFixed(6)} in\/in<\/div>\n <\/div>\n `);\n\n \/\/ Step 2\n html += stepBlock('2', 'Preliminary Calculations (ACI 440.2R-17 Step 2)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">Concrete stress block factor \u03b2\u2081 (ACI 318 \u00a722.2.2.4.3)<\/div>\n \\\\( \\\\beta_1 = 0.85 - 0.05\\\\frac{f'_c - 4000}{1000} = 0.85 - 0.05\\\\frac{${R.fc.toFixed(0)}-4000}{1000} = ${fmt(R.b1_conc,4)} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Concrete elastic modulus<\/div>\n \\\\( E_c = 57{,}000\\\\sqrt{f'_c} = 57{,}000\\\\sqrt{${R.fc.toFixed(0)}} = ${R.Ec.toFixed(0)} \\\\) psi\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Modular ratio (steel\/concrete)<\/div>\n \\\\( n = E_s\/E_c = 29{,}000{\\\\,}\\\\text{ksi} \/ ${(R.Ec\/1000).toFixed(2)}{\\\\,}\\\\text{ksi} = ${fmt(R.n,4)} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">CFRP area<\/div>\n \\\\( A_f = n_i \\\\cdot t_f \\\\cdot w_f = ${R.ni} \\\\times ${R.tf.toFixed(5)} \\\\times ${R.wf} = ${fmt(R.Af,5)} \\\\) in\u00b2\n <\/div>\n `);\n\n \/\/ Step 3 \u2014 FULL ICR DERIVATION\n const comp_term = R.Icr_comp;\n const steel_term = R.Icr_steel;\n html += stepBlock('3', 'Cracked Moment of Inertia I_cr & Existing Soffit Strain \u03b5_bi', `\n <div style=\"font-size:0.72rem;color:var(--text-muted);margin-bottom:0.5rem;font-style:italic;\">\n Cracked section analysis \u2014 steel only (no FRP), using ACI d<sub>s<\/sub> = ${fmt(R.def_,2)} in as reference depth.\n Correct formula: k = \u221a(2\u03c1n + (\u03c1n)\u00b2) \u2212 \u03c1n\n <\/div>\n\n <div class=\"icr-box\">\n <div class=\"icr-title\">\u25b6 Sub-Step 3a \u2014 Reinforcement Ratio & Modular Product<\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3a.1<\/span>\n <span>\\\\( \\\\rho = \\\\frac{A_s}{b \\\\cdot d_s} = \\\\frac{${fmt(R.As,4)}}{${R.b} \\\\times ${fmt(R.def_,3)}} = ${fmt(R.rho_s_cr,6)} \\\\)<\/span>\n <\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3a.2<\/span>\n <span>\\\\( \\\\rho n = ${fmt(R.rho_s_cr,6)} \\\\times ${fmt(R.n,4)} = ${fmt(R.rho_n,6)} \\\\)<\/span>\n <\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3a.3<\/span>\n <span>\\\\( (\\\\rho n)^2 = ${fmt(R.rho_n,6)}^2 = ${fmt(R.rho_n_sq,6)} \\\\)<\/span>\n <\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3a.4<\/span>\n <span>\\\\( 2\\\\rho n = 2 \\\\times ${fmt(R.rho_n,6)} = ${fmt(R.two_rho_n,6)} \\\\)<\/span>\n <\/div>\n <\/div>\n\n <div class=\"icr-box\">\n <div class=\"icr-title\">\u25b6 Sub-Step 3b \u2014 Neutral Axis Depth Factor k<\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3b.1<\/span>\n <span>\\\\( k = \\\\sqrt{2\\\\rho n + (\\\\rho n)^2} - \\\\rho n \\\\)<\/span>\n <\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3b.2<\/span>\n <span>\\\\( k = \\\\sqrt{${fmt(R.two_rho_n,6)} + ${fmt(R.rho_n_sq,6)}} - ${fmt(R.rho_n,6)} = \\\\sqrt{${fmt(R.under_sqrt,6)}} - ${fmt(R.rho_n,6)} \\\\)<\/span>\n <\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3b.3<\/span>\n <span style=\"font-weight:700;\">\\\\( k = ${fmt(Math.sqrt(R.under_sqrt),6)} - ${fmt(R.rho_n,6)} = \\\\mathbf{${fmt(R.k_cr,5)}} \\\\)<\/span>\n <\/div>\n <\/div>\n\n <div class=\"icr-box\">\n <div class=\"icr-title\">\u25b6 Sub-Step 3c \u2014 Neutral Axis Depth kd<\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3c.1<\/span>\n <span>\\\\( kd = k \\\\times d_s = ${fmt(R.k_cr,5)} \\\\times ${fmt(R.def_,3)}\\\\text{ in} = ${fmt(R.kd,4)}\\\\text{ in} \\\\)<\/span>\n <\/div>\n <\/div>\n\n <div class=\"icr-box\">\n <div class=\"icr-title\">\u25b6 Sub-Step 3d \u2014 Cracked Moment of Inertia I_cr<\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3d.1<\/span>\n <span>\\\\( I_{cr} = \\\\frac{b(kd)^3}{3} + nA_s(d_s - kd)^2 \\\\)<\/span>\n <\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3d.2<\/span>\n <span><b>Compression zone:<\/b> \\\\( \\\\frac{b(kd)^3}{3} = \\\\frac{${R.b} \\\\times ${fmt(R.kd,4)}^3}{3} = \\\\frac{${R.b} \\\\times ${fmt(Math.pow(R.kd,3),3)}}{3} = ${fmt(comp_term,2)} \\\\text{ in}^4 \\\\)<\/span>\n <\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3d.3<\/span>\n <span><b>Steel zone:<\/b> \\\\( nA_s(d_s-kd)^2 = ${fmt(R.n,4)} \\\\times ${fmt(R.As,4)} \\\\times (${fmt(R.def_,3)}-${fmt(R.kd,4)})^2 = ${fmt(R.n,4)} \\\\times ${fmt(R.As,4)} \\\\times ${fmt(Math.pow(R.def_-R.kd,2),3)} = ${fmt(steel_term,2)} \\\\text{ in}^4 \\\\)<\/span>\n <\/div>\n <div class=\"icr-row\">\n <span class=\"icr-step\">3d.4<\/span>\n <span style=\"font-weight:700;\">\\\\( I_{cr} = ${fmt(comp_term,2)} + ${fmt(steel_term,2)} = \\\\mathbf{${fmt(R.Icr,2)}} \\\\text{ in}^4 \\\\)<\/span>\n <\/div>\n <\/div>\n\n <div class=\"formula-line\" style=\"margin-top:0.6rem;\">\n <div class=\"formula-label\">\u25b6 Sub-Step 3e \u2014 Initial strain at soffit (distance = d<sub>f<\/sub> \u2212 kd)<\/div>\n \\\\( \\\\varepsilon_{bi} = \\\\frac{M_{DL}(d_f - kd)}{I_{cr} \\\\cdot E_c} = \\\\frac{${(R.MDL*12000).toFixed(0)}\\\\,\\\\text{lb-in} \\\\times (${fmt(R.d,3)} - ${fmt(R.kd,4)})\\\\,\\\\text{in}}{${fmt(R.Icr,2)}\\\\,\\\\text{in}^4 \\\\times ${R.Ec.toFixed(0)}\\\\,\\\\text{psi}} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-result\">\u03b5<sub>bi<\/sub> = ${R.ebi.toExponential(4)} in\/in<\/div>\n <\/div>\n `);\n\n \/\/ Step 4\n html += stepBlock('4', 'Design Strain of the CFRP System \u03b5_fd (ACI 440.2R-17 Eq. 10.1.1)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">Debonding strain (governing)<\/div>\n \\\\( \\\\varepsilon_{fd} = 0.083\\\\sqrt{\\\\frac{f'_c}{n_i E_f t_f}} = 0.083\\\\sqrt{\\\\frac{${R.fc.toFixed(0)}}{${R.ni} \\\\times ${(R.Ef*1000).toFixed(0)} \\\\times ${R.tf.toFixed(5)}}} = ${R.efd_calc.toFixed(6)} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Rupture limit (0.9\u03b5_fu)<\/div>\n \\\\( 0.9\\\\varepsilon_{fu} = 0.9 \\\\times ${R.efu.toFixed(6)} = ${R.efd_limit.toFixed(6)} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-result\">\u03b5<sub>fd<\/sub> = min(${R.efd_calc.toFixed(6)}, ${R.efd_limit.toFixed(6)}) = ${R.efd.toFixed(6)}<\/div>\n <\/div>\n <div class=\"calc-note\">${R.efd === R.efd_calc ? '\u2713 Debonding controls (\u03b5_fd < 0.9\u03b5_fu)' : '\u2713 Rupture strain controls'}<\/div>\n `);\n\n \/\/ Step 5\u20136\n html += stepBlock('5\u20136', 'Neutral Axis & Effective FRP Strain (ACI 440.2R-17 Eq. 10.2.5\u20136)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">Assumed c (input) vs computed c from equilibrium<\/div>\n c<sub>assumed<\/sub> = ${fmt(R.C_assume,4)} in  |  c<sub>calc<\/sub> = ${fmt(R.C_calc,4)} in\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">FRP effective strain (d<sub>f<\/sub>\u2212c = FRP depth \u2212 NA depth)<\/div>\n \\\\( \\\\varepsilon_{fe} = 0.003 \\\\frac{d_f - c}{c} - \\\\varepsilon_{bi} = 0.003 \\\\times \\\\frac{${fmt(R.d,3)}-${fmt(R.C_assume,4)}}{${fmt(R.C_assume,4)}} - ${R.ebi.toExponential(3)} = ${R.efe_raw.toFixed(6)} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-result\">\u03b5<sub>fe<\/sub> = min(${R.efe_raw.toFixed(6)}, \u03b5<sub>fd<\/sub>=${R.efd.toFixed(6)}) = ${R.efe.toFixed(6)} in\/in<\/div>\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Concrete strain at top (similar triangles)<\/div>\n \\\\( \\\\varepsilon_c = (\\\\varepsilon_{fe}+\\\\varepsilon_{bi}) \\\\frac{c}{d_f-c} = ${(R.efe+R.ebi).toFixed(6)} \\\\times \\\\frac{${fmt(R.C_assume,4)}}{${fmt(R.d-R.C_assume,4)}} = ${R.ec.toFixed(6)} \\\\)\n <\/div>\n `);\n\n \/\/ Step 7\u20138\n html += stepBlock('7\u20138', 'Steel & FRP Stresses (ACI 440.2R-17 Eq. 10.2.6, 10.2.10b)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">Steel strain (d<sub>s<\/sub>\u2212c = steel depth \u2212 NA; d<sub>f<\/sub>\u2212c = FRP depth \u2212 NA)<\/div>\n \\\\( \\\\varepsilon_s = (\\\\varepsilon_{fe}+\\\\varepsilon_{bi}) \\\\frac{d_s-c}{d_f-c} = ${(R.efe+R.ebi).toFixed(6)} \\\\times \\\\frac{${fmt(R.def_-R.C_assume,4)}}{${fmt(R.d-R.C_assume,4)}} = ${R.es.toFixed(6)} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Steel stress (capped at f<sub>y<\/sub>)<\/div>\n \\\\( f_s = E_s \\\\varepsilon_s = 29{,}000 \\\\times ${R.es.toFixed(6)} \\\\times 1000 = ${R.fs_calc.toFixed(0)} \\\\) psi \u2192 \\\\( f_s = \\\\min(${R.fs_calc.toFixed(0)}, ${R.fy.toFixed(0)}) = ${R.fs.toFixed(0)} \\\\) psi\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">FRP stress<\/div>\n \\\\( f_{fe} = E_f \\\\varepsilon_{fe} = ${R.Ef} \\\\times ${R.efe.toFixed(6)} = ${fmt(R.ffe,4)} \\\\) ksi\n <\/div>\n <div class=\"calc-note\">${R.fs >= R.fy ? '\u2713 Steel has yielded (\u03b5s \u2265 \u03b5y = ' + (R.fy\/29000000).toFixed(5) + ')' : '\u26a0 Steel elastic (\u03b5s < \u03b5y)'}<\/div>\n `);\n\n \/\/ Step 9\n html += stepBlock('9', 'Internal Force Equilibrium (ACI 440.2R-17 Eq. 10.3.1.6g)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">Peak concrete strain \u03b5'_c<\/div>\n \\\\( \\\\varepsilon'_c = 1.7f'_c\/E_c = 1.7 \\\\times ${R.fc.toFixed(0)} \/ ${R.Ec.toFixed(0)} = ${R.ec_prime.toFixed(6)} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Parabolic stress block factors<\/div>\n \\\\( \\\\beta_1 = \\\\frac{4\\\\varepsilon'_c - \\\\varepsilon_c}{6\\\\varepsilon'_c - 2\\\\varepsilon_c} = ${fmt(R.b1_stress,5)} \\\\quad \\\\alpha_1 = \\\\frac{3\\\\varepsilon'_c\\\\varepsilon_c - \\\\varepsilon_c^2}{3\\\\beta_1(\\\\varepsilon'_c)^2} = ${fmt(R.a1_stress,5)} \\\\)\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Computed neutral axis depth<\/div>\n \\\\( c = \\\\frac{A_s f_y + A_f f_{fe}}{\\\\alpha_1 f'_c \\\\beta_1 b} = \\\\frac{${fmt(R.As,4)} \\\\times ${(R.fy\/1000).toFixed(3)} + ${fmt(R.Af,5)} \\\\times ${fmt(R.ffe,4)}}{${fmt(R.a1_stress,4)} \\\\times ${(R.fc\/1000).toFixed(4)} \\\\times ${fmt(R.b1_stress,4)} \\\\times ${R.b}} = ${fmt(R.C_calc,4)} \\\\) in\n <\/div>\n ${Math.abs(R.C_calc - R.C_assume) < 0.01\n ? `<div class=\"check-row pass\">\u2713 Converged: c<sub>assumed<\/sub> = ${fmt(R.C_assume,4)} \u2248 c<sub>calc<\/sub> = ${fmt(R.C_calc,4)} in<\/div>`\n : `<div class=\"check-row fail\">\u26a0 Update assumed c to ${fmt(R.C_calc,4)} in to achieve convergence<\/div>`}\n `);\n\n \/\/ Step 10\u201311\n html += stepBlock('10\u201311', 'Flexural Strength Components (ACI 440.2R-17 Eq. 10.2.10d)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">Steel contribution \u2014 moment arm = d<sub>s<\/sub> \u2212 \u03b2\u2081c\/2 = ACI d<\/div>\n \\\\( M_{ns} = A_s f_s \\\\left(d_s - \\\\frac{\\\\beta_1 c}{2}\\\\right) = ${fmt(R.As,4)} \\\\times ${(R.fs\/1000).toFixed(3)} \\\\times \\\\left(${fmt(R.def_,3)} - \\\\frac{${fmt(R.b1_stress,4)} \\\\times ${fmt(R.C_assume,4)}}{2}\\\\right) \/ 12 = ${fmt(R.Mns,4)} \\\\) k-ft\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">FRP contribution \u2014 moment arm = d<sub>f<\/sub> \u2212 \u03b2\u2081c\/2 = ACI d<sub>f<\/sub><\/div>\n \\\\( M_{nf} = A_f f_{fe} \\\\left(d_f - \\\\frac{\\\\beta_1 c}{2}\\\\right) = ${fmt(R.Af,5)} \\\\times ${fmt(R.ffe,4)} \\\\times \\\\left(${fmt(R.d,3)} - \\\\frac{${fmt(R.b1_stress,4)} \\\\times ${fmt(R.C_assume,4)}}{2}\\\\right) \/ 12 = ${fmt(R.Mnf,4)} \\\\) k-ft\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Net tensile strain \u03b5t = \u03b5<sub>s<\/sub> = ${R.es.toFixed(5)} \u2192 \u03c6 = ${fmt(R.phi,4)}  |  \u03c8<sub>f<\/sub> = 0.85<\/div>\n \\\\( \\\\phi M_n = \\\\phi(M_{ns} + \\\\psi_f M_{nf}) = ${fmt(R.phi,4)} \\\\times (${fmt(R.Mns,4)} + 0.85 \\\\times ${fmt(R.Mnf,4)}) = ${fmt(R.phi_Mn,4)} \\\\) k-ft\n <\/div>\n ${R.phi_Mn >= R.Mu\n ? `<div class=\"check-row pass\">\u2713 ADEQUATE: \u03c6Mn = ${fmt(R.phi_Mn,3)} k-ft \u2265 Mu = ${fmt(R.Mu,3)} k-ft<\/div>`\n : `<div class=\"check-row fail\">\u2717 INADEQUATE: \u03c6Mn = ${fmt(R.phi_Mn,3)} k-ft < Mu = ${fmt(R.Mu,3)} k-ft<\/div>`}\n `);\n\n \/\/ Step 12\n html += stepBlock('12', 'Service Stress in Reinforcing Steel (ACI 440.2R-17 Eq. 10.2.10.1)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">Service moment M<sub>s<\/sub><\/div>\n \\\\( M_s = 1.1M_{DL} + 0.75M_{LL} = 1.1 \\\\times ${fmt(R.MDL,3)} + 0.75 \\\\times ${fmt(R.MLL,3)} = ${fmt(R.Ms,4)} \\\\) k-ft = ${fmt(R.Ms*12,3)} kip-in\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Service cracked NA factor k (both \u03c1<sub>s<\/sub> and \u03c1<sub>f<\/sub> referenced to d<sub>s<\/sub>)<\/div>\n \\\\( k = \\\\sqrt{\\\\left(\\\\rho_s n + \\\\rho_f n_f\\\\right)^2 + 2\\\\left(\\\\rho_s n + \\\\rho_f n_f \\\\frac{d_f}{d_s}\\\\right)} - \\\\left(\\\\rho_s n + \\\\rho_f n_f\\\\right) = ${fmt(R.k_s,5)} \\\\)\n <div style=\"font-size:0.72rem;color:var(--text-muted);margin-top:2px;\">\u03c1<sub>s<\/sub> = ${fmt(R.rho_s,6)}  |  \u03c1<sub>f<\/sub> = ${fmt(R.rho_f,6)}  |  n = ${fmt(R.ns_val,4)}  |  n<sub>f<\/sub> = ${fmt(R.nf_val,4)}  |  d<sub>f<\/sub>\/d<sub>s<\/sub> = ${fmt(R.df_ds,4)}<\/div>\n <\/div>\n <div class=\"formula-line\">\n \\\\( kd = ${fmt(R.k_s,5)} \\\\times ${fmt(R.def_,3)} = ${fmt(R.kdef,4)} \\\\) in\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Steel service stress (ACI Eq. 10.2.10.1)<\/div>\n \\\\( f_{s,s} = \\\\frac{\\\\left[M_s + \\\\varepsilon_{bi}A_f E_f\\\\left(d_f - \\\\frac{kd}{3}\\\\right)\\\\right](d_s-kd)E_s}{A_s E_s\\\\left(d_s-\\\\frac{kd}{3}\\\\right)(d_s-kd) + A_f E_f\\\\left(d_f-\\\\frac{kd}{3}\\\\right)(d_f-kd)} = ${fmt(R.fss,4)} \\\\) ksi\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-result\">f<sub>s,s<\/sub> = ${fmt(R.fss,4)} ksi  |  Limit 0.8f<sub>y<\/sub> = ${fmt(R.limit_fss,3)} ksi<\/div>\n <\/div>\n ${R.fss <= R.limit_fss\n ? `<div class=\"check-row pass\">\u2713 PASS: f<sub>s,s<\/sub> = ${fmt(R.fss,3)} ksi \u2264 0.8f<sub>y<\/sub> = ${fmt(R.limit_fss,3)} ksi<\/div>`\n : `<div class=\"check-row fail\">\u2717 FAIL: f<sub>s,s<\/sub> = ${fmt(R.fss,3)} ksi > 0.8f<sub>y<\/sub> = ${fmt(R.limit_fss,3)} ksi<\/div>`}\n `);\n\n \/\/ Step 13\n html += stepBlock('13', 'Creep-Rupture & Fatigue Stress Limit (ACI 440.2R-17 Table 10.2.9)', `\n <div class=\"formula-line\">\n <div class=\"formula-label\">FRP service stress (ACI Eq. 10.2.10.2)<\/div>\n \\\\( f_{f,s} = f_{s,s}\\\\frac{E_f}{E_s}\\\\frac{d_f-kd}{d_s-kd} - \\\\varepsilon_{bi}E_f = ${fmt(R.fss,4)} \\\\times \\\\frac{${fmt(R.Ef,0)}}{29000} \\\\times \\\\frac{${fmt(R.d-R.kdef,4)}}{${fmt(R.def_-R.kdef,4)}} - ${R.ebi.toExponential(4)} \\\\times ${R.Ef} = ${fmt(R.ffs_val,4)} \\\\) ksi\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-label\">Creep-rupture limit for CFRP (0.55f<sub>fu<\/sub>)<\/div>\n \\\\( 0.55f_{fu} = 0.55 \\\\times ${fmt(R.ffu,2)} = ${fmt(R.limit_ffs,4)} \\\\) ksi\n <\/div>\n ${R.ffs_val <= R.limit_ffs\n ? `<div class=\"check-row pass\">\u2713 PASS: f<sub>f,s<\/sub> = ${fmt(R.ffs_val,4)} ksi \u2264 0.55f<sub>fu<\/sub> = ${fmt(R.limit_ffs,3)} ksi<\/div>`\n : `<div class=\"check-row fail\">\u2717 FAIL: f<sub>f,s<\/sub> = ${fmt(R.ffs_val,4)} ksi > 0.55f<sub>fu<\/sub> = ${fmt(R.limit_ffs,3)} ksi<\/div>`}\n `);\n\n \/\/ Step 14\n html += stepBlock('14', 'Development Length of CFRP (ACI 440.2R-17 Eq. 14.1.3)', `\n <div class=\"formula-line\">\n \\\\( L_{df} = 0.057\\\\sqrt{\\\\frac{n_i E_f t_f}{\\\\sqrt{f'_c}}} = 0.057\\\\sqrt{\\\\frac{${R.ni} \\\\times ${(R.Ef*1000).toFixed(0)} \\\\times ${R.tf.toFixed(5)}}{\\\\sqrt{${R.fc.toFixed(0)}}}} = ${fmt(R.Ldf,3)} \\\\) in\n <\/div>\n <div class=\"formula-line\">\n <div class=\"formula-result\">L<sub>df<\/sub> = ${fmt(R.Ldf,3)} in = ${fmt(R.Ldf\/12,3)} ft<\/div>\n <\/div>\n `);\n\n \/\/ Summary Table\n html += `\n <div style=\"margin-top:1.2rem;border:1px solid var(--border);border-radius:6px;overflow:hidden;\">\n <div style=\"background:#f0f4fa;padding:0.6rem 1rem;font-size:0.8rem;font-weight:700;color:var(--primary);border-bottom:1px solid var(--border);\">Design Check Summary<\/div>\n <table style=\"width:100%;border-collapse:collapse;font-size:0.8rem;\">\n <thead><tr style=\"background:#f8f9ff;\">\n <th style=\"padding:6px 10px;text-align:left;color:var(--text-muted);font-weight:600;font-size:0.72rem;text-transform:uppercase;\">Check<\/th>\n <th style=\"padding:6px 10px;text-align:right;color:var(--text-muted);font-weight:600;font-size:0.72rem;text-transform:uppercase;\">Computed<\/th>\n <th style=\"padding:6px 10px;text-align:right;color:var(--text-muted);font-weight:600;font-size:0.72rem;text-transform:uppercase;\">Limit<\/th>\n <th style=\"padding:6px 10px;text-align:center;color:var(--text-muted);font-weight:600;font-size:0.72rem;text-transform:uppercase;\">Status<\/th>\n <\/tr><\/thead>\n <tbody>\n ${summaryRow('Moment Capacity (\u03c6Mn \u2265 Mu)', `${fmt(R.phi_Mn,3)} k-ft`, `${fmt(R.Mu,3)} k-ft (Mu)`, R.phi_Mn >= R.Mu)}\n ${summaryRow('Unstrengthened Limit (1.1DL+0.75LL)', `${fmt(R.unstrengthLimit,3)} k-ft`, `${fmt(R.phi_Mn_exist,3)} k-ft (\u03c6Mn,exist)`, R.unstrengthLimit <= R.phi_Mn_exist)}\n ${summaryRow('Steel Service Stress (fs,s)', `${fmt(R.fss,3)} ksi`, `${fmt(R.limit_fss,3)} ksi (0.8fy)`, R.fss <= R.limit_fss)}\n ${summaryRow('FRP Creep-Rupture (ff,s)', `${fmt(R.ffs_val,3)} ksi`, `${fmt(R.limit_ffs,3)} ksi (0.55ffu)`, R.ffs_val <= R.limit_ffs)}\n <\/tbody>\n <\/table>\n <\/div>`;\n\n if (!reportUnlocked) return; \/\/ Don't render until password is entered\n document.getElementById('reportContent').innerHTML = html;\n if (window.MathJax) {\n MathJax.typesetPromise([document.getElementById('reportContent')]).catch(e => console.log(e));\n }\n}\n\nfunction summaryRow(name, comp, limit, pass) {\n return `<tr style=\"border-top:1px solid var(--border);\">\n <td style=\"padding:7px 10px;\">${name}<\/td>\n <td style=\"padding:7px 10px;text-align:right;font-family:'IBM Plex Mono',monospace;\">${comp}<\/td>\n <td style=\"padding:7px 10px;text-align:right;font-family:'IBM Plex Mono',monospace;\">${limit}<\/td>\n <td style=\"padding:7px 10px;text-align:center;\">\n <span style=\"display:inline-flex;align-items:center;gap:4px;padding:2px 10px;border-radius:10px;font-size:0.72rem;font-weight:700;\n background:${pass ? '#e8f5e9' : '#ffebee'};color:${pass ? 'var(--success)' : 'var(--danger)'};\">\n ${pass ? '\u2713 PASS' : '\u2717 FAIL'}\n <\/span>\n <\/td>\n <\/tr>`;\n}\n\nfunction stepBlock(num, title, body) {\n return `\n <div class=\"step-block\">\n <div class=\"step-head\">\n <span class=\"step-badge\">Step ${num}<\/span>\n ${title}\n <\/div>\n <div class=\"step-body\">${body}<\/div>\n <\/div>`;\n}\n\nfunction updateReport() { if (lastValues) calculate(); }\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ PDF EXPORT\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nfunction exportPDF() {\n const el = document.getElementById('rightPanel');\n const opt = {\n margin: [10, 10, 10, 10],\n filename: 'CFRP_Retrofitting_Report_ACI440.pdf',\n image: { type: 'jpeg', quality: 0.98 },\n html2canvas: { scale: 2, useCORS: true, logging: false },\n jsPDF: { unit: 'mm', format: 'a4', orientation: 'portrait' },\n pagebreak: { mode: ['avoid-all', 'css', 'legacy'] }\n };\n const header = document.createElement('div');\n header.id = 'pdfHeader';\n header.style.cssText = 'padding:1rem;background:#0f4c81;color:white;border-radius:8px;margin-bottom:1rem;';\n header.innerHTML = `\n <div style=\"font-size:1.2rem;font-weight:700;\">CFRP Beam Retrofitting Design Report<\/div>\n <div style=\"font-size:0.85rem;opacity:0.8;margin-top:4px;\">ACI 440.2R-17 \u00b7 Generated: ${new Date().toLocaleDateString('en-US',{year:'numeric',month:'long',day:'numeric'})}<\/div>\n <div style=\"font-size:0.8rem;opacity:0.7;margin-top:2px;\">Location: ${document.getElementById('projLocation').value} | Floor: ${document.getElementById('projFloor').value}<\/div>`;\n el.insertBefore(header, el.firstChild);\n html2pdf().set(opt).from(el).save().then(() => {\n document.getElementById('pdfHeader').remove();\n });\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ REPORT PASSWORD PROTECTION\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nconst REPORT_PASSWORD = '1050';\nlet reportUnlocked = false;\n\nfunction unlockReport() {\n const input = document.getElementById('reportPasswordInput');\n const errEl = document.getElementById('reportPasswordError');\n if (input.value === REPORT_PASSWORD) {\n reportUnlocked = true;\n document.getElementById('reportPasswordGate').style.display = 'none';\n document.getElementById('reportContent').style.display = 'block';\n errEl.style.display = 'none';\n if (lastValues) calculate();\n } else {\n errEl.style.display = 'block';\n input.value = '';\n input.focus();\n input.style.borderColor = 'var(--danger)';\n setTimeout(() => { input.style.borderColor = 'var(--border)'; }, 1200);\n }\n}\n\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n\/\/ INIT\n\/\/ \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\nwindow.addEventListener('load', () => { calculate(); });\n<\/script>\n<\/body>\n<\/html>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t\t<details id=\"e-n-accordion-item-1872\" class=\"e-n-accordion-item\" >\n\t\t\t\t<summary class=\"e-n-accordion-item-title\" data-accordion-index=\"3\" tabindex=\"-1\" aria-expanded=\"false\" aria-controls=\"e-n-accordion-item-1872\" >\n\t\t\t\t\t<span class='e-n-accordion-item-title-header'><div class=\"e-n-accordion-item-title-text\"> Item #3 <\/div><\/span>\n\t\t\t\t\t\t\t<span class='e-n-accordion-item-title-icon'>\n\t\t\t<span class='e-opened' ><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-minus\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z\"><\/path><\/svg><\/span>\n\t\t\t<span class='e-closed'><svg aria-hidden=\"true\" class=\"e-font-icon-svg e-fas-calculator\" viewBox=\"0 0 448 512\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path d=\"M400 0H48C22.4 0 0 22.4 0 48v416c0 25.6 22.4 48 48 48h352c25.6 0 48-22.4 48-48V48c0-25.6-22.4-48-48-48zM128 435.2c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm0-128c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm128 128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm0-128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8v-38.4c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v38.4zm128 128c0 6.4-6.4 12.8-12.8 12.8h-38.4c-6.4 0-12.8-6.4-12.8-12.8V268.8c0-6.4 6.4-12.8 12.8-12.8h38.4c6.4 0 12.8 6.4 12.8 12.8v166.4zm0-256c0 6.4-6.4 12.8-12.8 12.8H76.8c-6.4 0-12.8-6.4-12.8-12.8V76.8C64 70.4 70.4 64 76.8 64h294.4c6.4 0 12.8 6.4 12.8 12.8v102.4z\"><\/path><\/svg><\/span>\n\t\t<\/span>\n\n\t\t\t\t\t\t<\/summary>\n\t\t\t\t<div role=\"region\" aria-labelledby=\"e-n-accordion-item-1872\" class=\"elementor-element elementor-element-90b3cda e-con-full e-flex e-con e-child\" data-id=\"90b3cda\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/details>\n\t\t\t\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p> Design Tools Flexural Design of Isolated Footing Square Footing Design | ACI 318-19 SQUARE FOOTING DESIGN \u00b7 ACI 318-19 REINFORCED CONCRETE \u00b7 FLEXURE \u00b7 SHEAR \u00b7 REBAR Imperial SI FLEXURE SHEAR REBAR Column \/ Pedestal Column LengthSquare column in Column Width in Loading Factored Load Pu1.2DL + 1.6LL kip Soil & Site Allowable Bearingq\u2090 ksf […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1581","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.studiocko.com\/index.php?rest_route=\/wp\/v2\/pages\/1581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.studiocko.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.studiocko.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.studiocko.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.studiocko.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1581"}],"version-history":[{"count":27,"href":"https:\/\/www.studiocko.com\/index.php?rest_route=\/wp\/v2\/pages\/1581\/revisions"}],"predecessor-version":[{"id":1631,"href":"https:\/\/www.studiocko.com\/index.php?rest_route=\/wp\/v2\/pages\/1581\/revisions\/1631"}],"wp:attachment":[{"href":"https:\/\/www.studiocko.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}