/* partstable.com redesign — shared styles · ssot 2026-09-20 / site v1 · BRAND-2026-09-20 */
:root{
  --ink:#111418; --ink2:#3F3F46;
  --gray:#6B7280; --faint:#9CA3AF;
  --line:#E4E4E7; --line2:#F4F4F5;
  --paper:#FFFFFF; --paper2:#FAFAFA;
  --blue:#0055DD;               /* primary — links, the star, small details */
  --green:#1A7F37;              /* terminal green — prompts, comments, broker-verified */
  --amber:#9A6700;              /* amber — end-of-life, vendor-dated, warnings */
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Consolas,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--ink);background:var(--paper);line-height:1.55;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--mono)}
.sheet{max-width:1020px;margin:0 auto;background:var(--paper)}

/* ---------- masthead ---------- */
.mast{display:flex;align-items:center;gap:12px;padding:16px 48px;border-bottom:1px solid var(--line)}
.tile{width:36px;height:36px;border-radius:9px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.tile svg{width:20px;height:20px}
.word{font-size:17px;letter-spacing:-.01em}
.word b{font-weight:800}
.mast .sbox{flex:1;max-width:340px;margin-left:26px;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:8px;padding:7px 12px;font-family:var(--mono);font-size:12px;color:var(--faint);background:var(--paper);text-decoration:none}
.mast .sbox:hover{border-color:var(--ink)}
.mast nav{margin-left:auto;display:flex;gap:20px;font-size:13px;font-weight:500;color:var(--ink2)}
.mast nav a{color:var(--ink2);text-decoration:none}
.mast nav a.on{color:var(--ink);font-weight:700}
.mast nav a:hover{color:var(--blue)}
.mast .gh{font-family:var(--mono);font-size:11.5px}

/* ---------- hero — the approved datasheet scale, web-adapted ---------- */
.hero{padding:64px 48px 24px}
.hero-in{max-width:100%}
h1{font-size:58px;line-height:1.06;letter-spacing:-.035em;color:var(--ink);margin:0 0 18px}
h1 .w1{font-weight:500;display:block}
h1 .w2{font-weight:800;display:block}
.sub{font-size:18.5px;color:var(--gray);max-width:680px}
.actions{display:flex;align-items:center;gap:22px;margin:26px 0 0;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;font-weight:600;font-size:14.5px;border-radius:9px;padding:12px 22px;border:none;text-decoration:none}
.lnk{color:var(--blue);text-decoration:none;font-size:14.5px;font-weight:500}
.factstrip{display:grid;grid-template-columns:repeat(4,1fr);margin-top:24px;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-family:var(--mono);font-size:11px;color:var(--gray)}
.factstrip span{padding:10px 16px;border-right:1px solid var(--line)}
.factstrip span:last-child{border-right:none}
.factstrip b{color:var(--ink);font-weight:600}
.toc{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:16px;font-family:var(--mono);font-size:11.5px;color:var(--gray)}
.toc a{color:var(--gray);text-decoration:none}
.toc a:hover{color:var(--blue);text-decoration:underline}
.toc i{font-style:normal;color:var(--faint)}

/* terminal code blocks — GitHub-style, light, rendered big as page anchor */
.code{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--paper);max-width:100%;margin-top:26px}
.code .hd{display:flex;align-items:center;justify-content:space-between;background:var(--paper2);border-bottom:1px solid var(--line);padding:7px 14px;font-family:var(--mono);font-size:10px;color:var(--gray)}
.code .hd .lang{letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.code .hd .cp{border:1px solid var(--line);border-radius:5px;padding:1px 8px;background:var(--paper);cursor:pointer;font-family:var(--mono);font-size:10px;color:var(--gray)}
.code .hd .cp:hover{color:var(--ink);border-color:var(--ink)}
.code .bd{padding:14px 20px;font-family:var(--mono);font-size:13px;line-height:1.85;color:var(--ink)}
.code .p{color:var(--green);font-weight:500}
.code .ol{padding-left:2ch}
.code .k{display:inline-block;min-width:12ch;color:var(--gray)}
.code .c{color:var(--green)}
.code .star{color:var(--blue)}
.code a{color:var(--blue);text-decoration:none}
.code a:hover{text-decoration:underline}
.kbd{font-family:var(--mono);font-size:9.5px;color:var(--gray);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:0 6px;background:var(--paper2);white-space:nowrap}

/* ---------- sections — the datasheet rhythm ---------- */
section{padding:56px 48px;border-top:1px solid var(--line)}
.kick{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gray)}
h2{font-size:33px;letter-spacing:-.025em;font-weight:800;color:var(--ink);margin:10px 0 8px}
h3{font-size:16px;font-weight:700;color:var(--ink)}
.lede{font-size:16px;color:var(--gray);max-width:680px}

/* browse rows — hairlines, not cards */
.browsec{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;margin-top:30px}
.brow{display:flex;gap:14px;padding:15px 0;border-top:1px solid var(--line);align-items:baseline}
.brow .n{font-family:var(--mono);font-size:11px;color:var(--faint);min-width:64px}
.brow .t{font-size:14.5px;font-weight:700;color:var(--ink)}
.brow p{font-size:13px;color:var(--gray);margin-top:3px}
.brow a{color:var(--blue);text-decoration:none;font-size:13px;font-weight:500;white-space:nowrap}
.brow a:hover{text-decoration:underline}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chip{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--ink);white-space:nowrap;text-decoration:none}
a.chip:hover{border-color:var(--ink)}
.chip .star{color:var(--blue)}

/* connector CTA band — one per page */
.ctaband{border-top:1px solid var(--line);padding:30px 48px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ctaband .txt{font-size:15px;color:var(--ink2)}
.ctaband .txt b{color:var(--ink);font-weight:700}
.ctaband .go{margin-left:auto;display:flex;align-items:center;gap:16px}

/* paid half pager */
.paidbox{border:1px solid var(--line);border-radius:12px;padding:26px 30px;background:var(--paper);margin-top:24px}
.paidbox .body{font-size:15px;color:var(--ink2);margin-top:4px}
.paidbox .mods{font-size:15px;color:var(--ink2);margin-top:14px;line-height:1.9}
.paidbox .mods b{color:var(--ink);font-weight:700}
.paidcta{display:inline-flex;align-items:center;gap:6px;margin-top:18px;color:var(--blue);text-decoration:none;font-size:15px;font-weight:600}

/* facts / part page */
.crumb{padding:18px 48px 0;font-family:var(--mono);font-size:11px;color:var(--faint)}
.crumb a{color:var(--faint);text-decoration:none}
.crumb a:hover{color:var(--blue)}
.crumb i{font-style:normal;color:var(--line);padding:0 6px}
.phead{padding:14px 48px 34px}
.phead h1{font-size:44px;margin:0 0 10px}
.phead .psub{font-size:18px;color:var(--gray);max-width:640px}
.factgrid{margin-top:8px}
.fact{display:grid;grid-template-columns:190px 1fr;gap:18px;padding:13px 0;border-top:1px solid var(--line)}
.fact .fl{font-family:var(--mono);font-size:11px;color:var(--gray);letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.fact .fv{font-size:14.5px;color:var(--ink)}
.fact .fv .mut{color:var(--gray)}
.fact .fv small{display:block;font-size:12px;color:var(--faint);margin-top:3px;font-family:var(--mono)}
.tag{display:inline-block;font-family:var(--mono);font-size:10px;font-weight:600;padding:2px 7px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);white-space:nowrap}
.tag.bv{color:var(--green)}
.tag.gov{color:var(--blue)}
.tag.vd{color:var(--amber)}
.mtable tr.linkrow{cursor:pointer}
.mtable tr.linkrow:hover{background:var(--paper2)}
.mtable td a{color:inherit;text-decoration:none}
.mtable td a:hover{color:var(--blue)}
.sbox input{border:none;outline:none;flex:1;min-width:0;font:inherit;background:transparent;color:var(--ink);padding:0}
.search{position:relative}
.lookup-pop{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;background:var(--paper);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 14px rgba(17,20,24,.08);overflow:hidden}
.lookup-pop a{display:flex;gap:10px;align-items:baseline;padding:8px 14px;border-top:1px solid var(--line2);text-decoration:none;color:var(--ink)}
.lookup-pop a.res:first-child{border-top:none}
.lookup-pop a.res:hover{background:var(--paper2)}
.lookup-pop b{font-family:var(--mono);font-size:12.5px;font-weight:600;white-space:nowrap}
.lookup-pop .d{font-size:12px;color:var(--gray);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.lookup-pop .m{font-family:var(--mono);font-size:10px;color:var(--faint);white-space:nowrap}
.lookup-pop a.more{display:block;padding:7px 14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;font-weight:500;color:var(--blue)}
.lookup-pop a.more:hover{background:var(--paper2)}
.lookup-pop .none{display:block;padding:8px 14px;font-size:12px;color:var(--gray)}
.helpnote{margin-top:14px;font-size:12.5px;color:var(--gray)}
.helpnote b{color:var(--ink)}

/* EOL clock */
.eolbox{border:1px solid var(--line);border-radius:10px;padding:16px 20px;margin-top:6px;background:var(--paper)}
.eolbox .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--gray);text-transform:uppercase}
.eolbox .row{display:flex;gap:10px;flex-wrap:wrap;align-items:baseline;margin-top:8px;font-family:var(--mono);font-size:13px;color:var(--ink)}
.eolbox .row i{font-style:normal;color:var(--faint)}
.eolbox .row b{color:var(--amber);font-weight:700}
.eolbox .bar{height:2px;background:var(--line);border-radius:2px;margin-top:12px;position:relative}
.eolbox .bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--amber)}

/* build-sheet table */
.mtable{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
.mtable th{text-align:left;color:var(--gray);padding:7px 9px;font-size:10px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.mtable td{padding:8px 9px;border-bottom:1px solid var(--line2);vertical-align:top}
.mtable td b{font-family:var(--mono);font-weight:600}
.mtable td b.dt{color:var(--amber)}
.xl{display:inline-block;border:1px solid var(--line);border-radius:6px;font-family:var(--mono);font-size:10.5px;font-weight:600;color:var(--ink);padding:3px 10px;background:var(--paper)}
.cap{font-size:12.5px;color:var(--gray);margin-top:14px}

/* FAQ */
.qa{padding:20px 0;border-top:1px solid var(--line)}
.qa h3{font-size:16.5px;margin-bottom:6px}
.qa p{font-size:14.5px;color:var(--ink2);max-width:680px}
.qa p a{color:var(--blue);text-decoration:none}
.qa p a:hover{text-decoration:underline}
.qa .mono{font-size:12.5px;color:var(--ink)}

/* window mockups — flat, full-width anchor */
.shotwrap{padding:0 48px 56px}
.win{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--paper);box-shadow:0 1px 3px rgba(17,20,24,.05);margin-top:0}
.tbar{display:flex;align-items:center;gap:8px;background:var(--paper2);border-bottom:1px solid var(--line);padding:8px 12px}
.tbar .dots{display:flex;gap:5px}
.tbar .dots i{width:9px;height:9px;border-radius:50%;display:block}
.tbar .dots i:nth-child(1){background:#FF5F57}
.tbar .dots i:nth-child(2){background:#FEBC2E}
.tbar .dots i:nth-child(3){background:#28C840}
.wtitle{flex:1;text-align:center;font-family:var(--mono);font-size:11px;color:var(--gray)}
.app{display:flex;min-height:300px}
.side{width:170px;background:var(--paper2);border-right:1px solid var(--line);padding:12px 0;font-size:13px}
.side .si{padding:10px 16px;color:var(--ink2);font-weight:500}
.side .si.on{background:var(--paper);border-left:2px solid var(--blue);font-weight:700;color:var(--ink)}
.main{flex:1;padding:18px 20px}
.search{display:flex;gap:8px}
.sbox{flex:1;display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid var(--line);border-radius:8px;padding:9px 13px;font-family:var(--mono);font-size:13px;color:var(--ink);background:var(--paper)}
.sbtn{background:var(--ink);color:#fff;border:none;border-radius:8px;padding:0 16px;font-weight:600;font-size:12.5px;font-family:inherit}
.hold{color:var(--ink);font-weight:700}
.pastebox{border:1px dashed #C8C8CD;border-radius:8px;padding:12px 14px;font-family:var(--mono);font-size:12px;color:var(--ink2);line-height:1.9;background:var(--paper)}
.fhead{display:flex;align-items:center;font-family:var(--mono);font-size:11px;color:var(--ink);font-weight:500;margin-bottom:6px}
.fhead .note{color:var(--faint);font-weight:400}

details{margin-top:18px;border:1px solid var(--line);border-radius:10px;padding:14px 20px;background:var(--paper)}
summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.tcard{border-top:1px solid var(--line);padding:12px 2px 14px;background:var(--paper)}
.tcard h4{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:5px}
.tcard p{font-size:12.5px;color:var(--gray)}
.tcard code{font-family:var(--mono);font-size:11px;background:var(--line2);border-radius:4px;padding:1px 6px}

/* final CTA + footer */
.cta{padding:56px 48px;border-top:1px solid var(--line)}
.foot{border-top:1px solid var(--line);padding:22px 48px 30px;color:var(--gray);font-size:12.5px}
.foot .l{display:flex;align-items:center;gap:9px}
.foot .tile{width:22px;height:22px;border-radius:6px}
.foot .tile svg{width:12px;height:12px}
.foot b{color:var(--ink);font-weight:600}
.foot .tag2{margin-top:8px;color:var(--ink2)}
.foot .cols{display:flex;gap:44px;flex-wrap:wrap;margin-top:16px;font-family:var(--mono);font-size:11px;line-height:2}
.foot .cols .h{color:var(--faint);letter-spacing:.1em;text-transform:uppercase;font-size:10px}
.foot .cols a{color:var(--gray);text-decoration:none}
.foot .cols a:hover{color:var(--blue)}
.foot .rev{margin-top:16px;font-family:var(--mono);font-size:10.5px;color:var(--faint)}

@media (max-width:860px){
  .crumb,.mast,.hero,section,.cta,.foot,.phead,.ctaband,.shotwrap{padding-left:22px;padding-right:22px}
  .mast .sbox{display:none}
  .hero{padding-top:44px}
  h1{font-size:36px}.phead h1{font-size:32px}
  .code .bd{font-size:11px}
  .browsec{grid-template-columns:1fr}
  .fact{grid-template-columns:1fr;gap:4px}
  .grid3{grid-template-columns:1fr}
  .app{flex-direction:column}.side{width:100%;border-right:none;border-bottom:1px solid var(--line)}
  .ctaband .go{margin-left:0}
  .factstrip{grid-template-columns:1fr 1fr}
  .factstrip span:nth-child(2n){border-right:none}
  .factstrip span:nth-child(-n+2){border-bottom:1px solid var(--line)}
}