/* Frame & truss analysis page (frame.html) — complements style.css, same visual language as analysis.html */
.fr-page{padding:24px 20px 0}
.fr-ed{overflow:hidden}
.fr-tools{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-bottom:1px solid var(--line);align-items:center}
.fr-tools button,.fr-view button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:6px 10px;font:inherit;font-size:14px;font-weight:600;color:var(--navy);cursor:pointer;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.fr-tools button:hover,.fr-view button:hover{background:var(--sky)}
.fr-tools button.on,.fr-view button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.fr-tools button i{font-style:normal;font-size:15px;line-height:1}
.fr-tools .sep{width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.fr-tools select{width:auto;max-width:190px;font-size:14px;padding:6px 8px}
.fr-tools .grow{flex:1}
.fr-opts{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;padding:8px 12px;background:var(--bg);border-bottom:1px solid var(--line);font-size:14px;min-height:46px}
.fr-opts:empty{display:none}
.fr-opts label{display:inline-flex;gap:6px;align-items:center;color:#33465c}
.fr-opts input{width:84px;padding:5px 7px;font-size:14px}
.fr-opts select{width:auto;max-width:220px;padding:5px 7px;font-size:14px}
.fr-cv{position:relative;background:#fbfdff;touch-action:none;user-select:none;-webkit-user-select:none}
.fr-cv svg{display:block;width:100%;direction:ltr;cursor:crosshair}
.fr-cv svg text{direction:ltr;unicode-bidi:plaintext;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.fr-cv.t-select svg{cursor:default}
.fr-zoom{position:absolute;top:8px;right:8px;display:flex;flex-direction:column;gap:4px}
.fr-zoom button{width:34px;height:34px;border:1px solid var(--line);background:#fff;border-radius:8px;font-size:18px;font-weight:700;color:var(--navy);cursor:pointer;padding:0}
.fr-zoom button:hover{background:var(--sky)}
.fr-status{position:absolute;bottom:6px;left:10px;right:54px;font-size:12px;color:#5a6b80;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fr-view{display:flex;flex-wrap:wrap;gap:6px;padding:10px 12px;border-top:1px solid var(--line);align-items:center}
.fr-view select{width:auto;font-size:14px;padding:6px 8px}
.fr-view .chk{margin:0 4px}
.fr-view .lbl{font-size:13px;color:var(--muted);font-weight:600}
#insp:not(:empty){border-top:1px solid var(--line);padding:10px 12px;background:#fffdf5}
#insp .t{font-weight:700;color:var(--navy);font-size:14px;margin-bottom:6px}
.fr-grid{padding-top:20px}
.fr-grid .calc{padding:0}
.fr-item{border:1px solid var(--line);border-radius:10px;padding:8px;margin-bottom:8px}
.fr-item.sel{border-color:var(--blue);box-shadow:0 0 0 2px #1f6fd133}
.fr-row{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center}
.fr-row+.fr-row{margin-top:6px}
.fr-row label{font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:2px;flex:1 1 70px;min-width:62px}
.fr-row label.w{flex:2 1 140px}
.fr-row label.c{flex-direction:row;align-items:center;gap:5px;font-size:13px;color:#33465c;flex:0 0 auto;min-width:0}
.fr-row label.c input{width:auto}
.fr-row input,.fr-row select{padding:6px 7px;font-size:14px}
.fr-row .id{font-weight:700;color:var(--navy);min-width:34px;font-size:14px}
.fr-row .x{border:0;background:none;color:#c0392b;cursor:pointer;font-size:20px;line-height:1;margin-inline-start:auto;padding:2px 6px}
.fr-add{border:1px dashed #b9c6d8;background:#f8fafd;border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--navy);font-weight:600;width:100%;margin-top:4px;font:inherit;font-size:14px}
.fr-tabbody{padding:14px 18px;max-height:640px;overflow:auto}
.fr-tabbody .f{grid-template-columns:1fr 170px}
.fr-hint{font-size:13px;color:var(--muted);margin:0 0 10px}
.fr-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin:6px 0 10px}
.fr-kpi div{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.fr-kpi b{display:block;font-size:19px;color:var(--navy)}.fr-kpi span{font-size:12px;color:var(--muted)}
.fr-eq{border-radius:10px;padding:9px 12px;font-size:14px;margin:6px 0 10px}
.fr-eq.ok{background:var(--ok-bg);color:var(--ok)}.fr-eq.nok{background:var(--bad-bg);color:var(--bad)}
.fr-tbl{overflow-x:auto}
.fr-tbl table.checks td,.fr-tbl table.checks th{padding:6px 5px;white-space:nowrap}
.fr-tbl .dz{display:flex;gap:4px;flex-wrap:wrap}
.fr-tbl .dz a{font-size:12px;padding:4px 8px;border-radius:7px;border:1px solid var(--line);background:#fff;color:var(--navy);font-weight:600;white-space:nowrap}
.fr-tbl .dz a:hover{background:var(--sky);text-decoration:none}
.fr-tbl tr.sel td{background:#eef5ff}
.fr-stale{background:#fff8e6;border:1px solid #f3dfa8;color:#6b5210;border-radius:10px;padding:10px 14px;font-size:14px;margin:0 0 10px}
.fr-res details{margin:10px 0}
.fr-res summary{cursor:pointer;font-weight:700;color:var(--navy)}
.fr-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);padding:0 12px 10px}
.fr-legend i{display:inline-block;width:14px;height:4px;border-radius:2px;vertical-align:middle;margin-inline-end:4px}
.fr-res .n{direction:ltr;unicode-bidi:isolate}
@media (max-width:900px){
  .fr-page{padding:16px 16px 0}
  .fr-tools .lab{display:none}
  .fr-tools button{padding:6px 9px}
  .fr-tabbody{max-height:none}
}
@media (max-width:420px){
  .fr-page{padding:12px 12px 0}
  .fr-tools{gap:4px;padding:8px}
  .fr-tools select{max-width:150px}
  .fr-opts input{width:70px}
}
.fr-grid>.panel{min-width:0}
#tabs button{flex:1 1 20%}