/* Pipe Fittings & Flanges Chart — tool body styles (header, hero and footer come from /tools/assets/vercho-tools.css) */
:root{--good:#1d7447;--goodbg:#e3f3ea}
.pf-main{padding:18px var(--vt-pad) 34px}
.pf-types{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.pf-type{appearance:none;display:flex;flex-direction:column;align-items:stretch;background:var(--vt-paper);border:1px solid var(--vt-line);border-radius:2px;padding:8px 8px 10px;cursor:pointer;text-align:left;transition:border-color .2s,box-shadow .25s,transform .25s}
.pf-type img{display:block;width:100%;aspect-ratio:72/52;object-fit:contain;margin-bottom:6px}
.pf-type b{font:500 13.5px/1.25 var(--vt-sans);color:var(--vt-ink)}
.pf-type small{font:400 10px/1.4 var(--vt-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--vt-ink3);margin-top:3px}
.pf-type:hover{border-color:var(--vt-acc-line);transform:translateY(-2px);box-shadow:0 14px 26px -18px rgba(0,0,0,.28)}
.pf-type.on{border-color:var(--vt-acc);box-shadow:inset 0 0 0 1px var(--vt-acc)}
.pf-type.on small{color:var(--vt-acc-dk)}
.pf-bar{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end;background:var(--vt-paper);border:1px solid var(--vt-line);padding:14px 16px;margin:0 0 14px}
.pf-ctl{display:flex;flex-direction:column;gap:6px;min-width:130px}
.pf-ctl label,.pf-ctl .lb{font:400 10.5px/1 var(--vt-mono);letter-spacing:.2em;text-transform:uppercase;color:#7a7a85}
.pf-ctl select{appearance:none;font:400 15px/1.2 var(--vt-sans);color:#17171c;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23e2691a'/%3E%3C/svg%3E") no-repeat right 10px center;border:1px solid #dcdce0;border-radius:2px;padding:9px 30px 9px 10px;min-height:40px;cursor:pointer}
.pf-ctl select:focus{outline:2px solid var(--vt-acc);outline-offset:1px}
.pf-seg{display:inline-flex;border:1px solid #dcdce0;border-radius:2px;overflow:hidden;background:#fff}
.pf-seg button{appearance:none;border:0;background:none;font:500 12px/1 var(--vt-sans);letter-spacing:.12em;text-transform:uppercase;color:var(--vt-ink2);padding:0 14px;min-height:38px;cursor:pointer}
.pf-seg button+button{border-left:1px solid #dcdce0}
.pf-seg button.on{background:var(--vt-acc);color:#fff}
.pf-grid{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:14px;align-items:start}
@media (max-width:1060px){.pf-grid{grid-template-columns:minmax(0,1fr)}}
.pf-card{background:var(--vt-paper);border:1px solid var(--vt-line)}
.pf-card-h{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 12px;padding:16px 18px 12px;border-bottom:1px solid var(--vt-line2)}
.pf-card-h h2{font:400 21px/1.25 var(--vt-sans);color:var(--vt-ink);margin:0}
.pf-card-h h3{font:500 10.5px/1 var(--vt-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--vt-acc-dk);margin:0}
.pf-card-h small{font:400 11px/1.4 var(--vt-mono);letter-spacing:.06em;color:var(--vt-ink3)}
.pf-tbl{overflow:auto;max-height:680px}
.pf-tbl table{border-collapse:separate;border-spacing:0;width:100%}
.pf-tbl th{position:sticky;top:0;z-index:2;background:#f7f7f5;color:#7a7a85;font:500 10.5px/1.35 var(--vt-sans);letter-spacing:.14em;text-transform:uppercase;text-align:right;padding:9px 10px;border-bottom:1px solid var(--vt-line);white-space:nowrap;vertical-align:bottom}
.pf-tbl th .sym{display:block;font:600 12px/1.2 var(--vt-mono);letter-spacing:0;color:var(--vt-acc-dk);text-transform:none;margin-bottom:2px}
.pf-tbl td{font:400 13px/1.2 var(--vt-mono);color:#17171c;text-align:right;padding:9px 10px;border-bottom:1px solid var(--vt-line2);white-space:nowrap}
.pf-tbl th:first-child,.pf-tbl td:first-child{position:sticky;left:0;text-align:left;z-index:1}
.pf-tbl th:first-child{z-index:3}
.pf-tbl td:first-child{background:#fff;font:500 14px/1.2 var(--vt-sans)}
.pf-tbl tbody tr{cursor:pointer}
.pf-tbl tbody tr:hover td{background:#fbfaf8}
.pf-tbl tbody tr.sel td{background:var(--vt-acc-soft)}
.pf-tbl tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--vt-acc)}
.pf-tbl td.w{color:var(--vt-acc-dk);font-weight:600}
.pf-tbl td.na{color:#c4c1bb}
.pf-side{display:flex;flex-direction:column;gap:14px}
.pf-prod{position:relative;background:radial-gradient(420px 220px at 50% 38%,#fff 0%,#f7f6f3 70%);border-bottom:1px solid var(--vt-line2)}
.pf-prod img{display:block;width:100%;aspect-ratio:72/52;object-fit:contain}
.pf-prod .std{position:absolute;left:12px;top:12px;font:500 10px/1 var(--vt-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--vt-acc-dk);background:var(--vt-acc-soft);border:1px solid var(--vt-acc-line);padding:5px 7px}
.pf-prod-b{padding:14px 18px 16px}
.pf-prod-b h2{font:400 20px/1.25 var(--vt-sans);margin:0 0 4px;color:var(--vt-ink)}
.pf-prod-b p{font:300 14.5px/1.6 var(--vt-sans);color:var(--vt-ink2);margin:0}
.pf-draw{padding:12px 14px 6px}
.pf-draw svg{display:block;width:100%;height:auto}
.pf-legend{padding:2px 18px 16px;font:400 13px/1.55 var(--vt-sans);color:var(--vt-ink2)}
.pf-legend b{font:600 12.5px var(--vt-mono);color:var(--vt-acc-dk)}
.pf-sel{padding:12px 18px 16px}
.pf-sel .hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 0 10px}
.pf-sel .hd b{font:400 26px/1 var(--vt-sans);color:var(--vt-ink)}
.pf-sel .hd span{font:400 11px/1 var(--vt-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--vt-ink3)}
.pf-sel dl{display:grid;grid-template-columns:1fr auto;gap:0;margin:0}
.pf-sel dt,.pf-sel dd{margin:0;padding:7px 0;border-bottom:1px solid var(--vt-line2);font:400 13.5px/1.3 var(--vt-sans);color:var(--vt-ink2)}
.pf-sel dt i{font:600 11.5px var(--vt-mono);font-style:normal;color:var(--vt-acc-dk);display:inline-block;min-width:34px}
.pf-sel dd{text-align:right;font:500 13.5px/1.3 var(--vt-mono);color:#17171c}
.pf-sel dd.w{color:var(--vt-acc-dk)}
.pf-notes{padding:12px 18px 16px}
.pf-notes ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.pf-notes li{font:400 14px/1.55 var(--vt-sans);color:var(--vt-ink)}
.pf-notes li b{font-weight:500}
.pf-notes a{color:var(--vt-acc-dk)}
.pf-tag{display:inline-block;font:500 9.5px/1 var(--vt-mono);letter-spacing:.16em;text-transform:uppercase;padding:4px 6px;margin-right:8px;vertical-align:2px}
.pf-tag.u{background:var(--goodbg);color:var(--good)}
.pf-tag.c{background:var(--vt-acc-soft);color:var(--vt-acc-dk)}
.pf-guide{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.pf-guide table{width:100%;border-collapse:collapse}
.pf-guide th{font:500 10.5px/1.3 var(--vt-sans);letter-spacing:.14em;text-transform:uppercase;color:#7a7a85;background:#f7f7f5;text-align:left;padding:8px 12px;border-bottom:1px solid var(--vt-line)}
.pf-guide td{font:400 14px/1.45 var(--vt-sans);color:var(--vt-ink);padding:9px 12px;border-bottom:1px solid var(--vt-line2);vertical-align:top}
.pf-guide td+td{color:var(--vt-ink2)}
.pf-guide ul{list-style:none;margin:0;padding:14px 18px 16px;display:grid;gap:10px}
.pf-guide li{font:400 14px/1.55 var(--vt-sans);color:var(--vt-ink2)}
.pf-guide li b{color:var(--vt-ink);font-weight:500}
.pf-hide{display:none!important}
@media (max-width:640px){.pf-types{grid-template-columns:repeat(2,minmax(0,1fr))}.pf-ctl{min-width:calc(50% - 8px)}.pf-card-h h2{font-size:19px}}
@media print{.vt-hdr,.vt-hero,.vt-foot,.pf-bar,.pf-types{display:none!important}}