@charset "UTF-8";
/* FT tab, stresses, floating windows, imposed deformations (v0.9 to v0.9.7). */
/* v0.9: S6-25 truck load fraction FT */
.axle-card{position:relative;margin:4px 0 14px;padding:12px 12px 10px;border-radius:9px;border:1px solid #d9c592;background:#fffcf5}
.axle-card.on{border-color:#c9a24f;box-shadow:0 2px 10px #8a6d2422}
.axle-head,.axle-view-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.axle-head b,.axle-view-head b{display:block;font-size:.9rem;color:#17374b}
.axle-head small,.axle-view-head small{display:block;font-size:.72rem;color:var(--muted)}
.axle-badge{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:4px 7px;border-radius:6px;background:#102d41;color:#ffd49a;font-size:.7rem;font-weight:700;letter-spacing:.04em}
.axle-card .toggle-row{margin:8px 0}
.axle-derived{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.75rem;color:var(--muted);margin:6px 0 10px}
.axle-derived b{color:#17374b;font-weight:600}
.axle-result{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;padding:8px 10px;margin:8px 0;border-radius:7px;background:#102d41;color:#dceaf0}
.axle-ft-label{font-size:.8rem;color:#9fc3d2}
.axle-ft{font-size:1.45rem;color:#ffd49a;font-variant-numeric:tabular-nums}
.axle-result small{flex-basis:100%;font-size:.72rem;color:#bdced7}
.axle-actions{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.axle-actions button:not(.text-button){font-size:.8rem;padding:5px 9px}
.axle-warning{font-size:.75rem;color:#9a5b12;margin:6px 0 0}
.axle-tab{color:#8a6214}
.axle-view{max-width:1100px}
.axle-view h3{margin:18px 0 6px;font-size:.95rem;color:#17374b}
.axle-table-view{border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}
.axle-table-view th,.axle-table-view td{padding:4px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.axle-table-view thead th{text-align:center;background:#102d41;color:#fff}
.axle-table-view thead th small{display:block;font-weight:400;color:#ffd49a}
.axle-table-view tbody th{text-align:left;font-weight:500;color:var(--muted)}
.axle-table-view td small{display:block;font-size:.6875rem;color:var(--muted)}
.axle-group th{background:#eef4f7;color:#17374b!important;font-weight:600!important;text-align:left}
.axle-ftrow th{color:#17374b!important;font-weight:600!important}
.axle-ftcell{font-weight:700;color:#8a4d0f;background:#fff7e8}
.axle-ftcell sup{font-size:.6rem;color:#a33329;margin-left:2px}
/* v0.9.1: FT tab — data first, compact full-width tables without scrolling */
.axle-inputs{display:grid;grid-template-columns:minmax(0,3fr) minmax(220px,1.3fr);gap:6px 18px;align-items:start;margin:10px 0 4px;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fbfcfd}
.axle-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:4px 10px}
.axle-grid .field,.axle-choice .field{margin:0}
.axle-choice .toggle-row{margin:6px 0 0}
@media (max-width:760px){
  .axle-inputs{grid-template-columns:1fr}
}
.axle-table-view{width:100%;table-layout:fixed;font-size:.72rem;margin:0 0 4px}
.axle-table-view th,.axle-table-view td{padding:2px 5px;overflow:hidden;text-overflow:ellipsis}
.axle-table-view .axle-labelcol{width:9.5em}
.axle-table-view thead th{font-weight:600;line-height:1.25}
.axle-table-view thead th small{display:inline;font-size:.66rem}
.axle-table-view td small{display:inline;font-size:.6875rem}
.axle-table-view.selected{outline:2px solid #c9a24f;outline-offset:1px}
.axle-zones td{text-align:center;font-size:.8rem;color:#8a4d0f;background:#fff7e8}
.axle-zones thead th small{display:block}
.axle-view h3{margin:12px 0 4px;font-size:.85rem}
.axle-blocks{display:grid;gap:4px}
.axle-notes{margin-top:10px;font-size:.8rem}
.axle-notes summary{cursor:pointer;color:var(--muted)}
.axle-mini{display:flex;gap:12px;flex-wrap:wrap;font-size:.75rem;color:var(--muted);margin:6px 0}
.axle-mini b{color:#8a4d0f}
.axle-open{font-size:.8rem}
.axle-apply{font-weight:600}
.axle-replaces{font-size:.72rem;color:#8a6214;margin-top:-4px}
.axle-mark{font-size:calc(9.5px / var(--k,1));fill:#a47a1c}
.axle-caption{color:#ffd49a}
/* v0.9.2: collapsible input subsections */
.input-group{margin:0 0 10px;border:1px solid var(--line);border-radius:9px;background:#fff;overflow:hidden}
.input-group>summary{display:flex;align-items:center;gap:8px;padding:9px 12px;cursor:pointer;list-style:none;background:#f3f7f9;user-select:none}
.input-group>summary::-webkit-details-marker{display:none}
.input-group>summary::before{content:"";flex:none;width:7px;height:7px;border-right:2px solid #5d7d8c;border-bottom:2px solid #5d7d8c;transform:rotate(-45deg);transition:transform .15s;margin-right:2px}
.input-group[open]>summary::before{transform:rotate(45deg)}
.input-group>summary:hover{background:#e8f0f4}
.group-title{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#17374b}
.group-title .axle-badge{font-size:.6875rem;padding:2px 5px;letter-spacing:.04em}
.group-meta{margin-left:auto;font-size:.72rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%}
.input-group[open]>summary{border-bottom:1px solid var(--line)}
.group-body{padding:10px 12px 4px}
.group-body>.load-card:last-child,.group-body>.section-card:last-child{margin-bottom:8px}
.group-body .axle-card{margin:0 0 8px;border:0;box-shadow:none;background:none;padding:0}
.axle-sub{display:block;font-size:.72rem;color:var(--muted)}
/* FT tab: inputs aligned on one baseline even when a label wraps */
.axle-grid{align-items:end}
.axle-grid .field{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.axle-defs{display:grid;grid-template-columns:max-content 1fr;gap:3px 12px;margin:4px 0 10px}
.axle-defs dt{font-weight:700;color:#17374b}
.axle-defs dd{margin:0}
/* v0.9.3bis: section properties window */
.sp-open{display:block;margin:2px 0 8px;font-size:.8rem;font-weight:600;color:#007f78}
.section-dialog{max-width:none;width:min(1440px,97vw);max-height:94vh;padding:0;border:0;border-radius:12px;box-shadow:0 20px 60px #0b1e2b66;overflow:auto;background:#fff;color:#17374b}
.section-dialog::backdrop{background:#0b1e2b99;backdrop-filter:blur(2px)}
.sp-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:10px;padding:12px 16px;background:#f3f7f9;border-bottom:1px solid var(--line)}
.sp-head b{display:block;font-size:1rem}
.sp-head small{display:block;font-size:.72rem;color:var(--muted)}
.sp-close{margin-left:auto;font-size:1.3rem}
.sp-body{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.2fr) minmax(0,1.25fr);gap:16px;padding:14px 16px}
.sp-body>*{min-width:0}
@media (max-width:1180px){
  .sp-body{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sp-results{grid-column:1 / -1}
  .sp-body .sp-figure{position:static}
}
@media (max-width:720px){
  .sp-body{grid-template-columns:minmax(0,1fr)}
  .sp-body .sp-figure{position:static}
}
.sp-body h3{margin:10px 0 6px;font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:#5d7d8c}
.sp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;align-items:end}
.sp-grid .field{margin:0}
.sp-bars{display:grid;grid-template-columns:70px repeat(3,minmax(0,1fr));gap:4px 8px;align-items:end;margin-bottom:4px}
.sp-bars b{font-size:.75rem;padding-bottom:10px}
.sp-bars .field{margin:0}
.sp-toggle{margin:12px 0 4px;font-weight:600}
.sp-figure{position:sticky;top:64px;align-self:start;border:1px solid var(--line);border-radius:10px;background:#fbfcfd;padding:6px}
.sp-svg{width:100%;height:auto;display:block}
#sp-figure .sp-svg{max-height:calc(94vh - 110px);margin:0 auto}
.sp-steel{fill:#cfe0e8;stroke:#36596b;stroke-width:1}
.sp-haunch{fill:#e7e2d6;stroke:#a7987a;stroke-width:.8}
.sp-concrete{fill:#efeae0;stroke:#a7987a;stroke-width:1}
.sp-bar{fill:#8a4d0f}
.sp-axis{stroke:#5d7d8c;stroke-width:1.2}
.sp-axis-label{font-size:10px;fill:#5d7d8c;text-anchor:end}
.sp-na-steel{stroke:#36596b;stroke-dasharray:4 3;fill:#36596b}
.sp-na-3n{stroke:#7a5bb5;stroke-dasharray:4 3;fill:#7a5bb5}
.sp-na-1n{stroke:#008378;stroke-dasharray:4 3;fill:#008378}
.sp-na-label{font-size:8.5px;stroke:none}
.sp-point{stroke:#c0392b;stroke-width:1.2}
.sp-point-label{font-size:9px;fill:#c0392b;font-weight:700}
.sp-table{width:100%;border-collapse:collapse;font-size:.76rem;font-variant-numeric:tabular-nums;margin-bottom:6px}
.sp-table th,.sp-table td{padding:3px 6px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.sp-table thead th{background:#102d41;color:#fff;font-weight:600;text-align:center}
.sp-table tbody th{text-align:left;font-weight:500;color:var(--muted)}
.sp-table td small{color:var(--muted);font-size:.66rem}
.sp-misc td{text-align:right}
.sp-class{font-weight:700;text-align:center!important}
.sp-class-1,.sp-class-2{color:#0b7a4b}
.sp-class-3{color:#a86a12}
.sp-class-4{color:#a33329}
.sp-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sp-actions button{font-size:.78rem;padding:5px 9px}
.sp-notes{margin:0 16px 14px;font-size:.78rem}
.sp-notes summary{cursor:pointer;color:var(--muted)}
.sp-break{fill:none;stroke:#a7987a;stroke-width:1}
.sp-dim{font-size:9px;fill:#5d7d8c;text-anchor:middle}
.sp-table{table-layout:auto}
.sp-table tbody th{white-space:normal}
/* v0.9.4: stresses over the depth */
.stress-dialog{width:min(1100px,96vw)}
.st-controls{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 16px 0}
.st-controls .field{margin:0;min-width:220px}
.st-body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px;padding:10px 16px 16px}
@media (max-width:900px){
  .st-body{grid-template-columns:minmax(0,1fr)}
}
.st-max{fill:none;stroke:#008378;stroke-width:2}
.st-min{fill:none;stroke:#c97a1c;stroke-width:2}
.st-fill{stroke-width:1;stroke-dasharray:2 2}
.st-dot.st-max{fill:#008378}
.st-dot.st-min{fill:#c97a1c}
.st-label{font-size:9px;font-weight:700}
.st-max-text{fill:#008378}
.st-min-text{fill:#c97a1c}
.st-legend{font-size:10px;font-weight:600}
.st-table td{font-size:.74rem}
.st-table td[data-total]{font-weight:700}
.st-tension{color:#a33329}
.st-compression{color:#2f5f9e}
/* v0.9.5: staggered arrival of the workspace panels after the intro */
@keyframes qbArrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.qb-reveal .topbar,.qb-reveal .inputs,.qb-reveal .result-toolbar,.qb-reveal .structure-panel,.qb-reveal .metrics,.qb-reveal .chart-toolbar,.qb-reveal #diagrams-view,.qb-reveal .result-footer,.qb-reveal .warning{animation:qbArrive .75s cubic-bezier(.2,.75,.25,1) both}
.qb-reveal .topbar{animation-delay:.05s}
.qb-reveal .inputs{animation-delay:.18s}
.qb-reveal .result-toolbar{animation-delay:.3s}
.qb-reveal .structure-panel{animation-delay:.42s}
.qb-reveal .metrics{animation-delay:.56s}
.qb-reveal .chart-toolbar{animation-delay:.68s}
.qb-reveal #diagrams-view{animation-delay:.8s}
.qb-reveal .result-footer,.qb-reveal .warning{animation-delay:1.05s}
@media (prefers-reduced-motion:reduce){
  .qb-reveal *{animation:none!important}
}
/* v0.9.5: region selector, cracked slab (negative region) */
.sp-region{margin:0 0 6px}
.sp-region .segmented{display:flex}
.sp-region .segmented button{flex:1}
.sp-region .help{margin:6px 0 2px;font-size:.76rem}
.sp-cracked{opacity:.38}
.sp-crack{fill:none;stroke:#8d7a57;stroke-width:.9}
.sp-na-neg{stroke:#b5501f;stroke-dasharray:4 3;fill:#b5501f}
/* v0.9.5: stress entry, hover preview and station controls */
#diagrams-view{position:relative}
.st-cta{border:1px solid var(--teal);background:var(--teal);color:#fff;font-size:.8125rem;padding:6px 13px;border-radius:7px}
.st-cta:hover:not(:disabled){background:#007066;color:#fff}
.st-peek{position:absolute;z-index:6;width:300px;pointer-events:none;background:#ffffffee;backdrop-filter:blur(3px);border:1px solid #cfe0e8;border-radius:12px;box-shadow:0 12px 34px #0b1e2b2e;padding:9px 11px 8px;opacity:0;transform:translateY(6px) scale(.98);transition:opacity .18s ease,transform .18s ease}
.st-peek.show{opacity:1;transform:none}
.st-peek-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:.78rem}
.st-peek-head span{color:var(--muted);font-variant-numeric:tabular-nums}
.st-peek-svg{margin:4px 0 2px}
.st-mini-area{stroke-width:1.6}
.st-mini-area.st-max{fill:#00837822}
.st-mini-area.st-min{fill:#c97a1c1c}
.st-peek-table{font-size:.72rem;margin:2px 0 4px}
.st-peek-table th,.st-peek-table td{padding:2px 5px;background:none;position:static}
.st-peek-table thead th{color:var(--muted);font-weight:600}
.st-peek-hint{margin:4px 0 0;font-size:.7rem;color:#006b62;font-weight:600}
.st-station{min-width:300px!important}
.st-station-row{display:flex;align-items:center;gap:6px}
.st-station-row input[type=number]{width:96px}
.st-station-row input[type=range]{flex:1;min-width:120px;min-height:auto;padding:0}
.st-y{min-width:190px!important}
@media (max-width:640px){
  .st-peek{display:none}
}
#st-content>.help,#st-content>.axle-warning{margin:10px 16px}
.st-area{stroke-width:2;stroke-linejoin:round}
.st-area.st-max{fill:#00837818}
.st-area.st-min{fill:#c97a1c14}
.st-body .sp-figure{position:static}
.st-zone-c{fill:#2f5f9e0d}
.st-zone-t{fill:#a333290b}
.st-zone-label{font-weight:700;letter-spacing:.02em}
.st-compression-text{fill:#2f5f9e}
.st-tension-text{fill:#a33329}
.st-ena{stroke:#6a4fa3;stroke-width:1;stroke-dasharray:5 3}
.st-ena-label{font-size:9.5px;font-weight:600;fill:#6a4fa3;paint-order:stroke;stroke:#fbfcfd;stroke-width:3px}
.st-bar-band{stroke-width:1.2;stroke-linejoin:round}
.st-bar-band.st-max{fill:#008378aa}
.st-bar-band.st-min{fill:#c97a1caa}
/* v0.9.6: stress values coloured by sign, S1–S5 guides, wider preview */
.st-val{font-size:11px;font-weight:700;paint-order:stroke;stroke:#fbfcfd;stroke-width:3px}
.st-val-mini{font-size:12px}
.st-v-t{fill:#b3261e}
.st-v-c{fill:#1f5fae}
.st-v-0{fill:#5d7d8c}
.st-spoint{stroke:#9fb3be;stroke-width:.8;stroke-dasharray:1.5 3}
.st-spoint-dot{fill:#c0392b}
.st-spoint-label{font-size:11px;font-weight:700;fill:#c0392b}
.st-scale-note{font-size:9.5px;fill:#5d7d8c}
.st-peek{width:340px}
.st-peek-hint{font-size:.72rem}
.axle-enable{margin:0 0 0 auto;font-weight:600}
.axle-off{padding:12px 14px;background:#f6f9fb;border:1px dashed #b9cbd5;border-radius:8px;color:#486777;font-size:.85rem}
.toggle-row.disabled{opacity:.55}
/* v0.9.6: readout in the diagram colours, values next to the dots, method window */
.station-readout{font-size:.85rem;gap:22px}
.station-readout .ro-val b{color:var(--c,#17374b);font-size:1.08rem;font-weight:750}
.station-readout .ro-val{color:var(--c,#5d7d8c)}
.plot text.cursor-val{font-size:calc(13px / var(--k,1));font-weight:750;paint-order:stroke;stroke:#fff;stroke-width:calc(3.5px / var(--k,1));pointer-events:none}
.method-open{background:transparent;border:1px solid #4b6373;color:#c5d8e0;font-size:.78rem;padding:6px 11px;border-radius:999px}
.method-open:hover:not(:disabled){background:#17384c;color:#fff}
.method-dialog{width:min(860px,94vw)}
.method-dialog-body{padding:6px 22px 18px}
.method-dialog-body .method-content{max-height:none}
/* v0.9.6: FT summary in the left panel, settings in the tab */
.axle-state{margin:6px 0;font-size:.82rem;font-weight:650;padding:6px 9px;border-radius:6px}
.axle-state.off{background:#f1f4f6;color:#5d7d8c}
.axle-state.computed{background:#fff6e5;color:#8a5a00}
.axle-state.applied{background:#e6f6f3;color:#006b62}
.axle-choice-summary{margin:4px 0;font-size:.8rem;color:#486777}
.axle-open-button{width:100%;margin-top:8px;border-color:#0a8f84;color:#006b62;font-size:.8rem}
.peak-label{transition:opacity .12s}
.peak-label.peak-dim{opacity:.12}
/* v0.9.6: floating, draggable, non-modal windows */
dialog.qb-float{position:fixed;inset:auto;margin:0;max-height:calc(100vh - 24px);overflow:auto;box-shadow:0 12px 32px #0b1e2b33,0 0 0 1px #c9d8e0}
dialog.qb-float .sp-head{cursor:move;user-select:none}
dialog.qb-float.dragging{opacity:.94;box-shadow:0 24px 60px #0b1e2b55}
/* v0.9.7: imposed deformations, section inset, stress window beam sketch, preview legend. */
.imposed-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:2px 0 6px}
.imposed-pick button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 7px;font-size:.72rem;line-height:1.15;text-align:center;border-radius:8px}
.imposed-pick button.active{background:#fff6ee;border-color:#d17739;box-shadow:inset 0 0 0 1px #d17739;color:#7a3c12}
.imposed-icon{flex:none;vertical-align:middle}
.group-title .imposed-icon{margin-right:6px;margin-top:-2px}
.imposed-on{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:9px;background:#d17739;color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;vertical-align:middle}
.imposed-card{border:1px solid #efd2b8;background:#fffaf5}
.imposed-card.imposed-shrinkage,.imposed-card.imposed-creep{border-left-color:#c4502f}
.imposed-card:not(.on){background:#fff;opacity:.92}
.imposed-illu{display:block;width:100%;height:auto;margin:0 0 10px;border:1px solid #e3ebef;border-radius:8px}
.thermal-badge .imposed-icon{background:#fff;border-radius:4px;padding:1px}
#beam-section{pointer-events:none}
.st-beam-wrap{margin:2px 0 6px}
#st-beam{display:block;width:100%;max-width:820px;height:auto;margin:0 auto;cursor:ew-resize;touch-action:none;border-radius:8px}
#st-beam:focus-visible{outline:3px solid #20adba;outline-offset:2px}
.st-peek-legend{display:flex;gap:12px;flex-wrap:wrap;font-size:.72rem;font-weight:600;margin:0 0 2px}
.st-peek-legend span{display:inline-flex;align-items:center;gap:5px}
.st-peek-legend i{display:inline-block;width:16px;height:0;border-top:2.4px solid currentColor}
.st-peek-legend .st-max-text{color:#008378}
.st-peek-legend .st-min-text{color:#c97a1c}
.st-peek-legend .st-bar-key{color:var(--muted);font-weight:500}
.reaction-plot{width:100%;height:var(--plot-h);overflow:visible}
.reaction-plot text{font-family:"Segoe UI",sans-serif;font-size:calc(11.5px / var(--k,1));fill:var(--axis)}
.reaction-plot text.rv,.reaction-plot text.rm{font-weight:650;paint-order:stroke;stroke:#fff;stroke-width:calc(3px / var(--k,1))}
.reaction-plot text.rl{font-size:calc(11px / var(--k,1));font-weight:600;fill:#5d7d8c}
.reaction-plot text.rm{fill:#b5577a}
.reaction-plot line,.reaction-plot polygon,.reaction-plot path{vector-effect:non-scaling-stroke}
.reaction-plot .r-hit{cursor:pointer}
.reaction-plot .r-hit:hover{opacity:.75}
.reaction-row .chart-label small+small{margin-top:2px;font-size:.6rem}