/* channelstrut.com design system — linked by every page.
 * Source: data/ref-study/design-direction-2026-09-18.md + its "修订 2026-09-18" section.
 * Page-specific rules stay in that page's own <style>; anything a second page
 * could want lives here. One rule per line, like the rest of this repo.
 * 1 tokens · 2 base · 3 shell · 4 layout · 5 components · 6 print */

/* --- 1 tokens ----------------------------------------------------------- */
/* --stage never flips: the product renders are baked on white with no alpha
   (DESIGN.md 2026-08-20), so a dark stage would show a white square. A light
   product stage inside a dark page is the decision, not an oversight.
   --band is the block background, and that one does flip. */
:root,.page{
--bg:#FFFFFF;--band:#F5F6F8;--surface:#FAFAFC;--stage:#F5F5F7;
--text:#17191C;--muted:#5B6370;--border:#C9CFD8;--rule:#E8EAEF;
--accent:#1B3BC2;--accent-weak:#EEF1FC;--on-accent:#FFFFFF;
--d1:52px;--d1-sm:44px;--d2:34px;--d3:21px;--body:17px;--sm:14px;--cap:12px;--num:40px;
--measure:50ch;
--s1:8px;--s2:16px;--s3:24px;--s4:40px;--s5:64px;--s6:96px;--s7:128px;
--wrap:1120px;--gutter:24px;--radius:12px;--radius-sm:8px;
--font-sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]),.page:not([data-theme="light"]){--bg:#0B0C0E;--band:#141619;--surface:#141619;--text:#E7E9EC;--muted:#98A1AC;--border:#2A2E35;--rule:#1E2126;--accent:#8FA3FF;--accent-weak:#171B2E;--on-accent:#0B0C0E}}
:root[data-theme="dark"],.page[data-theme="dark"]{--bg:#0B0C0E;--band:#141619;--surface:#141619;--text:#E7E9EC;--muted:#98A1AC;--border:#2A2E35;--rule:#1E2126;--accent:#8FA3FF;--accent-weak:#171B2E;--on-accent:#0B0C0E}
@media (max-width:719px){:root,.page{--d1:34px;--d1-sm:30px;--d2:26px;--d3:19px;--body:16px;--num:32px;--s6:64px;--s7:80px;--gutter:20px}}

/* --- 2 base ------------------------------------------------------------- */
html,body{margin:0;padding:0}
.page{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--body);line-height:1.6}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
/* Accent on body text is 2.08:1, so a prose link cannot carry its meaning in
   color alone (WCAG 1.4.1). UI links — nav, cards, buttons, footer — may. */
.page a{color:var(--accent);text-decoration:none}
.page a:hover{text-decoration:underline}
.page main p a,.page main li a,.page main dd a,.page main td a,.page main .byl a{text-decoration:underline;text-underline-offset:2px}
.page :focus-visible{outline:2px solid var(--accent);outline-offset:2px}
h1{font-size:var(--d1-sm);font-weight:700;line-height:1.05;letter-spacing:-.03em;margin:var(--s2) 0;text-wrap:balance}
h2{font-size:var(--d3);font-weight:600;line-height:1.3;letter-spacing:-.01em;margin:var(--s4) 0 var(--s1)}
h3{font-size:var(--body);font-weight:600;margin:var(--s3) 0 var(--s1)}
/* Big-section header for the long reference pages (finishes, pipe support,
   metric, compliance): one d2 per major chapter, existing 21px h2s inside a
   chapter step down to h3 so the page reads in two levels, not sixteen. */
h2.d2{font-size:var(--d2);font-weight:650;line-height:1.12;letter-spacing:-.02em;margin-top:var(--s6)}
p{margin:0 0 var(--s2);max-width:var(--measure);text-wrap:pretty}
.cap{font-family:var(--font-mono);font-size:var(--cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.eyebrow{font-family:var(--font-mono);font-size:var(--cap);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0}
.src{font-family:var(--font-mono);font-size:var(--cap);line-height:1.5;color:var(--muted);margin:var(--s1) 0 0;max-width:78ch}
.lede{font-size:var(--d3);line-height:1.45;color:var(--muted);max-width:58ch}
.jump{font-size:var(--sm)}
.answer{border-left:3px solid var(--accent);padding:2px 0 2px var(--s2);margin:0 0 var(--s3);font-size:var(--body);max-width:var(--measure)}
.abox{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);padding:var(--s2);margin:0 0 var(--s2)}
.abox p{margin:0;max-width:none}
.warn{border-left:3px solid var(--accent);padding:2px 0 2px var(--s2);margin:0 0 var(--s3);font-size:var(--sm)}
.warn p{margin:0 0 var(--s1)}
.warn p:last-child{margin:0}
.byl{font-family:var(--font-mono);font-size:var(--cap);color:var(--muted);margin:0 0 var(--s3)}
.byl a{color:var(--muted)}
.crumb{font-family:var(--font-mono);font-size:var(--cap);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:var(--s2) 0 var(--s1)}
.crumb a{color:var(--muted)}

/* --- 3 shell ------------------------------------------------------------ */
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}
.ubar{border-bottom:1px solid var(--border);background:var(--band);font-size:var(--cap);color:var(--muted)}
.ubar .wrap{display:flex;align-items:center;justify-content:space-between;gap:4px var(--s3);flex-wrap:wrap;min-height:32px;padding-top:var(--s1);padding-bottom:var(--s1)}
.ubar a{color:var(--muted)}
.hdr{border-bottom:1px solid var(--border)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);flex-wrap:wrap;min-height:64px;padding-top:var(--s1);padding-bottom:var(--s1)}
.wordmark{font-weight:700;font-size:var(--d3);letter-spacing:-.02em;color:var(--text)}
.wordmark b{color:var(--accent);font-weight:700}
.nav{display:flex;align-items:center;gap:var(--s3);font-size:var(--sm)}
.drop{position:relative}
.dtog{font:inherit;font-size:var(--sm);line-height:inherit;color:var(--accent);background:none;border:0;padding:0;cursor:pointer}
.dmenu{position:absolute;left:0;top:100%;z-index:30;display:none;min-width:262px;padding:var(--s1) 0;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.drop:hover .dmenu,.drop:focus-within .dmenu{display:block}
.dmenu a{display:block;padding:var(--s1) var(--s2);font-size:var(--sm);line-height:1.35;color:var(--text)}
.dmenu a:hover{background:var(--band);text-decoration:none}
.dmenu b{display:block;font-weight:600}
.dmenu i{display:block;font-style:normal;font-size:var(--cap);color:var(--muted)}
.dmenu>b{display:block;margin-top:var(--s1);padding:var(--s1) var(--s2) 4px;border-top:1px solid var(--border);font-size:var(--cap);font-weight:600;color:var(--muted)}
.hact{display:flex;align-items:center;gap:var(--s1);flex-wrap:wrap}
.psearch{position:relative;margin:0}
.psearch input{box-sizing:border-box;width:240px;min-height:40px;padding:0 var(--s2);font:inherit;font-size:var(--sm);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);-webkit-appearance:none}
.psearch input::placeholder{color:var(--muted);opacity:1}
.psearch input:focus{outline:2px solid var(--accent);outline-offset:-1px}
.qres{position:absolute;left:0;top:46px;z-index:30;width:340px;max-width:78vw;margin:0;padding:4px 0;list-style:none;background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,.14)}
.qres a{display:block;padding:var(--s1) var(--s2);font-size:var(--sm);line-height:1.3;color:var(--text)}
.qres a:hover,.qres li.on a{background:var(--band);text-decoration:none}
.qres b{font-family:var(--font-mono);font-weight:600}
.qres i{font-style:normal;font-size:var(--cap);color:var(--muted)}
.qres span{display:block;font-size:var(--cap);color:var(--muted)}
/* The home-hero lookup: the same search as the header, one size up, with the
   quote button on the input's row. The results list is pinned to the input's
   grid cell, so on a phone it opens under the input, over the button. */
.look{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px var(--s2);max-width:600px;margin:0 0 var(--s1)}
.look label{grid-column:1/-1;font-size:var(--sm);font-weight:600;line-height:1.35}
.page .look input{width:100%;min-height:52px;font-family:var(--font-mono);font-size:var(--body);border-color:var(--muted)}
.page .look .btn{min-height:52px}
.look .qres{grid-column:1/2;grid-row:2/3;top:100%;width:100%;max-width:none;margin-top:4px}
.page .look .qres a{text-decoration:none}
@media (max-width:559px){.look{grid-template-columns:1fr}}
.page[data-ph="on"] .ph{background:var(--accent-weak);color:var(--accent);border-radius:3px;padding:0 2px}
.ftr{display:block;margin-top:var(--s6);padding-bottom:0;border-top:1px solid var(--border);font-size:var(--sm);color:var(--muted)}
.ftr a{color:var(--muted)}
.ftr .wrap{padding-top:var(--s3);padding-bottom:var(--s4)}
.ftr p{margin:0 0 var(--s1);max-width:none}
.ftr .fnav a{margin-right:var(--s3)}
.ftr .fdis{margin:0;font-size:var(--cap)}
@media (max-width:719px){.hact{width:100%}.psearch{flex:1 1 170px}.psearch input{width:100%}.nav{gap:var(--s2);flex-wrap:wrap}}

/* --- 4 layout ----------------------------------------------------------- */
/* Block rhythm: a section pays for the space above it and none below it; a
   banded block pays for both, and the section after it pays for neither. That
   keeps 96px at 96px instead of 192px at every band edge. */
.sec{padding:var(--s6) 0 0}
.band{background:var(--band);padding:var(--s6) 0}
.band+.sec,.band+.band,.sec:first-child{padding-top:0}
.band .wrap>:first-child,.sec>.wrap>:first-child{margin-top:0}
/* The render is baked on white with no alpha, so the image is given the whole
   plate: an inset image would draw a white square inside the grey stage. */
.stage{background:var(--stage);color:#17191C;border:1px solid var(--border);border-radius:var(--radius);display:flex;align-items:center;justify-content:center;aspect-ratio:1;overflow:hidden}
.stage img{display:block;width:100%;height:100%;object-fit:contain}

/* --- 5 components ------------------------------------------------------- */
/* `.page .btn` is two classes deep on purpose: a bare `.card a` or `.scard p a`
   rule must never repaint the label on a filled button (blue text on blue). */
.page .btn,.page .qbtn,.page .abtn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;box-sizing:border-box;padding:12px 20px;font:inherit;font-size:var(--sm);font-weight:600;line-height:1.2;text-align:center;text-decoration:none;color:var(--accent);background:var(--bg);border:1px solid var(--accent);border-radius:var(--radius-sm);cursor:pointer}
/* In dark mode --accent is a light blue, so white-on-accent would drop to
   2.2:1. --on-accent flips with the theme and the filled button stays legible. */
.page .btn.pri,.page .qbtn{color:var(--on-accent);background:var(--accent)}
.page .btn:hover,.page .qbtn:hover,.page .abtn:hover{text-decoration:none;opacity:.88}
.page .btn.pri:hover,.page .qbtn:hover{color:var(--on-accent)}
.page .btn[disabled],.page button.qbtn[disabled]{opacity:.55;cursor:default}
.page .btn.quiet{color:var(--text);background:var(--bg);border-color:var(--border)}
.page .btn.quiet:hover{border-color:var(--accent)}
.tlink{font-size:var(--sm);font-weight:600}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:0 0 var(--s1)}
.cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s3) 0 0}
.cta .note{font-size:var(--sm);color:var(--muted);max-width:44ch}
/* Supply facts — the Protolabs certification bar, filled with the four things a
   buyer has to know before writing. */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3);margin:var(--s4) 0 0;padding:var(--s3) 0 0;border-top:1px solid var(--border);max-width:none}
.facts div{min-width:0}
.facts .k{display:block;font-family:var(--font-mono);font-size:var(--cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.facts .v{display:block;margin-top:4px;font-size:var(--body);font-weight:600;line-height:1.3}
.facts .v.num{font-family:var(--font-mono);font-size:var(--num);font-weight:700;letter-spacing:-.02em;line-height:1.05}
@media (max-width:859px){.facts{grid-template-columns:repeat(2,1fr);gap:var(--s2) var(--s3)}}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--s2);margin:var(--s3) 0 0}
.cards.trio{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{display:block;border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);padding:var(--s1);color:var(--text)}
.card:hover{border-color:var(--accent);text-decoration:none}
.card img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:contain;background:var(--stage);border:0;border-radius:var(--radius-sm)}
.card .nm{display:block;font-size:var(--sm);font-weight:600;line-height:1.3;margin-top:var(--s1)}
.card .rg,.card .ds{display:block;font-size:var(--cap);color:var(--muted);line-height:1.4}
.card .rg{font-family:var(--font-mono)}
.scards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s2);margin:var(--s3) 0 0}
.scard{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3);background:var(--bg)}
.scard b{display:block;font-size:var(--d3);font-weight:600;line-height:1.3;margin:0 0 var(--s1)}
.scard p{margin:0 0 var(--s2);font-size:var(--sm);line-height:1.5;color:var(--muted);max-width:none}
.scard p:last-child{margin:0}
.terms{margin:var(--s3) 0;font-size:var(--body)}
.terms dt{font-weight:600;margin:0 0 2px}
.terms dd{margin:0 0 var(--s2);color:var(--muted);max-width:var(--measure)}
.reflist,.rel{margin:var(--s2) 0;padding-left:var(--s3);font-size:var(--body);line-height:1.6;max-width:var(--measure)}
.reflist li,.rel li{margin:0 0 var(--s1)}
.rel b{font-family:var(--font-mono);font-weight:600}
/* Capped at 560px so a 1200/1600px square render does not eat a full screen
   of height on its own — the same product-plate size as the home hero, not a
   full-bleed poster. border matches .stage so it reads as the same plate. */
.leadfig{margin:var(--s3) 0;max-width:560px}
.leadfig img{display:block;width:100%;height:auto;border-radius:var(--radius);background:var(--stage);border:1px solid var(--border)}
.leadfig figcaption{margin-top:var(--s1);font-family:var(--font-mono);font-size:var(--cap);color:var(--muted);max-width:var(--measure)}
/* Small inline part photo beside a subsection heading, so a run of tables gets
   a visual break where a matching render actually exists. Reuses .stage —
   same product-plate look as the home hero and the type pages, just capped
   narrower. No image is inserted where nothing in site/img matches. */
.figsm{max-width:200px;margin:var(--s2) 0 var(--s3)}
.figsm figcaption{margin-top:4px;font-family:var(--font-mono);font-size:var(--cap);color:var(--muted)}
/* Tables: mono 14, 12/16 padding, first column dark and bold, one faint rule
   per row — and no zebra behind it. One of the two, never both. */
.tblwrap{position:relative;overflow-x:auto;margin:var(--s2) 0 0;border:1px solid var(--border);border-radius:var(--radius-sm)}
/* Phone: a table wider than the viewport used to scroll silently, with no
   hint, no fixed first column and row height set by columns you cannot see.
   The hint is always in the markup — harmless on a table that already fits. */
@media (max-width:719px){
.tblwrap::before{content:"Scroll sideways for more columns \2192";display:block;padding:8px 16px 0;font-family:var(--font-sans);font-size:12px;color:var(--muted)}
.tblwrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:24px;background:linear-gradient(to right,transparent,var(--bg));pointer-events:none}
.tblwrap table tbody td:first-child,.tblwrap table thead th:first-child{position:sticky;left:0;background:var(--bg)}
}
table{border-collapse:collapse;width:100%;font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:var(--sm)}
thead th{position:sticky;top:0;background:var(--bg);border-bottom:1px solid var(--border);font-size:var(--cap);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 16px}
tbody td{padding:12px 16px;border-bottom:1px solid var(--rule)}
tbody tr:last-child td{border-bottom:none}
tbody td:first-child{color:var(--text);font-weight:600}
tbody tr:hover{background:var(--band)}
td:last-child,th:last-child{text-align:right;white-space:nowrap}
tr:target td{background:var(--band);box-shadow:inset 3px 0 0 var(--accent)}
.na,.nl,tbody td.na,tbody td.nl{color:var(--muted);font-weight:400}
.cf{color:var(--accent);font-weight:600}
.dag{color:var(--accent);font-weight:700}
sup.s{font-size:9.5px;font-weight:400;letter-spacing:.03em;color:var(--muted);vertical-align:super}
.qt .typ{color:var(--muted);white-space:nowrap;font-weight:400}
.qt td:nth-child(3){white-space:nowrap}
.spec td:last-child,.spec th:last-child{text-align:left;white-space:normal}
.spec td:nth-child(2){white-space:nowrap}
.spec td,.spec th,.xp td,.xp th{vertical-align:top}
.spec td.pg,.xp td.why,.xp td.pg{white-space:normal;font-size:var(--cap);line-height:1.45;color:var(--muted);font-weight:400}
.xp{min-width:520px}
@media (max-width:719px){.xp{min-width:460px}table{font-size:13px}tbody td,thead th{padding:10px 12px}}
/* Clipped table: first ten rows, the rest one label away. Pure CSS, so the
   whole table is still in the HTML for a crawler and for print. */
.clip{margin:var(--s2) 0 0}
.clip>.tblwrap{margin-top:0}
.clip-in,.fin{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.clip-in:not(:checked)~.tblwrap tbody tr:nth-child(n+11){display:none}
.clip-act{margin:var(--s2) 0 0}
.clip-in:not(:checked)~.clip-act .less,.clip-in:checked~.clip-act .more{display:none}
.clip-in:focus-visible~.clip-act label{outline:2px solid var(--accent);outline-offset:2px}
details{border:1px solid var(--border);border-radius:var(--radius-sm);margin:var(--s1) 0 0;background:var(--bg)}
summary{cursor:pointer;padding:12px 16px;font-weight:600;font-size:var(--sm);min-height:44px;box-sizing:border-box}
summary:hover{color:var(--accent)}
details p{padding:0 16px 12px;margin:0;font-size:var(--sm);max-width:78ch}
details.grp{margin:var(--s2) 0 0}
details.grp>summary{color:var(--accent)}
details.grp>.tblwrap{margin:0;border:0;border-top:1px solid var(--border);border-radius:0}
details.grp>.src{padding:0 16px 12px;margin:var(--s1) 0 0}
/* Tabs scroll sideways on a phone, so no tab is ever silently clipped off. */
.tabs{margin:var(--s5) 0 0}
.tabs>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tabbar{display:flex;gap:var(--s3);overflow-x:auto;-webkit-overflow-scrolling:touch;border-bottom:1px solid var(--border);scrollbar-width:none}
.tabbar::-webkit-scrollbar{display:none}
.tabbar label{flex:0 0 auto;margin-bottom:-1px;padding:12px 0;font-size:var(--sm);font-weight:600;line-height:1.3;white-space:nowrap;color:var(--muted);border-bottom:2px solid transparent;cursor:pointer}
.tabbar label:hover{color:var(--accent)}
.tp{display:none;padding:var(--s3) 0 0}
.tp>.lead{font-weight:600;margin:0 0 var(--s1)}
.tp p{font-size:var(--body)}
.tp .tblwrap{border:1px solid var(--border)}
.pp{display:grid;grid-template-columns:1fr;gap:var(--s4);margin:var(--s3) 0 0}
/* On a phone the part number comes before the picture: a buyer who arrived on
   a part number is checking they are on the right page, not browsing. */
@media (max-width:859px){.pp .gal{order:2}}
@media (min-width:860px){.pp,.pp.has-img{grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:var(--s5)}}
.pp h1{font-size:var(--d1-sm);margin:var(--s1) 0 var(--s2)}
.gal figure{margin:0}
.gal img{display:block;width:100%;height:auto;background:var(--stage);border:0;border-radius:var(--radius)}
.gal .thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:var(--s1);margin:var(--s1) 0 0}
.gal .thumbs img{aspect-ratio:1;object-fit:contain;border-radius:var(--radius-sm)}
.gal .thumbs figcaption{margin-top:4px;font-family:var(--font-mono);font-size:var(--cap);color:var(--muted);line-height:1.35}
.dwg{margin:var(--s2) 0 0}
.dwg img{display:block;width:100%;height:auto;background:var(--stage);border-radius:var(--radius)}
.kv{display:grid;grid-template-columns:1fr;margin:0 0 var(--s3);font-size:var(--sm)}
@media (min-width:520px){.kv{grid-template-columns:160px minmax(0,1fr)}}
.kv dt{font-family:var(--font-mono);font-size:var(--cap);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.kv dd{margin:0 0 var(--s1)}
.opts{border:0;margin:0 0 var(--s2);padding:0;min-width:0}
.opts .lgd,.opts legend{display:block;padding:0;font-family:var(--font-mono);font-size:var(--cap);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:var(--s1)}
.opts label{display:inline-flex;align-items:center;min-height:40px;box-sizing:border-box;margin:0 var(--s1) var(--s1) 0;padding:8px 16px;font-size:var(--sm);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer}
.opts label:hover{border-color:var(--accent)}
.opts>input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.opts>input:checked+label{box-shadow:inset 0 0 0 2px var(--text);font-weight:600}
.opts>input:focus-visible+label{outline:2px solid var(--accent);outline-offset:2px}
.fincode{margin:0 0 var(--s2);font-size:var(--sm);color:var(--muted);max-width:var(--measure)}
.fincode>span{display:none}
.fincode b{font-family:var(--font-mono);color:var(--text)}
.pack{font-size:var(--sm);margin:0 0 var(--s2);max-width:var(--measure)}
.pack b{font-weight:600}
.rfq{background:var(--band);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s4);margin:var(--s6) 0 0}
.rfq h2{margin:0 0 var(--s2);font-size:var(--d2);letter-spacing:-.02em}
.rfq p{margin:0 0 var(--s2)}
.rfq ul{margin:0 0 var(--s3);padding-left:var(--s3);font-size:var(--sm);line-height:1.6;max-width:var(--measure)}
.rfq li{margin:0 0 4px}
.rfq .rfqgo{margin:0 0 var(--s2)}
.rfq .facts{display:block;font-family:var(--font-mono);font-size:var(--sm);color:var(--muted);margin:0 0 var(--s3);padding:0;border:0}
.rfq .src{margin:0}
.rfq .rfqalt{margin:0 0 var(--s2);font-size:var(--sm)}
.rfq .wa,.alt .wa{display:inline-flex;align-items:center;min-height:44px;padding:12px 20px;font-size:var(--sm);font-weight:600;color:var(--accent);background:var(--bg);border:1px solid var(--accent);border-radius:var(--radius-sm)}
.rfq .wa:hover,.alt .wa:hover{text-decoration:none;opacity:.8}
@media (max-width:719px){.rfq{padding:var(--s3)}}
.srcs{margin:var(--s2) 0 0;font-size:var(--sm)}
.srcs dt{float:left;clear:left;width:34px;font-family:var(--font-mono);font-weight:700}
.srcs dd{margin:0 0 var(--s2) 34px}
.srcs dd a{word-break:break-all;font-size:13px}
.srcs dd span{font-size:var(--cap);color:var(--muted)}
.srcs dd .dead{word-break:break-all;font-size:13px;color:var(--muted);text-decoration:line-through}
.tblock{border:2px solid var(--text);margin:var(--s6) 0 0;display:grid;grid-template-columns:1fr 1fr 1fr 2fr;font-family:var(--font-mono)}
.tblock>div{padding:var(--s1) var(--s2);border-right:1px solid var(--text)}
.tblock>div:last-child{border-right:none}
.tblock .lbl{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tblock .val{display:block;font-size:13px;margin-top:2px}
@media (max-width:640px){.tblock{grid-template-columns:1fr 1fr}.tblock>div:nth-child(2){border-right:none}.tblock>div:nth-child(-n+2){border-bottom:1px solid var(--text)}.tblock>div:last-child{grid-column:1/-1;border-top:1px solid var(--text)}}
.qform{margin:var(--s3) 0 0;max-width:780px}
.qgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s3)}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld.wide{grid-column:1/-1}
.fld label{font-size:var(--sm);font-weight:600;color:var(--text)}
.fld label .req{color:var(--accent)}
.fld .hint{font-size:var(--cap);color:var(--muted);font-weight:400;line-height:1.45}
.fld input,.fld select,.fld textarea{box-sizing:border-box;width:100%;min-height:44px;padding:10px 12px;font:inherit;font-size:var(--body);color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);-webkit-appearance:none;appearance:none}
.fld input::placeholder,.fld textarea::placeholder{color:var(--muted);opacity:1}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 50%,calc(100% - 12px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:2px solid var(--accent);outline-offset:-1px}
.fld textarea{min-height:104px;resize:vertical;line-height:1.5}
.fld textarea.tall{min-height:150px}
.fld input.mono,.fld textarea.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qsubmit{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap;margin:var(--s3) 0 0}
.qnote{font-size:var(--sm);color:var(--muted);max-width:44ch}
.qmsg{margin:var(--s2) 0 0;padding:12px 16px;border-left:3px solid var(--accent);background:var(--band);font-size:var(--sm)}
.qmsg.bad{border-left-color:var(--text)}
.done{border:1px solid var(--accent);border-radius:var(--radius);background:var(--band);padding:var(--s3);margin:0 0 var(--s3)}
.done h2{margin:0 0 var(--s1);font-size:var(--d3)}
.done p:last-child{margin:0}
.alt{border:1px solid var(--border);border-radius:var(--radius);padding:var(--s3);margin:var(--s4) 0 0;background:var(--band)}
.alt p{margin:0 0 var(--s1)}
.alt p:last-child{margin:0}
.alt .waline{margin:0 0 var(--s2)}
.more{margin:var(--s3) 0 0;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--bg)}
.more>summary{cursor:pointer;padding:12px 16px;font-size:var(--sm);font-weight:600;color:var(--accent);list-style:none}
.more>summary::-webkit-details-marker{display:none}
.more>summary::before{content:"\25B8";display:inline-block;width:14px;font-size:11px}
.more[open]>summary::before{content:"\25BE"}
.more>summary:hover{text-decoration:underline}
.more .qgrid{padding:2px 16px 16px}
@media (max-width:719px){.qgrid{grid-template-columns:1fr}}

/* --- 6 print ------------------------------------------------------------ */
@media print{
.ubar,.hdr,.nav,.hact,.dmenu,.crumb,.ftr,.tabbar,.cta,.acts,.clip-act,.opts label{display:none}
.page{background:#fff;color:#000}
.page a{color:inherit}
.band,.rfq,.stage,.card img{background:none}
.sec,.band{padding:var(--s3) 0 0}
.tblwrap{overflow:visible;border-radius:0}
.clip-in~.tblwrap tbody tr{display:table-row!important}
.tp{display:block!important;padding:0 0 var(--s2)}
.fincode>span{display:block}
.pp{display:block}
details{border:0}
details::details-content{content-visibility:visible!important;block-size:auto!important}
.tblock{border-color:#000}
}