:root{--bg:#eef1f2;--panel:#fff;--ink:#14202b;--mute:#55636f;--line:#c5ced4;--steel:#2f5d7c;--amber:#d9951b;--tag:#e4e9ec;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121a21;--panel:#1a252e;--ink:#e8eef2;--mute:#9aa9b4;--line:#34444f;--steel:#7fb2d3;--amber:#f0b44a;--tag:#243440}}
:root[data-theme="dark"]{--bg:#121a21;--panel:#1a252e;--ink:#e8eef2;--mute:#9aa9b4;--line:#34444f;--steel:#7fb2d3;--amber:#f0b44a;--tag:#243440}
html{scroll-behavior:smooth;scroll-padding-top:calc(64px + env(safe-area-inset-top,0px))}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "IBM Plex Sans",system-ui,sans-serif}
h1,h2,h3{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;line-height:1.1;margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:2px}
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:2px solid var(--ink)}
nav{max-width:1100px;margin:auto;padding:0 20px;display:flex;align-items:center;gap:22px;height:64px}
.logo{font:800 20px Archivo,sans-serif;text-decoration:none;white-space:nowrap}
.logo span{color:var(--amber)}
.links{display:flex;gap:18px;overflow-x:auto;margin-left:auto;font-size:14px;scrollbar-width:none}
.links a{text-decoration:none;white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent}
.links a:hover{border-color:var(--amber)}
section{max-width:1100px;margin:auto;padding:64px 20px 8px}
.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center;padding-top:56px}
.hero h1{font-size:clamp(44px,8vw,88px);font-weight:800;letter-spacing:-.03em}
.hero p{max-width:52ch;color:var(--mute)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.tags span{background:var(--tag);padding:3px 11px;font-size:13px;border-left:3px solid var(--steel)}
.drawing{background:var(--panel);border:1px solid var(--line);padding:12px}
.drawing svg{width:100%;height:auto;display:block}
.drawing text{font:12px "IBM Plex Sans",sans-serif;fill:var(--mute)}
.drawing .s{stroke:var(--ink);fill:none;stroke-width:2}
.drawing .a{stroke:var(--amber);fill:none;stroke-width:2.5}
.drawing .m{stroke:var(--steel);fill:rgba(47,93,124,.18);stroke-width:2}
.who{display:flex;gap:28px;flex-wrap:wrap;margin-top:8px;font-size:14px;color:var(--mute)}
h2{font-size:clamp(28px,4vw,40px);font-weight:800;margin-bottom:8px;padding-top:12px;border-top:2px solid var(--ink)}
.lead{color:var(--mute);max-width:62ch;margin:0 0 24px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--steel);padding:20px}
.card.g{border-top-color:var(--amber)}
.card h3{font-size:19px;margin-bottom:8px}
.card a.hd{text-decoration:none}
.card a.hd:hover{text-decoration:underline}
.card p{margin:0 0 10px;font-size:14px;color:var(--mute)}
ul.items{list-style:none;margin:0;padding:0}
ul.items li{padding:7px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:8px;font-size:15px}
.soon{font-size:12px;background:var(--tag);padding:1px 8px;color:var(--mute);white-space:nowrap;align-self:center}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.chips button,.btn{font:500 14px "IBM Plex Sans",sans-serif;background:var(--panel);color:var(--ink);border:1px solid var(--ink);padding:7px 16px;cursor:pointer}
.chips button[aria-pressed="true"],.btn{background:var(--ink);color:var(--bg)}
.proj .cat{font-size:13px;color:var(--steel);font-weight:500;margin-bottom:4px}
input[type=search],input[type=text],input[type=email],textarea{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--ink);background:var(--panel);color:var(--ink);border-radius:0}
.ref{background:var(--panel);border:1px solid var(--line);padding:14px 18px;margin-top:10px}
.ref b{font-family:Archivo,sans-serif}
.ref small{display:block;color:var(--mute)}
.empty{color:var(--mute);padding:14px 0}
form{display:grid;gap:12px;max-width:520px}
label{font-size:14px;font-weight:500;display:grid;gap:4px}
footer{max-width:1100px;margin:72px auto 0;padding:20px;border-top:2px solid var(--ink);font-size:13px;color:var(--mute);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.tabbar{max-width:1100px;margin:48px auto 0;padding:0 20px}
[role=tablist]{display:flex;flex-wrap:nowrap;gap:4px;overflow-x:auto;border-bottom:2px solid var(--ink);scrollbar-width:none}
[role=tab]{flex:none;font:700 15px Archivo,sans-serif;background:var(--tag);color:var(--ink);border:1px solid var(--line);border-bottom:0;padding:11px 18px;cursor:pointer;white-space:nowrap}
[role=tab][aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.panel[hidden]{display:none}
.panel{padding-top:32px}
.panel h2{border-top:0;padding-top:0}
@media(max-width:800px){.hero{grid-template-columns:1fr}nav{gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.logo{display:flex;align-items:center;gap:10px}
.avatar{width:52px;height:52px;object-fit:contain;display:block}
.tags a{background:var(--tag);padding:5px 13px;font-size:15px;border-left:3px solid var(--steel);text-decoration:none;font-weight:500}
.tags a:hover{background:var(--ink);color:var(--bg)}
.tabbar{max-width:1100px;margin:28px auto 0;padding:0 20px}
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:2px solid var(--ink);scrollbar-width:none}
.tabs a{flex:none;font:700 15px Archivo,sans-serif;background:var(--tag);color:var(--ink);border:1px solid var(--line);border-bottom:0;padding:11px 18px;text-decoration:none;white-space:nowrap}
.tabs a:hover{border-color:var(--ink)}
.tabs a[aria-current=page]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.page{padding-top:32px}.page h2{border-top:0;padding-top:0}
.calc{background:var(--panel);border:1px solid var(--line);border-top:4px solid var(--steel);padding:24px;max-width:780px}
select{width:100%;font:inherit;padding:12px 14px;border:1px solid var(--ink);background:var(--panel);color:var(--ink);border-radius:0}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:14px 0}
.calc label{margin-bottom:14px}
input[aria-invalid=true]{border-color:var(--err);border-width:2px}
.err{color:var(--err);font-size:14px;margin:8px 0}
.note{color:var(--mute);font-size:14px;border-left:3px solid var(--amber);padding-left:12px}
.res{margin:16px 0 0;padding:0;list-style:none;border-top:2px solid var(--ink)}
.res li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.res b{font-family:Archivo,sans-serif;white-space:nowrap}
.calc h3{margin:22px 0 4px;font-size:20px}
details{margin-top:18px;font-size:14px;color:var(--mute)}details pre{white-space:pre-wrap;font:13px/1.5 ui-monospace,monospace;background:var(--tag);padding:12px;margin:8px 0 0;color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--err:#ff8a80}}
:root[data-theme="dark"]{--err:#ff8a80}
:root{--err:#b3261e}@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--err:#ff8a80}}:root[data-theme="dark"]{--err:#ff8a80}

/* ---- v2 edits ---- */
/* Home */
.hero.home{display:block}
.hero.home p{max-width:62ch}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0 8px;max-width:none;padding:0;height:auto}
.tiles a{display:block;border-radius:14px;overflow:hidden;line-height:0;background:#fff;transition:transform .15s,box-shadow .15s}
.tiles a:hover,.tiles a:focus-visible{transform:translateY(-3px);box-shadow:0 6px 16px rgba(0,0,0,.22)}
.tiles img{width:100%;height:auto;display:block}
@media(max-width:700px){.tiles{grid-template-columns:repeat(2,1fr);gap:10px}}
@media(prefers-reduced-motion:reduce){.tiles a{transition:none}}
/* Tabs: 6 in one row on desktop, 3 + 3 on phones */
.tabs{height:auto;max-width:none;padding:0;gap:4px;overflow:visible}
.tabs a{flex:1 1 0;text-align:center;white-space:normal;padding-left:8px;padding-right:8px}
@media(max-width:700px){
.tabbar{margin-top:16px;padding:0 12px}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:0}
.tabs a{display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1.2;padding:10px 4px;border-bottom:1px solid var(--line)}
.tabs a[aria-current=page]{border-bottom-color:var(--ink)}
}
/* Structural calculator */
input[type=number]{width:100%;min-width:0;font:inherit;font-size:16px;padding:10px 10px;border:1px solid var(--ink);background:var(--panel);color:var(--ink);border-radius:0}
fieldset{border:0;padding:0;margin:0 0 16px;min-width:0}
legend{font-size:14px;font-weight:500;padding:0;margin-bottom:6px}
.radios{display:flex;flex-wrap:wrap;gap:10px}
.radios label{display:flex;align-items:center;gap:10px;flex-direction:row;border:1px solid var(--ink);padding:10px 18px;margin:0;cursor:pointer;font-size:16px}
.radios input{width:20px;height:20px;margin:0;accent-color:var(--steel)}
.radios label:has(input:checked){background:var(--tag);border-color:var(--steel);box-shadow:inset 0 0 0 1px var(--steel)}
.sketch{margin:4px 0 18px;background:#fff;border:1px solid var(--line);padding:8px}
.sketch img{width:100%;height:auto;display:block}
.row.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.row.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row{gap:10px 12px}
.fld{display:grid;gap:4px;min-width:0}
.fld>label{margin:0!important;font-size:14px;font-weight:500;line-height:1.25}
.fld .inp{display:flex;align-items:center;gap:6px}
.fld .u{font-size:14px;color:var(--mute);white-space:nowrap}
.fld small{font-weight:400;color:var(--mute)}
.btn.calc-btn{font-size:16px;padding:12px 32px;margin:6px 0 4px}
.diag{margin:14px 0 0}
.diag figcaption{font:700 16px Archivo,sans-serif}
.diag figcaption small{font:400 13px "IBM Plex Sans",sans-serif;color:var(--mute);margin-left:6px}
.dg{background:var(--panel);border:1px solid var(--line);margin-top:6px;overflow:hidden}
.dg svg{display:block}
.dg .ax{stroke:var(--ink);stroke-width:1.5;fill:none}
.dg .fl{fill:rgba(47,93,124,.22);stroke:var(--steel);stroke-width:2;stroke-linejoin:round}
.dg .sp{fill:var(--bg);stroke:var(--ink);stroke-width:1.5}
.dg .st{stroke:var(--amber);stroke-width:2;stroke-dasharray:5 4}
.dg .sd{fill:var(--amber)}
.dg text{font:12px "IBM Plex Sans",sans-serif;fill:var(--ink)}
.dg text.m{fill:var(--mute)}
.res li span sub,.res li b sub,.pair sub{font-size:.75em}
.res b small{font:400 12px "IBM Plex Sans",sans-serif;color:var(--mute)}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.pair b{font-family:Archivo,sans-serif;white-space:nowrap}
.calc h3.oh{margin-top:26px;padding-top:12px;border-top:2px solid var(--ink)}
@media(max-width:560px){.calc{padding:16px}.row{gap:10px 8px}.fld .u{font-size:12px}input[type=number]{padding:10px 6px}.radios label{padding:10px 14px}}
[hidden]{display:none!important}
#patSet{border:0;padding:0;margin:14px 0 0;min-width:0}
.tw{overflow-x:auto}
.ptab{border-collapse:collapse;width:100%;font-size:14px}
.ptab th,.ptab td{border-bottom:1px solid var(--line);padding:8px 8px;text-align:right;vertical-align:top}
.ptab th:first-child,.ptab td:first-child{text-align:left}
.ptab thead th{border-bottom:2px solid var(--ink);font-family:Archivo,sans-serif}
.ptab tr.gov td{font-weight:700;background:var(--tag)}
.ptab sub{font-size:.75em}
.fld sub{font-size:.75em}

/* ---- v3 edits ---- */
/* Home: BCA circulars (left) and construction news (right), desktop only */
.feed{display:none}
.wide nav{max-width:1440px}
@media (min-width:1180px){
.hero.home{display:grid;grid-template-columns:250px minmax(0,1fr) 250px;gap:36px;max-width:1440px;align-items:start;padding-top:28px}
.hero.home h1{font-size:56px}
.hero.home .hc>p{margin:10px 0 0}
.hero.home .tiles{margin:20px auto 0;gap:14px;max-width:max(420px,calc((100vh - 290px) * 1.55))}
.feed{display:block;position:sticky;top:calc(80px + env(safe-area-inset-top,0px));max-height:calc(100vh - 100px);overflow-y:auto;padding-top:6px;scrollbar-width:thin}
}
.feed .fh{font-size:17px;font-weight:700;padding:0 0 8px;margin:0;border-top:0;border-bottom:2px solid var(--ink)}
.feed:first-child .fh{border-bottom-color:var(--steel)}
.feed:last-child .fh{border-bottom-color:var(--amber)}
.fl{list-style:none;margin:0;padding:0}
.fl li{padding:9px 0;border-bottom:1px solid var(--line);display:grid;gap:2px}
.fl a{font-size:13.5px;line-height:1.35;text-decoration:none;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fl a:hover{text-decoration:underline;color:var(--steel)}
.fmeta{font-size:12px;color:var(--mute);display:flex;gap:8px;align-items:center}
.fmeta b{font-weight:500;font-size:11px;background:var(--tag);color:var(--ink);padding:0 6px;border-left:2px solid var(--amber)}
.fe{font-size:13px;color:var(--mute)}
.fm{font-size:12px;color:var(--mute);margin:8px 0 0;display:grid;gap:2px}
.fm a{color:var(--steel)}

/* Structural calculator: aligned input/output grid */
.calc{max-width:880px;--fd:156px;--sw:54px;--bw:104px;--uw:46px}
.toprow{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 40px;margin-bottom:14px}
.toprow fieldset{margin:0}
.supsel label{margin:0!important}
.supsel select{width:250px;max-width:100%;padding:10px 12px}
.sketch{max-width:480px;margin:6px auto 16px;background:var(--panel);padding:6px 8px}
.sketch svg{width:100%;height:auto;display:block}
.sketch text{font:12px "IBM Plex Sans",sans-serif;fill:var(--ink)}
.sketch text.dt{fill:var(--mute)}
.sketch text.lt{font-weight:500;fill:var(--amber)}
.sketch text.m{fill:var(--mute);font-size:11px}
.sketch .bm{fill:var(--tag);stroke:var(--ink);stroke-width:1.3}
.sketch .sl{stroke:var(--ink);stroke-width:1.5}
.sketch .hz{stroke:var(--ink);stroke-width:1}
.sketch .sp{fill:var(--panel);stroke:var(--ink);stroke-width:1.3}
.sketch .dm line{stroke:var(--mute);stroke-width:1}
.sketch .dm line.ex{stroke-width:.7;stroke-dasharray:2 2}
.sketch .ld line{stroke:var(--amber);stroke-width:2}
.sketch .ah{fill:var(--amber)}
.sketch .ub{fill:none;stroke:var(--amber);stroke-width:1.3}
.sketch .uh{stroke:var(--amber);stroke-width:.8}
.frow{display:grid;grid-template-columns:var(--fd) repeat(3,var(--sw) var(--bw) var(--uw));column-gap:6px;align-items:center;margin:10px 0}
.frow>*,.frow .g>*{grid-row:1}
.frow .g{display:contents}
.fd{grid-column:1;font-size:14px;font-weight:500;line-height:1.2}
.fd small,.fd2 small{display:block;font-weight:400;color:var(--mute);font-size:12px}
.fd2{grid-column:5/8;font-size:14px;font-weight:500;line-height:1.2;text-align:right;padding-right:6px}
.frow .s{text-align:right;white-space:nowrap;font-size:15px;margin:0!important;display:block;font-weight:400}
.frow .s sub{font-size:.72em}
.frow input,.frow .ob{width:100%;min-width:0;height:42px}
.ob{display:flex;align-items:center;font:500 16px "IBM Plex Sans",sans-serif;padding:0 10px;border:1px solid var(--line);border-left:3px solid var(--steel);background:var(--tag);color:var(--ink);overflow:hidden;white-space:nowrap}
.frow .u{font-size:14px;color:var(--mute);white-space:nowrap}
.c1 .s{grid-column:2}.c1 input,.c1 .ob{grid-column:3}.c1 .u{grid-column:4}
.c2 .s{grid-column:5}.c2 input,.c2 .ob{grid-column:6}.c2 .u{grid-column:7}
.c3 .s{grid-column:8}.c3 input,.c3 .ob{grid-column:9}.c3 .u{grid-column:10}
.diag{margin:18px 0 0}
.calc #patSet{margin-top:10px}
@media (max-width:700px){
.frow{display:flex;flex-wrap:wrap;gap:6px 10px}
.fd,.fd2{flex:0 0 100%;text-align:left;padding:0}
.fd2{margin-top:4px}
.frow .g{display:flex;align-items:center;gap:5px;flex:0 0 calc(50% - 5px);min-width:0}
.frow .s{min-width:40px;font-size:14px}
.frow input,.frow .ob{flex:1}
.frow .u{min-width:34px;font-size:12px}
.toprow{gap:12px}
.supsel{flex:1 1 100%}
.supsel select{width:100%}
}

/* ---- v4 edits ---- */
/* Slab selectors sit on the same line as Structure Type */
.slabsel{display:flex;flex-wrap:wrap;gap:14px 20px}
.slabsel select{width:220px}
/* Slab sketch */
#s_sketch svg{width:auto;max-width:100%;height:auto;margin:auto}
.sketch .pl{fill:var(--tag);stroke:var(--ink);stroke-width:1.3}
.sketch .pd{fill:none;stroke:var(--ink);stroke-width:1;stroke-dasharray:5 3}
.sketch .mb{fill:var(--ink)}
.sketch .sa{fill:var(--ink)}
.sketch .ldr{stroke:var(--mute);stroke-width:1;stroke-dasharray:5 3}
.sketch line.ex{stroke:var(--mute);stroke-width:.7;stroke-dasharray:2 2}
/* Location note under an output box */
.frow .g>.lc{grid-row:2;font-size:11.5px;color:var(--mute);white-space:nowrap;line-height:1.2;margin-top:3px}
.c1>.lc{grid-column:3/5}.c2>.lc{grid-column:6/8}.c3>.lc{grid-column:9/11}

@media (max-width:700px){
/* Two labelled pairs (e.g. Beam Span + Beam Stiffness, Hogging + Sagging) share one line */
.frow.two .fd,.frow.two .fd2{flex:0 0 calc(50% - 5px);margin:0;font-size:13px}
.frow.two .fd{order:0}.frow.two .fd2{order:1}.frow.two .g{order:2}
.frow .g{flex-wrap:wrap}
.frow .g>.lc{flex:0 0 100%;margin:0;padding-left:45px;white-space:normal}
.frow .g{display:grid;grid-template-columns:40px minmax(0,1fr) 33px;column-gap:3px;align-items:center;flex:0 0 calc(50% - 5px)}
.frow .g>.s{grid-column:1;min-width:0;font-size:13px}
.frow .g>input,.frow .g>.ob{grid-column:2;padding:0 4px;font-size:16px;min-width:0;width:100%}
.frow .g>.u{grid-column:3;min-width:0;font-size:11px}
.frow .g>.lc{grid-column:2/4;grid-row:2;padding:0;white-space:normal;font-size:11px}
.slabsel{flex:1 1 100%;gap:12px}
.slabsel label{flex:1 1 140px}
.slabsel select{width:100%}
}
.frow input[type=number]{-moz-appearance:textfield;appearance:textfield}
.frow input[type=number]::-webkit-inner-spin-button,.frow input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}