/* STATIX SHEET LAYOUT - the shared "engineer's sheet" frame (statix-sheetlayout.js). Colours and faces from calculator-theme.css
   (body.stx-calc-theme --stx-* tokens, with the same values as fallbacks). Layout only. 7 Oct 2026. */
.stx-sl,.stx-warn-dlg{--sx-ink:var(--stx-ink,#123a38);--sx-muted:var(--stx-muted,#5e7c78);--sx-faint:var(--stx-faint,#90a8a3);--sx-line:var(--stx-border,#c3dad3);
  --sx-line2:var(--stx-border-soft,#dce8e5);--sx-panel:var(--stx-panel,#fff);--sx-soft:var(--stx-panel-soft,#e9f3ef);--sx-teal:var(--stx-teal,#1c9c8e);
  --sx-deep:var(--stx-teal-deep,#14796e);--sx-good:var(--stx-good,#2e8b57);--sx-warn:var(--stx-warn,#c58a1e);--sx-bad:var(--stx-bad,#ce5a40);
  --sx-mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace;--sx-r:var(--stx-radius,10px)}
.stx-sl{margin:0 0 28px}
.stx-sp{flex:1 1 auto}
/* ---- buttons */
.stx-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:7px 14px;border:1px solid var(--sx-line);border-radius:8px;
  background:#fff;color:var(--sx-ink);font-family:inherit;font-weight:600;font-size:13.5px;line-height:1.1;cursor:pointer;text-decoration:none;white-space:nowrap}
.stx-btn:hover{border-color:var(--sx-teal);text-decoration:none}
.stx-btn:disabled{opacity:.45;cursor:default}
.stx-btn-p{background:var(--sx-deep);border-color:var(--sx-deep);color:#fff}
.stx-btn-p:hover{filter:brightness(1.08)}
.stx-btn-q{border-color:transparent;background:transparent;color:var(--sx-muted)}
.stx-btn-s{min-height:30px;padding:4px 11px;font-size:12.5px}
.stx-btn svg{width:15px;height:15px;flex:0 0 auto}
.stx-linkbtn{border:0;background:none;padding:0;font-family:inherit;font-weight:600;font-size:12.5px;line-height:1.2;color:var(--sx-deep);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.stx-flash{outline:3px solid var(--sx-teal);outline-offset:2px;transition:outline-color .3s}

/* ---- the input band: groups of cells, each value edited in place */
.stx-band{background:var(--sx-panel);border:1px solid var(--sx-line);border-radius:var(--sx-r);padding:10px 14px 8px;box-shadow:0 1px 2px rgba(18,58,56,.05)}
.stx-cells{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px 0}
.stx-cg{display:flex;align-items:stretch;padding:0 10px;border-left:1px solid var(--sx-line2);min-width:0}
.stx-cg:first-child{border-left:0;padding-left:0}
.stx-gn{writing-mode:vertical-rl;transform:rotate(180deg);font-family:inherit;font-weight:700;font-size:9.5px;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--sx-deep);margin-right:6px;text-align:center;white-space:nowrap}
.stx-cell{display:flex;flex-direction:column;justify-content:flex-end;padding:0 6px;min-width:0}
.stx-cell[style*="display:none"],.stx-cell[style*="display: none"]{display:none!important}
.stx-cl{font-size:10.5px;line-height:1.3;color:var(--sx-muted);white-space:nowrap;margin:0 0 1px;font-weight:500}
.stx-cl small{font-size:9.5px;color:var(--sx-faint)}
.stx-cv{display:flex;align-items:baseline;gap:3px;white-space:nowrap}
.stx-cv u{text-decoration:none;font:11px/1 var(--sx-mono);color:var(--sx-muted)}
.stx-band input,.stx-band select{font:500 15px/1.25 var(--sx-mono);color:var(--sx-ink);background:transparent;border:0;border-bottom:1.5px solid var(--sx-line);border-radius:0;
  padding:2px 1px 1px;margin:0;width:62px;min-height:0;text-align:right;box-shadow:none;outline:none}
.stx-band select{font-family:inherit;font-weight:500;font-size:13.5px;line-height:1.25;text-align:left;width:auto;max-width:180px;padding-right:2px;cursor:pointer}
.stx-band input[type=text]{text-align:left}
.stx-band input:hover,.stx-band select:hover{border-bottom-color:var(--sx-teal)}
.stx-band input:focus,.stx-band select:focus{border-bottom-color:var(--sx-deep);background:#f1f8f5}
.stx-band .codepick{width:auto!important;font-weight:600}
.stx-w-name input{width:16ch;min-width:9ch;max-width:min(240px,100%);field-sizing:content}   /* Detailing H8 (14 Oct 2026): 100px cut "Frame beam B1" to "Frame bea"; grows with the name */
.stx-w-n input{width:70px}
.stx-w-shape select{max-width:150px}
.stx-w-dur select{max-width:190px}
.stx-cell.stx-empty select{color:var(--sx-warn);border-bottom-style:dashed;border-bottom-color:var(--sx-warn)}
.stx-ro .stx-cv{font:600 14px/1.25 var(--sx-mono);color:var(--sx-ink);padding:2px 0 2px}
.stx-addbtn{border:0;border-bottom:1.5px dashed var(--sx-teal);background:none;padding:2px 0 1px;font-family:inherit;font-weight:600;font-size:12.5px;line-height:1.25;color:var(--sx-deep);cursor:pointer;white-space:nowrap}
.stx-addbtn:hover{border-bottom-style:solid}
.stx-cg-more{border-left:0;margin-left:auto;align-items:flex-end;padding-right:0}
.stx-morebtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--sx-line);border-radius:8px;background:#fff;padding:6px 11px;font-family:inherit;font-weight:600;font-size:13px;line-height:1.1;color:var(--sx-ink);cursor:pointer;white-space:nowrap}
.stx-morebtn svg{width:12px;height:12px;transition:transform .15s}
.stx-morebtn.on{background:var(--sx-soft);border-color:var(--sx-teal)}
.stx-morebtn.on svg{transform:rotate(180deg)}
.stx-dr-n{display:inline-flex;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--sx-deep);color:#fff;font:700 11px/18px var(--sx-mono);justify-content:center}
.stx-dr-n[hidden]{display:none}
/* the drawer: the less-used inputs */
.stx-drawer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:6px 28px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--sx-line)}
.stx-drawer[hidden]{display:none}
.stx-dh{font-family:inherit;font-weight:700;font-size:10.5px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase;color:var(--sx-deep);margin:0 0 6px}
.stx-drow{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px solid #eef4f2}
.stx-drow[style*="display:none"]{display:none!important}
.stx-drow label{font-size:13px;color:var(--sx-ink)}
.stx-drow label small{display:block;font-size:11px;color:var(--sx-muted)}
.stx-drow .stx-cv{gap:8px}
.stx-drawer .flag{font-size:12px;line-height:1.4;color:var(--sx-muted);margin:0 0 6px;padding:0;background:none;border:0}
.stx-cases{border-collapse:collapse;font-size:12.5px}
.stx-cases th{font-weight:600;color:var(--sx-muted);text-align:left;padding:3px 10px 3px 0;font-size:11.5px;white-space:nowrap}
.stx-cases thead th{text-align:right}
.stx-cases th u{text-decoration:none;font:10.5px var(--sx-mono)}
.stx-cases td{padding:3px 8px 3px 0}
.stx-cases input{width:64px}
.stx-dnote{font-size:11px;color:var(--sx-muted);margin-top:4px}

/* ---- the body: drawings left, checks right */
.stx-sl-body{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:14px;margin-top:12px;align-items:start}
.stx-sl-left,.stx-sl-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.stx-sl-body .card,.stx-sl-out .card{margin:0}
.stx-sl .card h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.stx-sl .card h2 .peaktag{font-size:11px;font-family:var(--sx-mono);text-transform:none;letter-spacing:0;color:var(--sx-muted);font-weight:500}
body.stx-calc-pending .stx-sl-body{opacity:.6;transition:opacity .15s}
.stx-sl-out{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.stx-sl-out .combined{margin:0}

/* ---- a 2-way view switch */
.stx-seg{display:inline-flex;border:1px solid var(--sx-line);border-radius:8px;overflow:hidden}
.stx-seg button{border:0;background:#fff;padding:5px 12px;font-family:inherit;font-weight:600;font-size:12px;line-height:1.2;color:var(--sx-muted);cursor:pointer}
.stx-seg button+button{border-left:1px solid var(--sx-line)}
.stx-seg button.on{background:var(--sx-deep);color:#fff}

/* ---- the verdict bar: always on screen */
.stx-vbar{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;border-top:1px solid var(--sx-line);box-shadow:0 -6px 18px rgba(18,58,56,.07)}
.stx-vb-in{max-width:1880px;margin:0 auto;padding:9px 24px;display:flex;align-items:center;gap:16px;min-height:62px}
.stx-vb-vv{display:flex;align-items:baseline;gap:10px;flex:0 0 auto}
.stx-vb-v{font:700 30px/1 'Fraunces',Georgia,serif;color:var(--sx-muted)}
.stx-vb-ok .stx-vb-v{color:var(--sx-good)}.stx-vb-bad .stx-vb-v{color:var(--sx-bad)}
.stx-vb-u{font:700 24px/1 var(--sx-mono);color:var(--sx-good)}
.stx-vb-gg{min-width:0;flex:0 1 auto;display:flex;flex-direction:column;gap:2px;font-size:13px;color:var(--sx-muted)}
.stx-vb-gg b{color:var(--sx-ink)}
.stx-vb-gl,.stx-vb-c{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stx-vb-c{font:11.5px/1.3 var(--sx-mono);color:var(--sx-muted)}
.stx-vb-fix{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;padding:6px 6px 6px 12px;border:1px solid var(--sx-line2);border-radius:10px;background:#fafdfc;font-size:13px}
.stx-vb-fix[hidden]{display:none}
.stx-vb-bad .stx-vb-fix{border-color:var(--sx-teal);box-shadow:0 0 0 2px rgba(28,156,142,.12)}
.stx-vf-t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.stx-vf-u{font:700 12px/1 var(--sx-mono);color:var(--sx-good);white-space:nowrap}
.stx-vb-acts{display:flex;gap:8px;align-items:center;flex:0 0 auto}
/* App 22 Oct (RC beam at 1024 px): the actions squeezed the governing text to a 16 px column 6 lines tall and cut 'Find fixes';
   the text keeps 240 px on one line and the actions wrap to a second row when the bar is too narrow */
.stx-vb-in{flex-wrap:wrap;row-gap:8px}
.stx-vb-gg{min-width:240px}
.stx-vb-gg>*{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.stx-vb-fix .stx-btn,.stx-vb-fix button{flex-shrink:0;white-space:nowrap}
html.stx-has-vbar body{padding-bottom:84px}
html.stx-has-vbar #stx-mchip{display:none!important}
html.stx-has-vbar #stx-notice{bottom:calc(var(--stx-vbar-h,84px) + 12px)!important}

/* ---- the failing-design dialog */
.stx-warn-dlg{position:fixed;inset:0;z-index:200;background:rgba(15,61,49,.38);display:flex;align-items:center;justify-content:center;padding:16px}
.stx-warn-dlg[hidden]{display:none}
.stx-warn-box{background:#fff;border-radius:12px;max-width:460px;width:100%;padding:20px 22px;box-shadow:0 20px 60px rgba(0,0,0,.25);border-top:4px solid var(--stx-bad,#ce5a40)}
.stx-warn-h{font-weight:800;font-size:18px;color:#9e3a24;margin-bottom:6px}
.stx-warn-p,.stx-warn-n{font-size:14px;line-height:1.5;margin:0 0 8px;color:var(--stx-ink,#123a38)}
.stx-warn-b{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}

/* ---- print: the frame hidden; the stamp of a failing design */
.stx-nfc,.stx-nfc-line{display:none}
@media print{
  .stx-band,.stx-vbar,.stx-warn-dlg,.stx-failbar{display:none!important}
  html.stx-has-vbar body{padding-bottom:0!important}
  html.sx-printing #sx-print .stx-nfc-page{position:relative!important}
  html.sx-printing #sx-print .stx-nfc{display:block!important;position:absolute;left:0;right:0;top:38%;text-align:center;transform:rotate(-18deg);
    font:900 60px/1 Arial,Helvetica,sans-serif;letter-spacing:.06em;color:rgba(206,63,46,.28);z-index:5;pointer-events:none;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  html.sx-printing #sx-print .stx-nfc.stx-nfc-fixed{position:fixed;top:42%}
  html.sx-printing #sx-print .stx-nfc-line{display:block!important;border:2px solid #ce3f2e;color:#ce3f2e;font:800 12pt/1.3 Arial,Helvetica,sans-serif;
    padding:6px 10px;margin:0 0 8px;text-align:center;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===================================================================== shared pieces of an engineer's-sheet page */
.stx-wide.wrap{max-width:1880px}
.stx-hero{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;padding:12px 0 2px!important}
.stx-hero h1{font-size:25px!important;margin:0!important}
.stx-hero .sub{flex:1 1 420px;font-size:13.5px!important;color:var(--stx-muted,#5e7c78);margin:0!important}
.stx-hero .stx-hero-r{display:flex;align-items:center;flex-wrap:wrap}
.stx-hero .badge{margin-top:0!important;font-size:12px!important;padding:5px 11px!important}
.stx-slpage .beambar{margin:6px 0 8px!important}
/* the fail bar */
.stx-failbar{display:flex;gap:10px 12px;align-items:center;flex-wrap:wrap;padding:10px 14px;margin:12px 0 0;border:1px solid #ecc1b6;border-radius:var(--sx-r);background:#fdf1ed;color:#7d2b19;font-size:13.5px;line-height:1.45}
.stx-failbar[hidden]{display:none}
.stx-fb-ic{width:22px;height:22px;flex:0 0 auto;color:var(--sx-bad)}
.stx-fb-t{flex:1 1 420px;min-width:0}.stx-fb-t b{color:#9e2f18}
.stx-fb-b{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.stx-fb-b .stx-btn{min-height:34px;font-size:13px}
/* the drawings */
.stx-views{padding:4px 14px 12px}
.stx-views[data-view="sec"] .stx-view[data-v="3d"],.stx-views[data-view="3d"] .stx-view[data-v="sec"]{display:none}
.stx-vlab{font-family:inherit;font-weight:700;font-size:10.5px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--sx-muted);padding:4px 4px 2px}
.stx-vlab .peaktag{text-transform:none;letter-spacing:0;font-weight:500;margin-left:6px}
.stx-secbig{width:100%;height:auto;max-height:470px;display:block}
.stx-secmini{width:120px;height:auto;margin-left:auto;flex:0 0 auto}
.stx-view[data-v="3d"] svg{width:100%;height:auto;max-height:470px;display:block}
.stx-nmcard svg.diagram{max-height:300px;padding:0 6px 4px}
.stx-nmcard .dethint{padding-top:0}
/* paid: the server detail drawing replaces the simple sketch; free: the sketch first, the locked card under it */
.stx-sl[data-tier="paid"] #stxDraw{display:none}
.stx-sl[data-tier="paid"] #stxBarsEdit{color:var(--sx-deep)}
.stx-sl:not([data-tier="paid"]) #stxBarsEdit{color:var(--sx-muted);border-bottom-color:var(--sx-faint)}
/* the checks table */
.stx-ctwrap{overflow-x:auto}
table.stx-ct{width:100%;border-collapse:collapse;font-size:12.5px;table-layout:fixed}
.stx-ct col.c-n{width:27%}.stx-ct col.c-cl{width:176px}.stx-ct col.c-dc{width:auto}.stx-ct col.c-u{width:74px}.stx-ct col.c-p{width:46px}.stx-ct col.c-r{width:112px}
.stx-ct th{font-family:inherit;font-weight:700;font-size:10px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted);text-align:left;padding:6px 8px;border-bottom:1px solid var(--sx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stx-ct td{padding:6px 8px;border-bottom:1px solid #eef4f2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.stx-ct td.n{font-weight:600;color:var(--sx-ink)}
.stx-ct td.cl,.stx-ct td.dc{font:11.5px/1.3 var(--sx-mono);color:var(--sx-muted)}
table.stx-ct td.cl{white-space:normal;overflow-wrap:anywhere;text-overflow:clip}   /* a long clause (several clauses / tables) wraps instead of being cut */
.stx-ct td.p{font:700 12px/1 var(--sx-mono);text-align:right;padding-left:0}
.stx-ct td.r{text-align:left}
.stx-ct td.stx-wait{color:var(--sx-muted);white-space:normal}
.stx-ct tr.gov td{background:#f1f8f5}
.stx-ct tr.fail td{background:#fdf1ed}.stx-ct tr.fail td.p{color:#b1321f}
.stx-ub{height:7px;border-radius:4px;background:#e7efed;overflow:hidden}
.stx-ub i{display:block;height:100%;border-radius:4px;background:var(--sx-teal)}
.stx-ub i.warn{background:var(--sx-warn)}.stx-ub i.bad{background:var(--sx-bad)}
.stx-pill{display:inline-block;font:700 10.5px/1 var(--sx-mono);letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:5px;border:0;white-space:nowrap}
.stx-pill.ok{background:rgba(46,139,87,.13);color:#256b45}
.stx-pill.bad{background:rgba(206,90,64,.15);color:#a53f28}
.stx-pill.info{background:#eef4f2;color:var(--sx-muted)}
.stx-pill.nc{background:rgba(197,138,30,.15);color:#8a6414;cursor:pointer;font-family:var(--sx-mono)}
.stx-pill.nc:hover{background:rgba(197,138,30,.25)}
.stx-pill.na{background:#f3f6f5;color:#8a9c99}
.stx-vb-bad .stx-vb-u{color:var(--sx-bad)}.stx-vb-none .stx-vb-u{color:var(--sx-warn)}
.stx-chkdet{padding:2px 14px 6px;font-size:12.5px;color:var(--sx-muted)}
.stx-chkdet+.stx-chkdet{padding-top:0}
.stx-chkdet summary{cursor:pointer;padding:6px 0}
.stx-chkdet .checks{padding:0!important}
.stx-chkdet .verdict{padding:8px 0;border-bottom:0}
.stx-chkdet table.res td{padding:5px 0}
/* options (fix / lighter), each one the engine's own answer */
.stx-fixes{padding:4px 14px 14px;display:flex;flex-direction:column;gap:8px}
.stx-opt{display:flex;align-items:center;gap:10px;padding:8px 12px;border:1px solid var(--sx-line2);border-radius:8px;background:#fff}
.stx-opt-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.stx-opt-l b{font-size:13.5px}.stx-opt-l span{font:11.5px/1.3 var(--sx-mono);color:var(--sx-muted)}
.stx-opt-u{font:700 12px/1 var(--sx-mono);color:var(--sx-good);white-space:nowrap}
.stx-opt .stx-btn{min-height:32px;padding:5px 12px;font-size:12.5px}
.stx-opt.stx-head{background:var(--sx-soft);border-color:transparent}
.stx-opt.stx-undo{background:#fffaf0;border-color:#f0dcb2}
.stx-fix-card.stx-fixing{border-color:#e7b8ab}
/* the compact schedule card */
.stx-marks{padding:4px 14px 2px}
table.stx-mt{width:100%;border-collapse:collapse;font:12.5px/1.3 var(--sx-mono)}
.stx-mt th{font-family:inherit;font-weight:700;font-size:10px;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:var(--sx-muted);text-align:left;padding:5px 6px;border-bottom:1px solid var(--sx-line)}
.stx-mt td{padding:5px 6px;border-bottom:1px solid #eef4f2}
.stx-mt .nr{text-align:right}.stx-mt td.mk{font-weight:700}
.stx-mk.more{font-size:12px;color:var(--sx-muted);padding:4px 6px}
.stx-dl{display:flex;gap:8px;padding:10px 14px 14px;flex-wrap:wrap;align-items:center}
.stx-dlnote{font-size:11.5px;color:var(--sx-muted)}
.stx-dlnote:empty{display:none}
.stx-dlbtns{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap;margin-left:auto}
.stx-dlbtns .stx-btn{text-transform:none;letter-spacing:0;font-family:inherit}
.sx-band.stx-flash{outline:3px solid var(--sx-teal);outline-offset:2px}

/* ---- 1500 and below: the clause / demand columns and the bar texts shorter */
@media (max-width:1500px){
  .stx-hero .sub{display:none}
  .stx-vb-c{max-width:280px}
  .stx-vf-t{max-width:300px}
}
@media (max-width:1400px){
  .stx-ct col.c-dc,.stx-ct th.dc,.stx-ct td.dc{display:none}
  .stx-ct col.c-n{width:36%}.stx-ct col.c-cl{width:auto}
  .stx-cg{padding:0 7px}.stx-cell{padding:0 5px}
  .stx-vb-in{gap:12px;padding:8px 16px}
  .stx-vb-v{font-size:26px}.stx-vb-u{font-size:20px}
  .stx-vf-t{max-width:190px}
  .stx-vb-gl{max-width:260px}
}
@media (max-width:1100px){
  .stx-sl-body{grid-template-columns:minmax(0,1fr)}
  .stx-drawer{grid-template-columns:minmax(0,1fr)}
  .stx-vb-c{display:none}
}
@media (max-width:900px){
  .stx-vb-fix{display:none!important}
}
/* ---- phones: the band as a 2-column form, the verdict bar compact */
@media (max-width:760px){
  .stx-hero h1{font-size:21px!important}
  .stx-band{padding:10px 12px}
  .stx-cells{display:block}
  .stx-cg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;padding:8px 0;border-left:0;border-top:1px solid var(--sx-line2)}
  .stx-cg:first-child{border-top:0;padding-top:0}
  .stx-gn{writing-mode:horizontal-tb;transform:none;grid-column:1/-1;text-align:left;margin:0}
  .stx-cell{padding:0}
  .stx-cl{white-space:normal}
  .stx-band input,.stx-band select{font-size:16px;width:100%;max-width:none;min-height:34px}
  .stx-cv{width:100%}
  .stx-cv input{flex:1 1 auto;min-width:0}
  .stx-cg-more{display:block;padding-top:10px}
  .stx-morebtn{width:100%;justify-content:center;min-height:40px}
  .stx-drow{flex-wrap:wrap}
  .stx-drow .stx-cv{width:100%}
  .stx-cases{width:100%}.stx-cases input{width:100%;min-width:0}
  /* fixed layout gave % / Result the hidden columns' 0 widths: only the check name showed */
  table.stx-ct{table-layout:auto;width:100%}.stx-ct colgroup{display:none}
  .stx-ct col.c-n{width:auto}.stx-ct col.c-cl,.stx-ct col.c-u{width:0}.stx-ct col.c-p{width:44px}.stx-ct col.c-r{width:96px}
  .stx-ct th:nth-child(2),.stx-ct td.cl,.stx-ct th:nth-child(4),.stx-ct td.u{display:none}
  .stx-band .codepick{width:100%!important}
  .stx-vb-in{padding:8px 12px;gap:10px;min-height:54px}
  .stx-vb-v{font-size:22px}.stx-vb-u{font-size:17px}
  .stx-vb-gg{flex:1 1 auto;font-size:12px}
  .stx-vb-acts .stx-dl-csv{display:none}
  .stx-vb-acts .stx-btn{min-height:36px;padding:6px 10px;font-size:12.5px}
  html.stx-has-vbar body{padding-bottom:70px}
  .stx-sl .card h2 .peaktag{display:block;width:100%}
  .stx-opt{flex-wrap:wrap}
  html.stx-has-vbar .titlebar{position:static!important}
  html.stx-has-vbar .titlebar nav a:not(:first-child){display:none}
  html.stx-has-vbar .titlebar nav{margin-left:auto;gap:12px}
  html.stx-has-vbar .stx-hero .badge{display:none!important}
  html.stx-has-vbar .stx-hero .stx-learn{margin:2px 0 0!important}
}
@media (max-width:420px){
  .stx-vb-gl{display:none}
  .stx-vb-sched{display:none!important}
  .stx-vb-acts svg{display:none}
}

/* ---- SIDE LAYOUT (owner 12 Oct 2026): the inputs as a table in a column on the left, the drawings and checks on the
   right. Switched on per page by the class stx-side on #stxSheet (RC beam first); every other page is unchanged. ---- */
@media (min-width:980px){
  .stx-sl.stx-side{display:grid;grid-template-columns:minmax(300px,340px) minmax(0,1fr);column-gap:16px;align-items:start}
  .stx-side>.stx-band{grid-column:1;grid-row:1 / span 40;position:sticky;top:12px;max-height:calc(100vh - 24px);overflow:auto;padding:4px 12px 10px}
  .stx-side>*:not(.stx-band){grid-column:2}
  .stx-side .stx-sl-body{margin-top:0}
}
@media (min-width:980px) and (max-width:1499px){ .stx-side .stx-sl-body{grid-template-columns:minmax(0,1fr)} }
.stx-side .stx-cells{display:block}
.stx-side .stx-cg{display:block;border-left:0;padding:0;margin:0}
.stx-side .stx-gn{writing-mode:horizontal-tb;transform:none;display:block;text-align:left;font-size:10.5px;letter-spacing:.08em;margin:12px 0 2px;padding:0 0 4px;border-bottom:1.5px solid var(--sx-line2)}
.stx-side .stx-cg:first-child .stx-gn{margin-top:6px}
.stx-side .stx-cell{flex-direction:row;align-items:center;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid var(--sx-line2)}
.stx-side .stx-cl{white-space:normal;margin:0;font-size:12px;flex:1 1 auto}
.stx-side .stx-cv{flex:0 0 auto;justify-content:flex-end}
.stx-side .stx-cv input[type=number],.stx-side .stx-cv input[type=text]{width:84px;text-align:right}
.stx-side .stx-w-name .stx-cv input[type=text]{width:16ch;min-width:9ch;max-width:100%;field-sizing:content;text-align:left}   /* the name / mark grows with the name (Detailing H8) */
.stx-side .stx-cv select{max-width:170px}
.stx-side .stx-cg-more{margin:10px 0 0;display:block}
.stx-side .stx-add{border-bottom:0;justify-content:flex-end}
.stx-side .stx-drawer{grid-template-columns:minmax(0,1fr)}
/* the support editor as a table: one row per support */
.stx-side .stx-w-supports{flex-direction:column;align-items:stretch}
.stx-side .stx-supedit{flex-direction:column;align-items:stretch;gap:4px}
.stx-side .stx-suprow{display:flex;justify-content:space-between}
.stx-side #supAdd{align-self:flex-end}
@media (max-width:979px){
  .stx-side .stx-cell{gap:8px}
  .stx-side .stx-cl{flex:0 0 40%;min-width:0}
  .stx-side .stx-cv{flex:1 1 auto;min-width:0;max-width:60%;overflow:hidden}
  .stx-side .stx-cv select{max-width:100%;min-width:0;width:100%}
  .stx-side .stx-cv input[type=number],.stx-side .stx-cv input[type=text]{width:72px;min-width:0}
  .stx-side .stx-w-name .stx-cv input[type=text]{width:14ch;min-width:9ch;max-width:100%}
  .stx-side .stx-w-supports .stx-cv{max-width:none;overflow:visible}
  .stx-side .stx-suprow input{width:52px}
}

/* WEBSITE WIDTH (owner 12 Oct 2026: "make it more narrow, like the main website"): the calculators sit in the
   website's 1200 px column again (this replaces the 30 Sep full-width rule in calculator-theme.css; same specificity,
   loaded later). The RC beam's side layout then stacks its drawings and checks in one column on the right. */
@media screen and (min-width:1240px){
  body.stx-calc-theme .wrap,.stx-wide.wrap{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:24px;padding-right:24px}
}
.stx-vb-in{max-width:1200px}
.stx-side .stx-sl-body{grid-template-columns:minmax(0,1fr)!important}

/* ---- BOARD LOOK (owner 15 Oct 2026, UI Shell mock-ups wide-board / wide-detached, confirmed in the Website chat):
   the calculator uses the whole window in the project board's look. Switched on per page by body.stx-boardlook
   (RC beam = pilot). PC: inputs 340 | drawings (flexible) | checks 380, the board's dark header and the result strip
   at the TOP under it (it was the bottom bar). 980-1199 px: inputs | one stacked column. Below 980: one column and the
   strip back at the bottom (phones unchanged). Inside the project board's frame (html.stx-in-board, set by the
   board's bridge) the page drops its own header: the board's header is the only one. This replaces the 12 Oct
   1200 px column for these pages. ---- */
body.stx-boardlook{--bl-bg:#F5FAF8;--bl-line:#C9DBD4;--bl-btn:#127264;--bl-head:#04302a;--bl-hh:52px;background:var(--bl-bg)}
body.stx-boardlook .titlebar{background:var(--bl-head)!important;position:sticky!important;top:0;z-index:80;box-shadow:none}
body.stx-boardlook .titlebar .wrap{min-height:var(--bl-hh);max-width:none!important;padding-left:16px!important;padding-right:16px!important;flex-wrap:nowrap}
body.stx-boardlook .titlebar nav{gap:22px}
body.stx-boardlook main.wrap,body.stx-boardlook .stx-wide.wrap{max-width:none!important;padding-left:14px!important;padding-right:14px!important}
body.stx-boardlook .stx-hero{padding:12px 0 2px!important;margin:0!important;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
body.stx-boardlook .stx-hero h1{font-size:21px!important;line-height:1.2;margin:0!important}
body.stx-boardlook .stx-hero .sub{display:none}
body.stx-boardlook .stx-hero .stx-hero-r{margin:0!important}
body.stx-boardlook .stx-hero .badge{margin:0!important;padding:3px 10px!important;font-size:12px!important}
body.stx-boardlook .card,body.stx-boardlook .stx-band{border-color:var(--bl-line)}
body.stx-boardlook .stx-btn-p{background:var(--bl-btn);border-color:var(--bl-btn)}
body.stx-boardlook .stx-vb-in{max-width:none!important;padding-left:14px;padding-right:14px}
body.stx-boardlook .stx-vb-detach:empty{display:none}
@media screen and (min-width:980px){
  /* the result strip under the header, like the board's element strip (fixed; the page starts below it) */
  html.stx-has-vbar body.stx-boardlook{padding-bottom:0!important}
  body.stx-boardlook .stx-vbar{top:var(--bl-hh);bottom:auto;z-index:75;border-top:0;border-bottom:1px solid var(--bl-line);box-shadow:0 4px 12px rgba(18,58,56,.05)}
  body.stx-boardlook .stx-vb-in{min-height:48px;padding-top:6px;padding-bottom:6px}
  body.stx-boardlook .stx-vb-v{font-size:22px}
  body.stx-boardlook .stx-vb-u{font-size:18px}
  html.stx-has-vbar body.stx-boardlook main.wrap{padding-top:var(--stx-vbar-h,56px)}
  body.stx-boardlook .stx-side>.stx-band{top:calc(var(--bl-hh) + var(--stx-vbar-h,56px) + 10px);max-height:calc(100vh - var(--bl-hh) - var(--stx-vbar-h,56px) - 20px)}
  html.stx-has-vbar body.stx-boardlook #stx-notice{bottom:12px!important}
  body.stx-boardlook [id]{scroll-margin-top:calc(var(--bl-hh) + var(--stx-vbar-h,56px) + 12px)}
}
/* three columns on a PC: inputs 340-460 (24vw; owner 20 Oct: inputs wider, sketches smaller on big screens) | drawings | checks 380-460 (22vw) (beats the 12 Oct one-column rule) */
@media screen and (min-width:1200px){
  body.stx-boardlook .stx-sl.stx-side{grid-template-columns:clamp(340px,24vw,460px) minmax(0,1fr)}
  body.stx-boardlook .stx-side .stx-sl-body{grid-template-columns:minmax(0,1fr) clamp(380px,22vw,460px)!important}
}
/* inside the project board's frame: the board's header is the only one */
html.stx-in-board body.stx-boardlook .titlebar{display:none!important}
html.stx-in-board body.stx-boardlook{--bl-hh:0px}
/* the third column (statix-sheetlayout.js col3): inputs | drawings | checks on a PC, checks under the drawings below */
body.stx-boardlook .stx-col3{display:flex;flex-direction:column;gap:14px;min-width:0}
body.stx-boardlook .stx-col3 .card{margin:0}
@media screen and (min-width:1200px){
  body.stx-boardlook .stx-has-col3{grid-template-columns:clamp(340px,24vw,460px) minmax(0,1fr) clamp(380px,22vw,460px)!important}
  body.stx-boardlook .stx-has-col3>.stx-col3{grid-column:3;grid-row:1 / span 20;position:sticky;top:calc(var(--bl-hh) + var(--stx-vbar-h,56px) + 10px);max-height:calc(100vh - var(--bl-hh) - var(--stx-vbar-h,56px) - 20px);overflow:auto}
  /* 380 px: the check table keeps check, utilisation and result; clause and demand / capacity show in the details */
  body.stx-boardlook .stx-col3 .stx-ct .c-cl,body.stx-boardlook .stx-col3 .stx-ct .c-dc,body.stx-boardlook .stx-col3 .stx-ct th:nth-child(2),body.stx-boardlook .stx-col3 .stx-ct td:nth-child(2),body.stx-boardlook .stx-col3 .stx-ct .dc{display:none}
}
@media screen and (max-width:1199px){ body.stx-boardlook .stx-has-col3>.stx-col3{grid-column:1 / -1} }
/* the site-wide "coming soon" line is not part of the board look */
body.stx-boardlook #stx-soon{display:none!important}
/* the header links on the board's dark header (they inherited the light-header colour) */
body.stx-boardlook .titlebar nav a{color:#C9DBD4!important}
body.stx-boardlook .titlebar nav a:hover,body.stx-boardlook .titlebar nav a[aria-current]{color:#fff!important}
body.stx-boardlook .titlebar .ver{color:#8FB3A8!important;border-color:rgba(143,179,168,.35)!important}
/* ---- UI Shell's pilot hand test (15 Oct 2026) ---- */
/* the header Sign in button on the board's dark header (it kept the light header's dark text) */
body.stx-boardlook .titlebar #stx-btn-in,body.stx-boardlook .titlebar .stx-ghost{color:#eaf5f1!important;border-color:rgba(143,179,168,.55)!important;background:transparent!important}
body.stx-boardlook .titlebar #stx-chip{color:#eaf5f1!important}
/* phones: a second screen does not apply, so no Detach; the result text wraps under PASS; the chat sits above the bar */
@media (max-width:759px){
  .stx-vb-detach{display:none!important}
  .stx-vb-in{flex-wrap:wrap;row-gap:4px}
  .stx-vb-gg{flex:1 1 100%;order:3;min-width:0}
  .stx-vb-gl,.stx-vb-c{white-space:normal}
  html.stx-has-vbar .stx-support:not(.stx-support--anchored){bottom:calc(var(--stx-vbar-h,84px) + 12px)!important}
  body.stx-boardlook .titlebar .wrap{flex-wrap:wrap;row-gap:6px;padding-top:6px;padding-bottom:6px}
  body.stx-boardlook .titlebar .ver{display:none!important}
  body.stx-boardlook .titlebar nav{display:none!important}
}
@media (min-width:760px) and (max-width:979px){
  html.stx-has-vbar .stx-support:not(.stx-support--anchored){bottom:calc(var(--stx-vbar-h,84px) + 12px)!important}
  body.stx-boardlook .titlebar .wrap{flex-wrap:wrap}
}
/* phones (owner 16 Oct 2026: "They're too wide"): a table wider than its box is shown as a list - one small card per row,
   each value with its column name in front (statix-sheetlayout.js stackTables adds .stx-stack and data-label) */
@media (max-width:640px){
  table.stx-stack,table.stx-stack tbody,table.stx-stack tfoot,table.stx-stack tr{display:block;width:auto!important;min-width:0!important}
  table.stx-stack thead,table.stx-stack tr.stx-headrow{display:none!important}
  table.stx-stack tr{border:1px solid var(--sx-line,#d9e2df);border-radius:8px;margin:0 0 8px;padding:4px 10px}
  table.stx-stack td,table.stx-stack tbody th,table.stx-stack tfoot th{display:block;position:relative;width:auto!important;min-width:0!important;padding:3px 0 3px 40%!important;border:0!important;text-align:right!important;white-space:normal!important;overflow-wrap:anywhere;min-height:1.2em}
  table.stx-stack td::before,table.stx-stack tbody th::before,table.stx-stack tfoot th::before{content:attr(data-label);position:absolute;left:0;top:3px;width:38%;color:var(--sx-muted,#5b6b66);text-align:left;font-weight:500;white-space:normal}
  table.stx-stack td[data-label=""],table.stx-stack th[data-label=""]{padding-left:0!important;text-align:left!important}
  table.stx-stack td[data-label=""]::before,table.stx-stack th[data-label=""]::before{content:none}
}
/* phones: an input row whose value does not fit beside its name (a long list choice, a 2-way switch) puts the name on
   top and the value full width below (statix-sheetlayout.js adds .stx-cell-wide) */
@media (max-width:640px){
  .stx-cell.stx-cell-wide{flex-wrap:wrap;gap:4px}
  .stx-cell.stx-cell-wide>.stx-cl{flex:1 1 100%}
  .stx-cell.stx-cell-wide>.stx-cv{width:100%!important;max-width:none!important;flex:1 1 100%!important;min-width:0;justify-content:flex-start;flex-wrap:wrap;white-space:normal}
  .stx-cell.stx-cell-wide>.stx-cv>*{max-width:100%}
  .stx-cell.stx-cell-wide>.stx-cv>select,.stx-cell.stx-cell-wide>.stx-cv>.cz-toggle{width:100%!important;flex:1 1 100%}
}
/* RC beam reinforcement detail (UI Shell 16 Oct): the drawing box had width 100% plus 10 px side margins, so its right
   edge was cut by the card at every width; auto width fills the card between the margins */
#rcdCard .srd-wrap{width:auto!important}
/* the section pickers in the input column (Standard, Supported beam ...): the list choice may use the row's width, so
   '457x191x67 UB · 67.1 kg/m' and 'South Africa (SAISC / SANS)' are not cut (seen on the fin plate at 1400 px, 16 Oct) */
.stx-side .field select{width:100%!important;max-width:100%!important}
.stx-side .stx-cell.row>.stx-cv{flex:1 1 auto;min-width:0;justify-content:flex-end}
.stx-side .stx-cell.row>.stx-cv>select{max-width:100%!important;min-width:0}
/* owner 20 Oct 2026: on a wide PC the bending schedule and the step-by-step calculation sit side by side under the
   drawings and checks; every other card in the output stays full width (steel pages have no schedule: unchanged) */
@media screen and (min-width:1500px){
  .stx-sl-out{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .stx-sl-out>*{grid-column:1/-1}
  .stx-sl-out>:is(#combinedCard,#schedCard):has(+#stxCalcSheet),.stx-sl-out>:is(#combinedCard,#schedCard)+#stxCalcSheet{grid-column:auto}
}