@charset "UTF-8";
/* Design tokens, page layout, header, panels, responsive breakpoints. */
:root{--plot-h:148px}
:root{--navy:#102d41;--ink:#17374b;--muted:#566e7c;--axis:#5d7684;--focus:#007f78;--blue-ink:#3567ad;--ochre-ink:#81601f;--violet-ink:#6d5aa8;--line:#dce5eb;--paper:#fff;--bg:#f0f4f7;--teal:#007f78;--mint:#d9f5eb;--amber:#b66c16;--blue:#407dcc;--shadow:0 2px 7px #15354a08; font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);font-size:16px}
*{box-sizing:border-box}
body{margin:0;background:var(--bg)}
button,input,select{font:inherit}
button{cursor:pointer}
button:disabled{opacity:.4;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,svg[tabindex]:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button{border:1px solid var(--line);background:#fff;color:var(--ink);border-radius:6px;padding:7px 12px;font-size:.875rem;font-weight:600;transition:background .15s}
button:hover:not(:disabled){background:#eef5f7}
input,select{width:100%;min-height:36px;border:1px solid #cbd8e1;border-radius:5px;background:#fff;color:var(--ink);padding:6px 8px;font-size:.875rem;font-variant-numeric:tabular-nums}
input[type=checkbox]{width:17px;min-height:17px;accent-color:var(--teal)}
input:invalid{border-color:#ba3838}
label{font-size:.875rem}
small{font-size:.75rem}
.hidden{display:none!important}
.topbar{height:78px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 28px}
.brand{display:flex;align-items:center;gap:12px;font-size:1.48rem;font-weight:650;letter-spacing:-.6px}
.brand>div>span{font-weight:350;color:#9cdfcf}
.brand small{display:block;font-weight:500;letter-spacing:1.8px;font-size:.625rem;color:#92adbc;margin-top:4px}
.brand-mark{position:relative;color:#73e4c2;font-weight:800;font-size:2.5rem;line-height:1}
.brand-mark>span{position:absolute;font-size:1.2rem;right:-5px;bottom:-4px}
.header-right{display:flex;gap:24px;align-items:center}
.language{display:flex;border:1px solid #4b6373;border-radius:6px;padding:3px}
.language button{padding:5px 9px;border:0;background:transparent;color:#c5d8e0}
.language button.selected{background:#fff;color:var(--navy)}
.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);gap:22px;max-width:1780px;margin:0 auto;padding:22px 28px 12px}
.inputs{align-self:start;position:sticky;top:16px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:calc(100vh - 145px);display:flex;flex-direction:column}
.panel-heading{display:flex;align-items:center;justify-content:space-between;padding:18px 18px 12px}
h1{font-size:1.05rem;margin:0;font-weight:650}
.text-button{border:0;padding:4px 0;background:none;color:var(--muted);font-size:.75rem}
.input-tabs{display:flex;padding:0 16px;border-bottom:1px solid var(--line);gap:15px}
.input-tabs button,.view-tabs button{border:0;border-radius:0;background:none;padding:11px 1px;color:var(--muted);border-bottom:2px solid transparent}
.input-tabs button.active,.view-tabs button.active{color:var(--teal);border-bottom-color:var(--teal)}
#input-content{padding:18px;overflow:auto;scrollbar-width:thin}
.input-footer{padding:12px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:.75rem;display:flex;flex-direction:column;gap:4px}
.field{display:block;margin-bottom:12px}
.field>span{display:block;margin-bottom:6px;color:var(--muted);font-size:.8125rem}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.full{grid-column:1/-1}
.section-label{font-size:.75rem;letter-spacing:1.3px;font-weight:700;margin:22px 0 12px;color:var(--muted)}
.section-label:first-child{margin-top:0}
.span-count{display:flex;gap:7px}
.span-count button{flex:1;padding:7px 0}
.span-count .active{background:var(--navy);color:#fff;border-color:var(--navy)}
.span-row{display:grid;grid-template-columns:64px 1fr 22px;align-items:center;gap:10px;margin-bottom:8px;font-size:.875rem}
.span-tag{padding-left:0;color:var(--ink);font-weight:600}
.unit{font-size:.75rem;color:var(--muted)}
.support-row{display:grid;grid-template-columns:64px 1fr;align-items:center;margin-bottom:8px;gap:10px;font-size:.875rem}
.help{font-size:.8125rem;line-height:1.5;color:var(--muted);margin:10px 0}
.note{padding:10px 12px;background:#eef5f7;border:1px solid #d3e5ec;border-radius:7px;font-size:.8125rem;line-height:1.5;color:#486777}
.toggle-row{display:flex;align-items:center;gap:8px;font-size:.875rem; margin:12px 0}
.results{min-width:0}
.result-toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:13px}
.segmented{display:inline-flex;padding:3px;background:#e2eaf0;border-radius:7px;gap:2px}
.segmented button{border:0;background:transparent;padding:6px 12px;white-space:nowrap}
.segmented .active{background:#fff;box-shadow:0 1px 4px #20374718}
.segmented.small button{font-size:.8125rem;padding:5px 9px}
#status{color:var(--muted);font-size:.75rem;min-width:0;flex:1 1 180px;text-align:right}
#status.busy:before{content:"";display:inline-block;width:9px;height:9px;border:2px solid #b2cbd5;border-top-color:var(--teal);border-radius:50%;margin-right:8px;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.structure-panel{background:var(--navy);border-radius:9px;padding:14px 18px 9px;color:#fff;overflow:hidden}
.structure-heading{display:flex;justify-content:space-between;font-size:.6875rem;letter-spacing:1.2px;color:#b4cbd5}
.structure-heading span:last-child{letter-spacing:0;font-size:.8125rem}
#beam{width:100%;display:block;height:136px}
.load-caption{font-size:.75rem;color:#c0d4df;min-height:18px;white-space:normal}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:8px;overflow:hidden;margin-top:14px}
.metric{background:#fff;padding:12px 15px;border:0;border-radius:0;text-align:left;min-width:0}
.metric-label{font-size:.6875rem;letter-spacing:.8px;font-weight:600;text-transform:uppercase;color:var(--muted)}
.metric-value{display:flex;gap:7px;align-items:baseline;margin-top:4px;font-size:1.48rem;font-weight:650;font-variant-numeric:tabular-nums;letter-spacing:-.6px}
.metric-value small{font-size:.75rem;font-weight:400;letter-spacing:0;color:var(--muted)}
.metric-location{font-size:.6875rem;color:var(--muted);margin-top:2px}
.metric:nth-child(1) .metric-value{color:var(--teal)}
.metric:nth-child(2) .metric-value{color:var(--amber)}
.chart-toolbar{display:flex;align-items:center;justify-content:space-between;margin-top:12px;border-bottom:1px solid var(--line);gap:8px}
.view-tabs{display:flex;gap:20px}
.export-buttons{display:flex;gap:6px}
.export-buttons button{font-size:.75rem;padding:5px 9px}
.result-view{background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 8px 8px;padding:12px 16px 0}
.display-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.legend{color:var(--muted);font-size:.75rem;display:flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:19px;height:9px;background:#d2eee5;border-top:2px solid var(--teal);border-bottom:1px solid var(--teal)}
.chart-row{position:relative;display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;border-top:1px solid #edf1f4;min-height:var(--plot-h)}
.chart-label{font-size:.875rem;font-weight:600}
.chart-label small{display:block;color:var(--muted);font-size:.6875rem;font-weight:400;margin-top:3px}
.plot{width:100%;height:var(--plot-h);overflow:visible;touch-action:pan-y;cursor:crosshair}
.plot text{font-family:"Segoe UI",sans-serif;font-size:calc(11.5px / var(--k,1));fill:var(--axis)}
.station-readout{border-top:1px solid var(--line);min-height:37px;font-size:.75rem;display:flex;align-items:center;gap:20px;color:var(--muted);flex-wrap:wrap}
.station-readout b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:600}
.result-footer{display:flex;justify-content:space-between;font-size:.6875rem;color:var(--muted);padding:10px 0;gap:12px;flex-wrap:wrap}
.warning{display:flex;justify-content:center;align-items:center;gap:9px;padding:9px 20px 14px;color:#4f5b57;font-size:.8125rem}
.warning-symbol{width:15px;height:15px;border:1px solid #bd943d;border-radius:50%;text-align:center;line-height:14px;color:#99751d;font-weight:bold;font-size:.625rem}
.error{background:#ffebe7;color:#9c3325;border:1px solid #e9b5aa;padding:12px;border-radius:6px;margin-bottom:12px;font-size:.875rem}
.section-card,.load-card{border:1px solid var(--line);padding:12px;border-radius:7px;margin-bottom:12px}
.card-head{display:flex;gap:8px;align-items:center;margin-bottom:12px}
.card-head input{font-weight:600;background:#f7fafb}
.icon-button{padding:3px 8px;font-size:1.2rem;color:var(--muted)}
.add-button{width:100%;border-style:dashed;color:var(--teal);margin-bottom:10px}
.section-svg{width:100%;height:125px;display:block;margin:0 auto 10px}
.section-props{background:#e8f5ef;padding:9px;border-radius:5px;display:flex;gap:10px;justify-content:space-between;color:#166358;font-size:.6875rem;margin-bottom:12px}
.dimensions{gap:0 10px}
.dimensions .field{margin-bottom:8px}
.dimensions input{padding:5px 7px}
.dimensions .field>span{font-size:.75rem}
.zone{padding:10px 0;border-top:1px solid var(--line)}
.zone .field{margin-bottom:6px}
.zone-heading{display:flex;align-items:center;justify-content:space-between;font-size:.75rem;font-weight:600;margin-bottom:6px}
.position-controls{display:flex;align-items:center;gap:8px}
.position-controls input{width:85px;min-height:29px;padding:3px 6px}
.position-controls label{font-size:.75rem}
.position-controls button{padding:4px 8px;font-size:.75rem}
.governing{background:#eaf6f2;color:#266556;padding:8px 10px;margin-bottom:9px;border-radius:5px;font-size:.75rem;line-height:1.5;display:flex;justify-content:space-between;align-items:center;gap:8px}
.table-options{display:flex;align-items:center;gap:12px;margin-bottom:10px;font-size:.875rem}
.table-options input{width:75px}
.table-scroll{overflow:auto;max-height:390px}
table{border-collapse:collapse;width:100%;font-size:.75rem;font-variant-numeric:tabular-nums;white-space:nowrap}
th{text-align:right;padding:10px 8px;background:#edf3f6;color:#547285;position:sticky;top:0;font-weight:600;z-index:1}
td{text-align:right;padding:8px;border-bottom:1px solid #edf2f5}
td:first-child,th:first-child{text-align:left}
tr:hover td{background:#f0f8f5}
.support-station td{background:#f2f6f9;font-weight:600}
.table-footnote{font-size:.75rem;color:var(--muted);padding:12px 0;line-height:1.5}
.method-content{font-size:.875rem;line-height:1.65;max-height:430px;overflow:auto;padding-bottom:16px}
.method-content h3{font-size:.95rem;margin:12px 0 5px}
.method-content p{margin:0 0 12px}
.method-content a{color:var(--teal)}
.factor-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:10px 0}
.factor-grid div{background:#edf5f7;border-radius:5px;padding:8px;text-align:center;font-size:.75rem}
.factor-grid b{display:block;color:var(--teal);font-size:1rem;margin-top:2px}
.stale{opacity:.55;pointer-events:none}
.axle-table input{min-height:30px;padding:3px 5px;width:82px}
.axle-table td,.axle-table th{padding:4px;font-size:.75rem}
.case-breakdown{font-size:.75rem;padding:8px 0;color:var(--muted)}
@media(min-width:1500px){
  .workspace{grid-template-columns:365px minmax(0,1fr)}
  :root{--plot-h:172px}
  #beam{height:154px}
  .metric-value{font-size:1.7rem}
}
@media(max-width:1100px){
  .workspace{grid-template-columns:300px minmax(0,1fr);gap:14px;padding:18px}
  .metric{padding:10px}
  .metric-value{font-size:1.2rem}
  .view-tabs{gap:12px}
  .view-tabs button{font-size:.8125rem}
  .chart-row{grid-template-columns:75px minmax(0,1fr)}
  .legend{display:none}
  .topbar{padding:0 20px}
}
@media(max-width:800px){
  .workspace{grid-template-columns:1fr;padding:14px;gap:16px}
  .inputs{position:static;max-height:520px}
  .topbar{height:70px;padding:0 16px}
  .brand{font-size:1.25rem}
  .local-label{display:none}
  .header-right{gap:10px}
  .brand small{font-size:.5rem}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric-value{font-size:1.4rem}
  .result-toolbar{align-items:flex-start}
  #status{font-size:.6875rem}
  .chart-toolbar{flex-wrap:wrap}
  .view-tabs{gap:15px}
  .export-buttons{padding-bottom:6px}
  .station-readout{gap:9px;padding:8px 0}
  .result-view{padding:10px 10px 0}
  .chart-row{grid-template-columns:64px minmax(0,1fr)}
  .chart-label{font-size:.8125rem}
  .warning{font-size:.75rem;line-height:1.5}
  .structure-panel{padding:12px}
  #beam{height:125px}
}
@media(prefers-reduced-motion:reduce){
  .qb-reveal *,.qb-reveal{animation:none!important}
  .qb-menu.open>.menu-pop{animation:none}
  *{scroll-behavior:auto!important}
  .panel-toggle svg,.input-group>summary::before,.case-band button{transition:none}
}
.collapse-inputs{display:none;font-size:1.25rem;padding:0 12px;margin-right:12px}
.inputs.collapsed .input-tabs,.inputs.collapsed #input-content,.inputs.collapsed .input-footer{display:none}
@media(max-width:800px){
  .collapse-inputs{display:inline-block}
  .inputs{max-height:340px}
  .metrics{grid-template-columns:repeat(4,1fr)}
  .metric-label{font-size:.6875rem;letter-spacing:.4px}
  .metric-value{font-size:1.2rem;gap:4px}
  .metric-value small{font-size:.625rem}
  .metric-location{font-size:.625rem}
}
@media(max-width:500px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric-value{font-size:1.4rem}
}
@media(min-width:801px) and (max-height:950px){
  .topbar{height:66px}
  .workspace{padding-top:16px;gap:18px}
  .structure-panel{padding-top:10px;padding-bottom:7px}
  #beam{height:108px}
  .metric{padding:10px 13px}
  .metric-value{font-size:1.4rem}
  .metrics{margin-top:10px}
  :root{--plot-h:124px}
  .result-toolbar{margin-bottom:10px}
  .chart-toolbar{margin-top:7px}
  .result-footer{padding:8px 0}
  .inputs{max-height:calc(100vh - 110px)}
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
.release-info{display:flex;flex-direction:column;gap:4px;font-size:.8rem;text-align:right;color:#ecf6f5}
.release-info small{font-size:.75rem;color:#b5cbd6}
.project-bar{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:0 18px 12px;border-bottom:1px solid var(--line)}
.project-actions{display:flex;gap:5px}
.project-actions button{padding:4px 7px;font-size:.7rem}
.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
dialog{border:0;border-radius:10px;box-shadow:0 18px 60px #102d4140;max-width:430px;color:var(--ink);padding:0}
dialog::backdrop{background:#102d4170}
dialog form{padding:22px}
dialog h2{font-size:1.05rem;margin:0 0 8px}
dialog p{font-size:.875rem;line-height:1.5;color:var(--muted);margin:0 0 18px}
.dialog-actions{display:flex;justify-content:flex-end;gap:7px}
.thermal-card{border:1px solid #efd2b8;background:#fffaf5}
.thermal-gradient{height:54px;border-radius:6px;margin:8px 0 14px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;padding:7px 12px;font-size:.72rem;color:#163b4d}
.thermal-gradient.positive{background:linear-gradient(#ef9a6c,#f5e8cf 48%,#9ac8dc)}
.thermal-gradient.negative{background:linear-gradient(#9ac8dc,#f5e8cf 48%,#ef9a6c)}
.thermal-gradient.neutral{background:#f5e8cf}
.thermal-badge{display:inline-flex;align-items:center;gap:6px;color:#ffd4ad}
.thermal-badge:before{content:"";width:28px;height:7px;border-radius:4px;background:linear-gradient(90deg,#78bad5,#f2d8b8,#e88357)}
.ei-symbol{display:flex;align-items:center;justify-content:center;gap:12px;font-size:2.4rem;color:#008378}
.ei-symbol small{font-size:.9rem}
.section-props{flex-wrap:wrap;gap:8px}
.excel-file{font-size:.75rem;color:#007f78;align-self:center;padding:6px}
@media(max-width:600px){
  .release-info{font-size:.65rem}
  .release-info small{font-size:.6rem}
  .header-right{gap:8px}
  .brand small{display:none}
  .local-label{display:none}
}
