@charset "UTF-8";
/* Inertia choice, deck joint, full-width layout on 1920 × 1080 (v0.9.99 and up). */
/* v0.9.99 — inertia choice, deck joint, calculation sheet with V/M diagrams */
.inertia-choice{margin:2px 0 12px;padding:8px 10px 6px;border:1px solid var(--line);border-radius:8px;background:#fbfcfd;min-width:0}
.inertia-choice legend{padding:0 4px;font-size:.8125rem;color:var(--muted)}
.ic-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ic-opt{position:relative;display:flex;gap:7px;align-items:flex-start;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:#fff;cursor:pointer;min-width:0}
.ic-opt input{width:15px;min-height:15px;margin:2px 0 0;accent-color:var(--teal);flex:none}
.ic-opt b{display:block;font-size:.8125rem;color:var(--ink)}
.ic-opt small{display:block;font-size:.6875rem;color:var(--muted);line-height:1.3}
.ic-opt.on{border-color:#7fc8b6;background:#f2fbf8}
.ic-opt.off{opacity:.5;cursor:default}
.ic-read{margin:7px 2px 2px;font-size:.75rem;color:var(--muted)}
.ic-read b{color:var(--ink);font-variant-numeric:tabular-nums}
.ic-legacy{margin:8px 0 4px;font-size:.75rem}
.ic-noslab{margin:6px 0 2px;font-size:.75rem}
.ic-noslab .text-button{color:var(--teal);font-weight:600}
.joint-kind-note{margin:-4px 0 10px;font-size:.75rem;color:var(--muted)}
.joint-band{fill:#5d7684;fill-opacity:.09}
.joint-line{stroke:#d4573b;stroke-width:1.4;stroke-dasharray:5 3}
.joint-line.hinge{stroke:#b9852a}
.res-bottom{margin:14px 0 0;padding:12px;border:1px solid var(--line);border-radius:10px;background:#fbfcfd}
.res-sum-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 10px}
.res-sum-head b{font-size:.875rem;color:var(--navy)}
.res-sum-head small{color:var(--muted)}
.res-bottom .res-kpis{margin-top:8px}
.res-chips{display:flex;flex-wrap:wrap;gap:6px;align-self:end;padding-bottom:4px}
.res-chip{display:inline-flex;align-items:baseline;gap:6px;padding:3px 9px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:.8125rem;font-variant-numeric:tabular-nums;color:var(--ink)}
.res-chip b{font-size:.6875rem;color:var(--muted)}
.res-chip.ok{border-color:#bfe2d7;color:#00665f}
.res-chip.ng{border-color:#e3b2aa;background:#fff7f5;color:#b23a2b}
.res-note-controls{grid-template-columns:auto auto minmax(0,1fr)}
.res-eff .segmented{display:inline-flex}
.res-diagrams{padding:4px 16px 0}
.rp-row{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;border-top:1px solid #edf1f4}
.rp-label{font-size:.875rem;font-weight:600}
.rp-label small{display:block;color:var(--muted);font-size:.6875rem;font-weight:400;margin-top:3px}
.rp-label small.res-key{display:flex;align-items:center;gap:4px;margin-top:6px;color:var(--ink);font-weight:600;white-space:nowrap}
.rp-label small.res-key.ng{color:#b23a2b}
svg.res-plot{display:block;max-width:100%;height:auto;cursor:ew-resize;touch-action:none;user-select:none;overflow:visible}
svg.res-plot:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:6px}
svg.res-plot text{font-family:"Segoe UI",sans-serif}
.rp-grid{stroke:#edf2f5}
.rp-zero{stroke:#9db4c1;stroke-width:.8}
.rp-support{stroke:#dbe5eb;stroke-dasharray:3 3}
.rp-tick{font-size:11px;fill:var(--axis);font-variant-numeric:tabular-nums}
.rp-peak{font-size:11.5px;font-weight:600;fill:var(--ink);paint-order:stroke;stroke:#fff;stroke-width:3px}
.rp-cursor{stroke:#426774;stroke-dasharray:3 3}
.rp-value{font-size:12.5px;font-weight:700;paint-order:stroke;stroke:#fff;stroke-width:3px}
svg.res-plot .res-label{font-size:11.5px;stroke-width:3px}
.res-diag-help{margin:2px 16px 8px 120px;font-size:.6875rem;color:var(--muted)}
.res-sheet{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:12px 16px;align-items:start;padding:0 16px 16px}
.res-side{display:grid;gap:12px;min-width:0}
.res-main{display:grid;gap:12px;min-width:0}
.res-table tr.res-sub th{padding-top:7px;font-weight:650;color:var(--navy);font-size:.75rem}
.res-loads-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:6px 16px}
.res-loads caption{text-align:left;font-size:.75rem;font-weight:650;color:var(--navy);padding:2px 0 4px}
.res-loads th{color:var(--ink)}
.res-on{color:var(--muted)}
.res-loads tr.res-dim th,.res-loads tr.res-dim td{opacity:.45}
.res-loads-block .res-table th{background:#edf3f6;width:72%}
@media(max-width:820px){
  .res-sheet{grid-template-columns:1fr}
  .res-note-controls{grid-template-columns:1fr}
  .res-diag-help{margin-left:16px}
  .rp-row{grid-template-columns:1fr}
}
.sp-use-label{align-self:center;font-size:.75rem;color:var(--muted)}
.sp-actions button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.sp-foot{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;justify-content:flex-end;gap:14px;padding:10px 16px;background:#f3f7f9;border-top:1px solid var(--line)}
.sp-foot span{font-size:.75rem;color:var(--muted);max-width:640px}
.sp-ok{min-width:96px;background:var(--navy);border-color:var(--navy);color:#fff}
.sp-ok:hover:not(:disabled){background:#1b4157;color:#fff}
/* v1.0 (feedback V1.0): full-width layout on 1920 × 1080, slimmer header with
   the preliminary-values notice and a GitHub link, two-line metrics, diagrams
   sized from the window height, windows kept inside the screen. */
.workspace,.focus-results .workspace{max-width:none}
.topbar{height:58px;gap:18px}
.brand{font-size:1.38rem}
.brand-mark{font-size:2.2rem}
.top-warning{display:flex;align-items:center;gap:8px;margin:0 auto;padding:4px 12px;min-width:0;border:1px solid #3d6274;border-radius:999px;background:#163a50;color:#d3e2e9;font-size:.75rem;line-height:1.35;justify-content:flex-start}
.top-warning>span[data-i18n]{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.top-warning .warning-symbol{flex:none;border-color:#f3c46b;color:#f3c46b;line-height:13px}
.top-warning .metrics-flag{background:#f3c46b;border-color:#f3c46b;color:#3d2a05}
.header-right{gap:16px}
.github-link{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;color:#c5d8e0;transition:color .15s,background .15s}
.github-link svg{width:22px;height:22px}
.github-link:hover{color:#fff;background:#17384c}
.github-link:focus-visible{outline:2px solid #20adba;outline-offset:2px}
.metric{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:baseline;padding:7px 14px 8px}
.metric-label{grid-column:1/-1}
.metric-value{margin-top:1px;font-size:1.35rem;line-height:1.15}
.metric-location{margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.metrics{margin-top:10px}
.chart-toolbar{margin-top:8px}
.result-view{padding-top:10px}
.display-controls{margin-bottom:6px}
@media(min-width:801px){
  :root{--plot-h:clamp(124px,calc((100vh - 440px) / 3),240px)}
  .focus-results{--plot-h:clamp(140px,calc((100vh - 420px) / 3),260px)}
  #beam{height:118px}
  .structure-panel{padding-top:8px;padding-bottom:6px}
  .inputs{max-height:calc(100vh - 92px)}
}
@media(min-width:801px) and (max-height:950px){
  .topbar{height:54px}
  .workspace{padding-top:12px}
  #beam{height:104px}
}
@media(max-width:1000px){
  .topbar{flex-wrap:wrap;height:auto;min-height:58px;padding-top:8px;padding-bottom:8px;row-gap:6px}
  .top-warning{order:3;flex:1 1 100%;margin:0;border-radius:7px}
  .top-warning>span[data-i18n]{white-space:normal}
}
@media(max-width:800px){
  .topbar{min-height:62px}
}
/* Every window fits the screen height; its body scrolls. */
dialog.section-dialog,dialog.qb-float{max-height:calc(100vh - 24px)}
/* Section properties on a wide screen: three-column inputs, results tables in
   two columns, so the composite case fits a 1080p screen without scrolling. */
@media(min-width:1700px){
  .section-dialog:not(.stress-dialog):not(.method-dialog):not(.res-dialog):not(.axle-dialog){width:min(1840px,97vw)}
  #section-dialog .sp-body{grid-template-columns:minmax(0,1.05fr) minmax(0,.8fr) minmax(0,1.7fr)}
  #section-dialog .sp-inputs .sp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  #section-dialog .sp-results{column-count:2;column-gap:16px}
  #section-dialog .sp-results>*{break-inside:avoid}
  #section-dialog .sp-results>h3{break-after:avoid;margin-top:0}
}
@media(min-width:1700px){
  #section-dialog .sp-body{padding:10px 16px;gap:14px}
  #section-dialog .sp-body h3{margin:8px 0 5px}
  #section-dialog .sp-notes{margin-bottom:8px}
}
/* v1.01: one toolbar for the result views and the display modes; V, M, δ and
   the reactions fit a 1920 × 1080 screen, EI below them. */
:root{--reaction-ratio:.55}
.chart-toolbar .display-controls{flex:1 1 auto;justify-content:flex-end;margin:0;padding:4px 0}
.chart-toolbar .view-tabs{flex:0 0 auto}
body[data-view]:not([data-view="diagrams"]) .chart-toolbar .display-controls{display:none}
.reaction-row{min-height:0}
.reaction-plot{height:calc(var(--plot-h) * var(--reaction-ratio))}
/* Height of V, M and δ: what is left under the beam frame, the summary cards and
   the toolbar, shared by three diagrams and the reactions (0.55 of one). */
@media(min-width:801px){
  :root{--plot-h:clamp(118px,calc((100vh - 415px) / 3.55),240px)}
  .focus-results{--plot-h:clamp(130px,calc((100vh - 395px) / 3.55),260px)}
}
@media(min-width:801px) and (max-height:950px){
  :root{--plot-h:clamp(110px,calc((100vh - 392px) / 3.55),240px)}
}
/* v1.01: Sections tab — one value per line, label on the left, compact box. */
#input-content .section-card[data-sec] .field-row{display:block}
#input-content .section-card[data-sec] .field-row>.field,#input-content .section-card[data-sec] .field{display:grid;grid-template-columns:minmax(0,1fr) 108px;align-items:center;column-gap:10px;margin:0 0 6px}
#input-content .section-card[data-sec] .field>span{margin:0;font-size:.8rem;line-height:1.25}
#input-content .section-card[data-sec] .field input{min-height:30px;padding:4px 8px}
#input-content .section-card[data-sec] .field:has(select){grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr)}
#input-content .section-card[data-sec] .field select{min-height:30px;padding:3px 6px}
#input-content .section-card[data-sec] .computed-field output{min-height:30px;padding:4px 8px}
/* Zones of a span: a bar to scale, then one table row per zone. */
.zone-bar{display:flex;height:20px;margin:8px 0 6px;border-radius:4px;overflow:hidden;background:#eef3f6;font-size:.6875rem;font-weight:600}
.zb-seg{display:flex;align-items:center;justify-content:center;min-width:0;overflow:hidden;white-space:nowrap;background:#d7ece8;color:#00564f;border-right:2px solid #fff}
.zb-seg:last-child{border-right:0}
.zb-seg.variable{background:linear-gradient(90deg,#d7ece8,#9fd3c8)}
.zone-table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:.75rem}
.zone-table th{font-weight:600;color:var(--muted);text-align:left;padding:2px 2px 4px;font-size:.6875rem}
.zone-table th:nth-child(1){width:14%}.zone-table th:nth-child(2){width:24%}.zone-table th:nth-child(3),.zone-table th:nth-child(4){width:15%}.zone-table th:nth-child(5){width:23%}.zone-table th:nth-child(6){width:9%}
.zone-table td{padding:2px;vertical-align:middle;border-top:1px solid var(--line)}
.zone-table input,.zone-table select{width:100%;min-height:28px;padding:2px 4px;font-size:.75rem}
.zone-table select{appearance:none;-webkit-appearance:none;padding-right:13px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23566e7c'/%3E%3C/svg%3E") right 4px center/7px 5px no-repeat}
.zone-table td:first-child input{text-align:right}
.zone-table .zt-none{display:block;text-align:center;color:var(--muted)}
.zone-table .icon-button{min-height:0;padding:2px 4px}
.span-zones .add-button{margin-top:6px}