.diagonal-app .tc-field{display:grid;grid-template-columns:minmax(0,1fr) 125px;align-items:center;gap:10px;margin:10px 0!important}.diagonal-app .tc-field>span{margin:0}.diagonal-app .tc-field>div,.diagonal-app .tc-field>select{width:125px!important;justify-self:end}.diagonal-app .tc-field:has(select){grid-template-columns:1fr}.diagonal-app .tc-field>select{width:100%!important}.diagonal-app .diag-dimensions{display:flex;justify-content:flex-end;gap:28px}.diagonal-app .diag-dimensions .tc-field{display:flex;gap:8px}.diagonal-app .tc-input-panel fieldset{padding:18px 0}.diagonal-app .tc-scheme svg{max-height:none;background:white}.diagonal-app #frame-graphics{margin-top:22px}.diagonal-app .tc-actions{display:flex;flex-direction:column}.diagonal-app .tc-input-panel input[type=number]{appearance:textfield}.diagonal-app input::-webkit-inner-spin-button,.diagonal-app input::-webkit-outer-spin-button{-webkit-appearance:none}.diagonal-app #tc-report-content>svg{width:100%;max-height:550px}.diagonal-app .tc-input-panel legend{font-size:22px}.diagonal-app [hidden]{display:none!important}@media print{.diagonal-app>.tc-input-panel,.diagonal-app>.tc-scheme,.diagonal-app>.wood-calculator-nav,.diagonal-app>#tc-results,.diagonal-app .tc-export{display:none!important}.diagonal-app .tc-report{display:block!important;color:#222;background:white}.diagonal-app .tc-report svg{max-height:330px!important}.diagonal-app{display:block!important}}
#timber-app.diagonal-app #tc-diagram>svg{width:100%;height:auto;max-height:none}#timber-app.diagonal-app .tc-scheme{align-self:start}#timber-app.diagonal-app .tc-report{grid-column:1/-1;grid-row:4}
@media(min-width:1201px){#timber-app.diagonal-app{grid-template-columns:minmax(306px,382px) minmax(370px,1fr) minmax(264px,343px)}#timber-app.diagonal-app>.tc-input-panel{grid-column:1;grid-row:2}#timber-app.diagonal-app>.tc-scheme{grid-column:2;grid-row:2}#timber-app.diagonal-app>.beam-right-column{grid-column:3;grid-row:2}}
@media(max-width:1200px) and (min-width:761px){#timber-app.diagonal-app{grid-template-columns:minmax(300px,36%) minmax(0,1fr)}#timber-app.diagonal-app>.tc-input-panel{grid-column:1;grid-row:2/4}#timber-app.diagonal-app>.tc-scheme{grid-column:2;grid-row:2}#timber-app.diagonal-app>.beam-right-column{grid-column:2;grid-row:3}}
@media(max-width:760px){#timber-app.diagonal-app{grid-template-columns:minmax(0,1fr)}#timber-app.diagonal-app>.tc-input-panel{grid-column:1;grid-row:2}#timber-app.diagonal-app>.tc-scheme{grid-column:1;grid-row:3}#timber-app.diagonal-app>.beam-right-column{grid-column:1;grid-row:4}#timber-app.diagonal-app>.tc-report{grid-row:5}.diagonal-app .diag-dimensions{gap:20px}.diagonal-app .diag-dimensions .tc-field>div{width:110px!important}}

#timber-app.diagonal-app .frame-effort{border-top:1px solid var(--theme-border,#555)}#timber-app.diagonal-app .tc-field>div{width:125px!important}@media(max-width:760px){#timber-app.diagonal-app .diag-dimensions .tc-field>div{width:110px!important}}

/* Snow district shares the dimensions and alignment of the adjacent load inputs. */
#timber-app.diagonal-app .tc-input-panel .tc-field:has(select[name="snowRegion"]){display:grid;grid-template-columns:minmax(0,1fr) var(--numeric-field-width,125px);align-items:center;gap:10px}
#timber-app.diagonal-app .tc-field select[name="snowRegion"]{width:var(--numeric-field-width,125px)!important;height:var(--numeric-field-height,38px)!important;min-height:var(--numeric-field-height,38px)!important;justify-self:end}

/* One row per slope, with equal projection/angle controls at every width. */
#timber-app.diagonal-app #tc-form .diag-slope-group{margin:18px 0}
#timber-app.diagonal-app #tc-form .diag-slope-group h3{font:600 15px/1.4 var(--font-sans,Arial,sans-serif);margin:0 0 8px;color:inherit}
#timber-app.diagonal-app #tc-form .diag-slope-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:end;--numeric-field-width:100%}
#timber-app.diagonal-app #tc-form .diag-slope-row .tc-field{display:flex!important;flex-direction:column;align-items:stretch;gap:6px;margin:0!important;min-width:0}
#timber-app.diagonal-app #tc-form .diag-slope-row .tc-field>span{font-size:14px;line-height:1.35;width:auto}
#timber-app.diagonal-app #tc-form .diag-slope-row .tc-field>div{width:100%!important;min-width:0!important;max-width:100%!important;margin:0;box-sizing:border-box}
#timber-app.diagonal-app #tc-form .diag-slope-row input{min-width:0;width:100%;box-sizing:border-box}

.diagonal-app .tc-report > .tc-export{justify-content:flex-end}