/* Match the expanded peptide index rows to the source lists below it. This is
   homepage-only so generated profile pages do not carry unused toolbar CSS. */
#nl .ni{padding:3px 12px;border-left:0;font-size:.75em;line-height:1.45;color:var(--t2);transition:color .12s}
#nl .ni:hover{background:transparent;color:var(--gold)}

/* =============== HOMEPAGE FEATURE BUTTONS (Vendor Review + Network Map) ===============
   Large centered buttons above the peptide cards. Replaced the old sidebar
   .vr-trigger / .nm-trigger links. */
.feature-btns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin:4px 0 22px;
}
.homepage-tools{display:flex;flex:1 1 auto;min-height:0;flex-direction:column}
#secondaryTools{display:contents}
/* The six primary tools form a balanced 3x2 grid. Peptide Index and Live Price
   Tracker remain matching full-width cards in the grid immediately below it. */
#peptideIndexCard{order:1;flex:1 1 154px;margin:0 0 8px}
#featureGrid{order:2;flex:2 1 257px;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;gap:8px;margin:0 0 8px}
#ptCard{order:3;flex:1 1 154px;margin:0 0 4px;justify-content:center}
#peptideIndexCard,#ptCard{min-height:154px}
/* On mobile keep the six-card feature grid at its natural content height. The
   Peptide Index and Live Price Tracker share the remaining room equally, so the
   two full-width cards stay matched while adapting to the viewport. */
@media(max-width:768px){
  #featureGrid{flex:0 1 auto}
  #peptideIndexCard,#ptCard{flex:1 1 146px;min-height:146px}
}

.feature-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:24px 20px;
  background:linear-gradient(135deg, var(--s2), var(--s1));
  border:1px solid var(--br);
  border-radius:12px;
  color:var(--t);
  text-decoration:none;
  cursor:pointer;
  text-align:center;
  font-family:var(--f);
  font-size:1rem; /* normalize: <button> defaults to a smaller UA size so the
                     .feature-btn-title em sizing matches between <button> and <a> */
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease, background .2s ease;
  touch-action:manipulation;
}
.feature-btn:hover{
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(251,210,106,.12);
  text-decoration:none;
}
.feature-btn:active{transform:translateY(0)}
.feature-btn-soon{
  cursor:default;
  opacity:.72;
}
.feature-btn-soon:hover{
  border-color:var(--br);
  transform:none;
  box-shadow:none;
}
.feature-btn-soon .feature-btn-icon{
  background:rgba(255,255,255,.04);
  border-color:var(--br);
  color:var(--t3);
}
.feature-btn-soon .feature-btn-title::after{
  content:"Coming soon";
  display:inline-flex;
  margin-left:8px;
  vertical-align:middle;
  padding:3px 6px;
  border:1px solid rgba(251,210,106,.28);
  border-radius:999px;
  color:var(--gold);
  background:rgba(251,210,106,.08);
  font-family:var(--m);
  font-size:.68em;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.feature-btn-icon{
  flex-shrink:0;
  width:48px;
  height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--gbg);
  border:1px solid rgba(251,210,106,.25);
  color:var(--gold);
}
.feature-star{font-size:1.5em;line-height:1;color:var(--gold)}
.feature-btn-text{display:flex;flex-direction:column;gap:3px;min-width:0;align-items:center;text-align:center}
.feature-btn-title{
  font-family:var(--m);
  font-size:.92em;
  font-weight:700;
  letter-spacing:.5px;
  color:var(--gold);
  text-transform:uppercase;
}
.feature-btn-sub{
  font-size:.8em;
  color:var(--t2);
  line-height:1.35;
}
/* Keep every feature-card icon and title on the same level no matter how many
   lines its title or subtitle wraps to. The card centers its content, so a
   taller title/subtitle would otherwise shift the whole block — including the
   title — off the level of the shorter cards beside it. Reserving a uniform
   height for the title (up to 2 lines) and the subtitle (up to 3 lines) keeps
   every block the same height, so they all center identically. Multi-column
   layouts only; the single-column mobile stack can't misalign. */
@media(min-width:601px){
  #featureGrid .feature-btn-title{line-height:1.2;min-height:2.4em}
  #featureGrid .feature-btn-sub{min-height:4.05em}
}
/* The "View Live Price Tracker" button is the lead CTA in this grid and spans
   both columns on desktop. On mobile (single-column grid) it just behaves like
   the other buttons via the auto override below. */
.feature-btn-wide{grid-column:1 / -1}
@media(max-width:760px){
  #featureGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
  .feature-btns{gap:10px}
  #peptideIndexCard,#featureGrid{margin-bottom:8px}
  .feature-btn{padding:14px 10px;gap:8px}
  .feature-btn-icon{width:40px;height:40px}
  .feature-btn-title{font-size:.8em;letter-spacing:.3px}
  .feature-btn-sub{font-size:.72em;line-height:1.3}
}
/* ── Live Price Tracker card: popular-peptides price carousel ──
   Reuses the feature-btn surface (gradient/border/radius) but as a column
   container so the CTA sits above a horizontally-sliding price strip. */
.pt-card{
  grid-column:1 / -1;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px 16px;
  background:linear-gradient(135deg, var(--s2), var(--s1));
  border:1px solid var(--br);
  border-radius:12px;
  transition:border-color .2s ease, transform .15s ease, box-shadow .2s ease, background .2s ease;
}
.pt-card:hover{
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 6px 24px rgba(251,210,106,.12);
}
.pt-card:active{
  transform:translateY(0);
}
.pt-card-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  padding:4px;
  background:transparent;
  border:0;
  border-radius:8px;
  color:var(--t);
  font-family:var(--f);
  font-size:1rem;
  cursor:pointer;
}
.pt-card-cta:hover{text-decoration:none}
.control-link{line-height:normal} /* anchors converted from buttons retain button metrics */
#peptideIndexCard{position:relative;justify-content:center;z-index:4}
#peptideIndexCard:focus-within{z-index:40;border-color:var(--gold);transform:none}
#peptideIndexCard .pt-card-cta{flex:1 1 auto;flex-direction:column;gap:4px}
.pi-search{position:relative;width:min(100%,620px);margin:0 auto}
.pi-search-prompt{position:absolute;left:0;right:0;top:0;height:42px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--t3);font-family:var(--f);font-size:16px;pointer-events:none;z-index:2;transition:opacity .12s ease}
.pi-search-icon{width:17px;height:17px;flex:0 0 auto}
.pi-search input{width:100%;height:42px;padding:0 38px;border:1px solid var(--br);border-radius:8px;background:var(--s1);color:var(--t);font-family:var(--f);font-size:16px;text-align:center;outline:none}
.pi-search input:not(:placeholder-shown) + .pi-search-prompt{opacity:0}
.pi-search input:focus{border-color:var(--gold);box-shadow:0 0 0 2px rgba(251,210,106,.08)}
.pi-results{display:none;position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:60;max-height:286px;overflow-y:auto;padding:5px;background:var(--s1);border:1px solid var(--br);border-radius:8px;box-shadow:0 18px 46px rgba(0,0,0,.72)}
.pi-results.open{display:block}
.pi-results.empty::after{content:'No peptides match your search.';display:block;padding:14px;color:var(--t3);font-size:.82em;text-align:center}
.pi-result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 11px;border-radius:6px;color:var(--t);font-size:.84em;text-decoration:none}
.pi-result[hidden]{display:none}
.pi-result:hover,.pi-result.active{background:var(--gbg);color:var(--gold);text-decoration:none}
.pi-result span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.pi-result small{color:var(--t3);font-family:var(--m);font-size:.72em;white-space:nowrap}
.pi-result:hover small,.pi-result.active small{color:var(--gold)}
.pt-carousel-wrap{position:relative;display:flex;align-items:stretch;gap:6px}
.pt-carousel{
  display:flex;
  gap:10px;
  flex:1;
  overflow-x:auto;
  scroll-snap-type:none;
  scroll-behavior:auto;
  padding:2px;
  scrollbar-width:none;       /* Firefox: hide scrollbar */
  -ms-overflow-style:none;    /* IE / old Edge: hide scrollbar */
}
.pt-carousel::-webkit-scrollbar{display:none} /* WebKit / Blink: hide scrollbar */
.pt-chip{
  scroll-snap-align:start;
  flex:0 0 auto;
  min-width:134px;
  max-width:150px;
  display:flex;
  flex-direction:column;
  gap:3px;
  padding:10px 12px;
  border:1px solid var(--br);
  border-radius:10px;
  background:var(--s1);
  color:var(--t);
  font-family:var(--f);
  text-align:left;
  cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.pt-chip:hover{border-color:var(--gold);transform:translateY(-2px)}
.pt-chip-name{font-family:var(--m);font-size:.76em;font-weight:700;letter-spacing:.3px;color:var(--t);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt-chip-price{font-family:var(--m);font-size:1.02em;font-weight:700;color:var(--gold);line-height:1.05}
.pt-chip-permg{font-size:.72em;color:var(--t2);font-family:var(--m)}
.pt-chip-sub{font-size:.66em;color:var(--t3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Center the homepage carousel chip contents while preserving the tracker card's
   original natural height and complete peptide/price/vendor preview. */
#ptCard .pt-chip{align-items:center;justify-content:center;text-align:center}
.pt-arrow{
  flex:0 0 auto;
  align-self:center;
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid var(--br);
  background:var(--s2);
  color:var(--gold);
  font-size:1.15em;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:border-color .15s ease, background .15s ease;
}
.pt-arrow:hover{border-color:var(--gold);background:var(--s1)}
.pt-loading,.pt-error{width:100%;padding:14px;text-align:center;color:var(--t3);font-size:.8em;font-family:var(--m)}
@media(max-width:600px){
  .pt-arrow{display:none}
  .pt-chip{min-width:124px}
  .pt-card{padding:14px 12px}
  .pi-results{max-height:240px}
}

/* Keep the homepage dashboard within a standard viewport: compact the tool
   cards without reducing their tap targets or removing any functionality. */
#featureGrid .feature-btn{gap:6px;padding:10px 12px}
#featureGrid .feature-btn-icon,#peptideIndexCard .feature-btn-icon{width:40px;height:40px}
#peptideIndexCard,#ptCard{padding:8px 12px;gap:6px}
.pi-search-prompt,.pi-search input{height:38px}
@media(max-width:600px){
  main{padding-top:8px;padding-bottom:4px}
  #featureGrid{gap:6px;margin-bottom:6px}
  #peptideIndexCard{margin-bottom:6px}
  #featureGrid .feature-btn{gap:4px;padding:6px}
  #featureGrid .feature-btn-icon,#peptideIndexCard .feature-btn-icon{width:34px;height:34px;border-radius:8px}
  #featureGrid .feature-btn-title{font-size:.7em}
  #featureGrid .feature-btn-sub{font-size:.64em;line-height:1.22}
  #peptideIndexCard,#ptCard{flex:1 1 146px;min-height:146px}
  #peptideIndexCard,#ptCard{padding:6px 10px;gap:4px}
  #peptideIndexCard .pt-card-cta{gap:2px}
  .pi-search-prompt,.pi-search input{height:36px}
  #page-guide > footer{align-content:center;min-height:52px;gap:4px 8px;padding:8px 2px calc(7px + env(safe-area-inset-bottom,0px));margin-top:4px;font-size:.68em;line-height:1.28}
}
@media(min-width:601px) and (min-height:820px){
  #featureGrid .feature-btn{gap:10px;padding:16px}
  #featureGrid .feature-btn-icon,#peptideIndexCard .feature-btn-icon{width:48px;height:48px}
  #peptideIndexCard,#ptCard{padding:12px 16px;gap:10px}
  #peptideIndexCard .pt-card-cta{gap:8px}
  .pi-search-prompt,.pi-search input{height:42px}
}
@media(max-width:600px) and (min-height:701px){
  #featureGrid .feature-btn{gap:5px;padding:8px}
  #featureGrid .feature-btn-icon,#peptideIndexCard .feature-btn-icon{width:36px;height:36px}
  #featureGrid .feature-btn-title{font-size:.74em}
  #featureGrid .feature-btn-sub{font-size:.67em;line-height:1.2}
}
@media(max-width:600px) and (max-height:700px){
  main{padding-top:4px;padding-bottom:2px}
  #featureGrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-bottom:4px}
  #featureGrid .feature-btn{gap:3px;padding:4px 3px}
  #featureGrid .feature-btn-icon,#peptideIndexCard .feature-btn-icon{width:28px;height:28px;border-radius:7px}
  #featureGrid .feature-btn-icon svg,#peptideIndexCard .feature-btn-icon svg{width:20px;height:20px}
  #featureGrid .feature-btn-title{font-size:.62em;line-height:1.15;letter-spacing:.15px}
  #featureGrid .feature-btn-sub{font-size:.56em;line-height:1.12}
  #peptideIndexCard,#ptCard{flex:1 1 120px;min-height:120px}
  #peptideIndexCard{margin-bottom:4px}
  #peptideIndexCard,#ptCard{padding:4px 8px;gap:3px}
  #peptideIndexCard .pt-card-cta{gap:1px}
  #peptideIndexCard .feature-btn-title,#ptCard .feature-btn-title{font-size:.72em}
  #peptideIndexCard .feature-btn-sub,#ptCard .feature-btn-sub{font-size:.64em;line-height:1.15}
  .pi-search-prompt,.pi-search input{height:32px}
  .pi-search-prompt{font-size:14px}
  #page-guide > footer{min-height:40px;gap:2px 6px;padding:5px 2px calc(4px + env(safe-area-inset-bottom,0px));margin-top:2px;font-size:.6em;line-height:1.16}
}
@media(max-width:340px) and (max-height:600px){
  #featureGrid .feature-btn-sub,#peptideIndexCard .feature-btn-sub,#ptCard .feature-btn-sub{display:none}
  #featureGrid .feature-btn{min-height:58px}
  #peptideIndexCard,#ptCard{flex-basis:100px;min-height:100px}
  #ptCard .pt-chip{padding:4px 10px}
  #page-guide > footer{min-height:34px;padding:4px 1px calc(4px + env(safe-area-inset-bottom,0px))}
}

/* =============== DISCOUNT CODES TRIGGER (sidebar button) =============== */
.dc-trigger{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  box-sizing:border-box;
  background:none;
  border:none;
  border-top:1px solid var(--br);
  border-bottom:1px solid var(--br);
  padding:10px 12px;
  text-align:left;
  color:var(--gold);
  font-family:'JetBrains Mono',monospace;
  font-size:.78em;
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  cursor:pointer;
  margin:4px 0 2px 0;
  transition:color .2s ease;
  touch-action:manipulation;
}
.dc-trigger:hover{color:#FFF59D}
.dc-trigger + .side-section{border-top:none;margin-top:0}
.dc-code{min-width:130px;text-align:center}

/* =============== MODAL SHELL =============== */
.vr-modal{
  position:fixed;inset:0;
  display:none;
  align-items:flex-start;justify-content:center;
  padding:24px 16px;
  z-index:99999;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.vr-modal.vr-open{display:flex}
.vr-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:vrFadeIn .25s ease;
}
@keyframes vrFadeIn{from{opacity:0}to{opacity:1}}
.vr-sheet{
  position:relative;
  width:100%;
  max-width:840px;
  max-height:calc(100vh - 48px);
  background:#000000;
  border:1px solid #2a2a2a;
  border-radius:8px;
  box-shadow:0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(251,210,106,0.08);
  overflow-y:auto;
  overflow-x:hidden;
  color:#E8E8E8;
  line-height:1.6;
  animation:vrSlideUp .3s ease;
  -webkit-overflow-scrolling:touch;
}
@keyframes vrSlideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.vr-sheet *{box-sizing:border-box}
.vr-sheet > section,
.vr-sheet > footer{padding-left:44px;padding-right:44px}
.vr-sheet > section:first-of-type{padding-top:32px}
.vr-sheet > section:last-of-type{padding-bottom:40px}
@media(max-width:680px){
  .vr-sheet > section,
  .vr-sheet > footer{padding-left:24px;padding-right:24px}
  .vr-sheet > section:first-of-type{padding-top:28px}
}


/* =============== CLOSE BUTTON =============== */
.vr-close{
  position:absolute;
  top:20px;right:20px;
  width:32px;height:32px;
  background:#141414;
  color:#a0a0a0;
  border:1px solid #2a2a2a;
  border-radius:50%;
  font-size:20px;font-weight:300;
  line-height:1;
  cursor:pointer;
  z-index:20;
  transition:background .2s, border-color .2s, color .2s;
  touch-action:manipulation;
  display:flex;align-items:center;justify-content:center;
  padding:0;
}
.vr-close:hover{background:#1a1a1a;border-color:#FBD26A;color:#FBD26A}

/* =============== HEADER =============== */
.vr-hdr{
  position:relative;
  margin:32px 32px 36px;
  padding:30px 32px 26px 30px;
  background:linear-gradient(180deg,rgba(251,210,106,0.05) 0%,rgba(251,210,106,0) 70%);
  border:1px solid #1f1f1f;
  border-left:3px solid #FBD26A;
  border-radius:4px;
}
.vr-hdr > *{display:block;max-width:100%}
.vr-hdr > *:not(:last-child){margin-bottom:12px}
@media(max-width:680px){
  .vr-hdr{margin:16px 16px 20px;padding:22px 20px 20px;overflow:hidden}
  .vr-hdr > *{min-width:0;max-width:100%}
}
.vr-brand{
  display:inline-block;
  font-family:'JetBrains Mono',monospace;
  font-size:9.5px;letter-spacing:2.5px;
  color:#FBD26A;text-transform:uppercase;
  padding:4px 10px;
  border:1px solid rgba(251,210,106,0.35);
  border-radius:2px;
  margin-bottom:16px;
  background:rgba(251,210,106,0.05);
}
.vr-sheet h1{
  font-family:'JetBrains Mono',monospace;
  font-size:clamp(22px,3.4vw,34px);
  font-weight:700;
  letter-spacing:-1px;
  line-height:1.2;
  margin:0 0 12px;
  color:#E8E8E8;
  word-break:break-word;
  overflow-wrap:break-word;
}
.vr-sheet h1 span{color:#FBD26A}
.vr-sub{display:block;width:100%;color:#a0a0a0;font-size:14px;line-height:1.6;margin:0 0 14px}
.vr-meta{
  display:block;width:100%;
  font-family:'JetBrains Mono',monospace;font-size:10px;
  color:#666;letter-spacing:1.5px;text-transform:uppercase;
  margin-top:4px;line-height:1.8;
}
.vr-meta span{display:inline-block;margin-right:14px;white-space:nowrap}
.vr-meta span:not(:last-child)::after{
  content:"·";margin-left:14px;color:#3a3a3a;
}
.vr-meta span:last-child{margin-right:0}
.vr-meta strong{color:#FBD26A;font-weight:400;margin-right:4px}


/* =============== SECTIONS =============== */
.vr-section{margin-bottom:40px}
.vr-sec-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;color:#FBD26A;text-transform:uppercase;margin-bottom:4px}
.vr-sec-head{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;margin:0 0 20px;letter-spacing:-.5px;color:#E8E8E8}

/* =============== TLDR =============== */
.vr-tldr{
  background:linear-gradient(135deg,#141008 0%,#0f0d08 100%);
  border:1px solid #6b5519;
  border-left:3px solid #FBD26A;
  padding:20px 24px;
  border-radius:2px;
}
.vr-tldr-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2.5px;color:#FBD26A;text-transform:uppercase;margin-bottom:10px}
.vr-tldr p{font-size:14px;color:#E8E8E8;line-height:1.6;margin:0 0 10px}
.vr-tldr p+p{color:#a0a0a0;font-size:13.5px;margin-bottom:0}
.vr-tldr strong{color:#FFF59D;font-weight:600}
.vr-disclosure{
  font-size:12.5px !important;
  color:#a0a0a0 !important;
  padding-top:14px;
  margin-top:12px !important;
  border-top:1px solid #3a2d0e;
  line-height:1.6 !important;
}

/* =============== CHART =============== */
.vr-chart-box{background:#121212;border:1px solid #2a2a2a;border-radius:4px;padding:20px}
.vr-chart-wrap{position:relative;height:380px;max-height:70vh;min-height:320px}
.vr-chart-wrap canvas{display:block;width:100%!important;max-width:100%!important}
.vr-chart-note{font-size:11px;color:#666;margin-top:10px;font-style:italic;text-align:center}

/* =============== MATRIX TABLE =============== */
.vr-matrix-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:4px;border:1px solid #2a2a2a}
.vr-matrix{width:100%;border-collapse:collapse;background:#121212;font-size:12.5px;min-width:640px}
.vr-matrix th{
  background:#1a1a1a;color:#FBD26A;
  font-family:'JetBrains Mono',monospace;font-weight:400;font-size:9px;
  letter-spacing:2px;text-transform:uppercase;
  padding:12px 10px;text-align:left;border-bottom:1px solid #2a2a2a;
}
.vr-matrix th:not(:first-child){text-align:center}
/* Header labels: full words on desktop, abbreviations swapped in on mobile */
.vr-th-abbr{display:none}
.vr-matrix td{padding:12px 10px;border-bottom:1px solid #2a2a2a;vertical-align:middle;color:#a0a0a0;font-size:12px}
.vr-matrix td:not(:first-child){text-align:center;font-family:'JetBrains Mono',monospace;font-size:11.5px}
.vr-matrix tr:last-child td{border-bottom:none}
.vr-matrix tr:hover td{background:rgba(251,210,106,.03)}
.vr-matrix td:first-child{font-weight:600;color:#E8E8E8}
/* Highlight standout dimension scores (9 and 10) in bold gold */
.vr-matrix td.vr-matrix-hi{color:#FBD26A;font-weight:700}
.vr-matrix-row{cursor:pointer;transition:background-color .15s}
.vr-matrix-row:hover td{background:rgba(251,210,106,.08)}
.vr-matrix-row:hover td:first-child{color:#FBD26A}
.vr-matrix-hint{
  font-size:11px;color:#666;margin-top:12px;font-style:italic;text-align:center;letter-spacing:.2px;
}
.vr-matrix .vr-g{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.5px}
.vr-g-A{color:#4ade80}
.vr-g-B{color:#6fd48c}
.vr-g-C{color:#d4a84a}
.vr-g-D{color:#e89944}
.vr-g-F{color:#e87563}

/* =============== METHODOLOGY =============== */
.vr-meth-intro{
  background:#121212;border:1px solid #2a2a2a;border-radius:4px;
  padding:18px 22px;margin-bottom:24px;
}
.vr-meth-intro p{font-size:13.5px;color:#a0a0a0;line-height:1.65;margin:0}
.vr-meth-intro strong{color:#FFF59D;font-weight:600}

.vr-meth-label{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:2.5px;
  color:#FBD26A;text-transform:uppercase;margin:24px 0 12px;
}

/* Dimension cards */
.vr-dim-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin-bottom:8px;
}
.vr-dim{
  background:#121212;border:1px solid #2a2a2a;border-radius:4px;
  padding:16px 18px;
}
.vr-dim-head{
  display:flex;align-items:center;gap:9px;flex-wrap:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:13px;color:#E8E8E8;
  font-weight:600;margin-bottom:10px;padding-bottom:10px;
  border-bottom:1px solid #2a2a2a;line-height:1.3;
}
.vr-dim-num{
  font-size:9px;letter-spacing:2px;color:#666;
  background:#000000;padding:3px 7px;border:1px solid #2a2a2a;border-radius:2px;
}
.vr-dim-wt{
  margin-left:auto;color:#FBD26A;font-size:12px;font-weight:700;
}
.vr-dim-desc{font-size:12.5px;color:#a0a0a0;line-height:1.6;margin:0 0 12px}
.vr-band-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.vr-band-list li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:11.5px;color:#a0a0a0;line-height:1.5;
}
.vr-band{
  flex-shrink:0;font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:1px;color:#FBD26A;background:rgba(251,210,106,0.08);
  border:1px solid rgba(251,210,106,0.25);border-radius:2px;
  padding:2px 6px;min-width:38px;text-align:center;
}

/* Weight bars + grade map side by side */
.vr-calc-grid{
  display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-top:8px;
}
@media (max-width:760px){.vr-calc-grid{grid-template-columns:1fr}}
.vr-calc-box{
  background:#121212;border:1px solid #2a2a2a;border-radius:4px;
  padding:18px 22px;
}
.vr-calc-box .vr-meth-label{margin-top:0}
.vr-calc-desc{font-size:12.5px;color:#a0a0a0;line-height:1.6;margin:0 0 16px}
.vr-calc-desc strong{color:#FFF59D;font-weight:600}

.vr-weight-bars{display:flex;flex-direction:column;gap:9px;margin-bottom:18px}
.vr-wbar{display:flex;align-items:center;gap:10px;font-size:11.5px}
.vr-wbar-lbl{flex-shrink:0;width:110px;color:#E8E8E8}
.vr-wbar-track{flex:1;height:6px;background:#000000;border:1px solid #2a2a2a;border-radius:2px;overflow:hidden}
.vr-wbar-fill{height:100%;background:linear-gradient(90deg,#FBD26A 0%,#FFF59D 100%)}
.vr-wbar-val{flex-shrink:0;width:36px;text-align:right;font-family:'JetBrains Mono',monospace;color:#FBD26A;font-weight:600}

.vr-sample-calc{padding-top:14px;border-top:1px solid #2a2a2a}
.vr-sample-calc .vr-meth-label{margin:0 0 8px}
.vr-calc-math{
  font-family:'JetBrains Mono',monospace;font-size:12px;color:#a0a0a0;
  line-height:1.7;word-spacing:1px;
}
.vr-calc-math strong{color:#22d3ee}

/* Grade map table */
.vr-grade-map{width:100%;border-collapse:collapse;margin-top:4px}
.vr-grade-map td{
  padding:7px 0;border-bottom:1px solid #1a1a1a;
  font-size:11.5px;color:#a0a0a0;
}
.vr-grade-map tr:last-child td{border-bottom:none}
.vr-gm-score{font-family:'JetBrains Mono',monospace;color:#a0a0a0}
.vr-grade-map td:last-child{text-align:right;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700}
.vr-gm-note{
  font-size:11px;color:#666;line-height:1.6;margin:14px 0 0;
  padding-top:12px;border-top:1px solid #2a2a2a;font-style:italic;
}

/* Hard caps */
.vr-caps-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:14px;margin-bottom:8px;
}
.vr-cap{
  background:#121212;border:1px solid #2a2a2a;border-left:3px solid #facc15;
  border-radius:4px;padding:16px 18px;
}
.vr-cap-head{
  font-family:'JetBrains Mono',monospace;font-size:13px;color:#E8E8E8;
  font-weight:600;margin-bottom:8px;display:flex;align-items:center;gap:8px;
}
.vr-cap-head .vr-g{font-size:14px;font-weight:700}
.vr-cap p{font-size:12px;color:#a0a0a0;line-height:1.6;margin:0}

/* Limitations */
.vr-limits{display:flex;flex-direction:column;gap:10px}
.vr-limit{
  background:#121212;border:1px solid #2a2a2a;border-radius:4px;
  padding:14px 18px;
}
.vr-limit-head{
  font-family:'JetBrains Mono',monospace;font-size:11.5px;color:#FBD26A;
  letter-spacing:0.5px;font-weight:600;margin-bottom:6px;
}
.vr-limit p{font-size:12px;color:#a0a0a0;line-height:1.6;margin:0}

/* =============== VENDOR CARDS =============== */
.vr-vcards{display:flex;flex-direction:column;gap:20px}
.vr-vcard{background:#121212;border:1px solid #2a2a2a;border-radius:4px;padding:22px;transition:border-color .25s}
.vr-vcard:hover{border-color:#6b5519}

/* Flash pulse when a card is navigated to via matrix click */
@keyframes vrCardFlash {
  0%   { border-color:#FBD26A; box-shadow: 0 0 0 2px rgba(251,210,106,0.35), 0 0 24px rgba(251,210,106,0.18); }
  60%  { border-color:#FBD26A; box-shadow: 0 0 0 2px rgba(251,210,106,0.2), 0 0 16px rgba(251,210,106,0.1); }
  100% { border-color:#2a2a2a; box-shadow: 0 0 0 0 rgba(251,210,106,0); }
}
.vr-vcard-flash{ animation: vrCardFlash 1.6s ease-out; }
.vr-vcard-hdr{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #2a2a2a}
.vr-vcard-name{font-family:'JetBrains Mono',monospace;font-size:19px;font-weight:700;letter-spacing:-.5px;color:#E8E8E8;margin-bottom:4px}
.vr-vcard-url{font-family:'JetBrains Mono',monospace;font-size:10.5px;color:#666;letter-spacing:.5px;word-break:break-word}
a.vr-vcard-url{cursor:pointer;transition:color .12s}
a.vr-vcard-url:hover{color:var(--gold);text-decoration:underline}
.vr-vcard-url>a{color:inherit;text-decoration:none;cursor:pointer;transition:color .12s}
.vr-vcard-url>a:hover{color:var(--gold);text-decoration:underline}
/* Per-dimension 1-10 scores row on each card */
.vr-vcard-scores{display:flex;gap:8px;margin:0 0 18px;flex-wrap:wrap}
.vr-vscore{flex:1 1 0;min-width:64px;background:#0f0f0f;border:1px solid #222;border-radius:4px;padding:8px 6px;text-align:center}
.vr-vscore-num{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:#FBD26A;line-height:1}
.vr-vscore-lbl{font-family:'JetBrains Mono',monospace;font-size:8px;letter-spacing:.8px;color:#777;text-transform:uppercase;margin-top:5px;line-height:1.2}
.vr-dl-abbr{display:none}

.vr-verdict{
  background:#1a1a1a;border-left:2px solid #FBD26A;
  padding:10px 14px;margin-bottom:16px;
  font-size:13px;color:#E8E8E8;line-height:1.6;overflow-wrap:anywhere;
}
.vr-verdict strong{
  color:#FBD26A;font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  display:block;margin-bottom:4px;font-weight:400;
}

.vr-vcard-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:16px}
.vr-col h4{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:2px;color:#a0a0a0;
  text-transform:uppercase;margin:0 0 8px;font-weight:400;
}
.vr-plist{list-style:none;padding:0;margin:0}
.vr-plist li{
  padding:4px 0 4px 16px;position:relative;
  font-size:12.5px;color:#E8E8E8;line-height:1.5;
}
.vr-plist.vr-pros li::before{content:'+';position:absolute;left:0;color:#4ade80;font-weight:700}
.vr-plist.vr-cons li::before{content:'−';position:absolute;left:0;color:#ef4444;font-weight:700}

.vr-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:10px;padding-top:14px;border-top:1px solid #2a2a2a;
}
.vr-fact-lbl{
  font-family:'JetBrains Mono',monospace;font-size:8.5px;
  letter-spacing:1.5px;color:#666;
  text-transform:uppercase;margin-bottom:2px;
}
.vr-fact-val{font-size:12px;color:#E8E8E8}

.vr-scope{
  margin-top:14px;padding-top:14px;border-top:1px solid #2a2a2a;
  display:flex;flex-direction:column;gap:8px;
}
.vr-scope-lbl{
  font-family:'JetBrains Mono',monospace;font-size:9px;
  letter-spacing:1.8px;color:#FBD26A;
  text-transform:uppercase;
}
.vr-scope-pills{
  display:flex;flex-wrap:wrap;gap:6px;
}
.vr-scope-pill{
  display:inline-block;padding:4px 10px;
  background:rgba(251,210,106,0.08);
  border:1px solid rgba(251,210,106,0.3);
  border-radius:3px;
  font-size:11px;color:#E8E8E8;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:0.3px;
}

.vr-narrative{
  font-size:13px;color:#a0a0a0;line-height:1.6;
  margin-top:14px;padding-top:14px;border-top:1px solid #2a2a2a;
}
.vr-narrative strong{color:#E8E8E8;font-weight:600}
/* Small completion/byline note at the bottom of a vendor card */
.vr-reviewed-note{
  margin-top:12px;
  font-family:'JetBrains Mono',monospace;
  font-size:10.5px;letter-spacing:.5px;
  color:#666;
}

/* =============== FOOTER =============== */
.vr-foot{
  margin-top:32px;padding-top:20px;
  border-top:1px solid #2a2a2a;
  font-size:11.5px;color:#666;line-height:1.65;
}
.vr-foot-lbl{
  color:#a0a0a0;font-family:'JetBrains Mono',monospace;
  font-size:9px;letter-spacing:2px;text-transform:uppercase;
  margin:12px 0 4px;font-weight:400;
}
.vr-foot p{margin:0 0 8px}

/* =============== RESPONSIVE =============== */
@media(max-width:680px){
  .vr-sheet{max-height:calc(100vh - 24px);border-radius:6px}
  .vr-dim-grid,.vr-caps-grid{grid-template-columns:minmax(0,1fr)}
  .vr-vcard-grid{grid-template-columns:1fr;gap:14px}
  .vr-vcard-hdr{gap:12px}
  .vr-vcard-name{font-size:17px}
  .vr-vcard{padding:18px}
  .vr-chart-wrap{height:340px}

  /* Vendor card score boxes: force all five onto a single even row instead of
     wrapping Pricing/Operations to a second line. Tighter gap and smaller label
     so long labels (Transparency, Operations) wrap within the box, keeping equal
     box widths and a clean strip. */
  .vr-vcard-scores{flex-wrap:nowrap;gap:5px}
  .vr-vscore{min-width:0;flex:1 1 0;padding:7px 2px}
  .vr-vscore-num{font-size:16px}
  .vr-vscore-lbl{font-size:8px;letter-spacing:.3px;margin-top:4px;white-space:nowrap}
  .vr-dl-full{display:none}
  .vr-dl-abbr{display:inline}

  /* Matrix on mobile: swap to abbreviated headers and a fixed layout so all five
     score columns fit within the viewport without horizontal scrolling. */
  .vr-th-full{display:none}
  .vr-th-abbr{display:inline}
  .vr-matrix-scroll{overflow-x:visible}
  .vr-matrix{min-width:0;width:100%;table-layout:fixed}
  /* Wider vendor column; the five score columns share a slim even share since
     they only ever hold single digits */
  .vr-matrix th:first-child, .vr-matrix td:first-child{width:44%}
  .vr-matrix th:not(:first-child), .vr-matrix td:not(:first-child){width:11.2%}
  .vr-matrix th{font-size:8px;letter-spacing:.4px;padding:10px 2px}
  .vr-matrix td{padding:10px 2px;font-size:11px}
  /* Vendor cell: allow long names to wrap to two lines */
  .vr-matrix td:first-child{text-align:left;padding-left:10px;padding-right:6px;line-height:1.25;overflow-wrap:break-word}
  .vr-matrix th:first-child{text-align:left;padding-left:10px}
  .vr-matrix td:not(:first-child){font-size:12px}
  .vr-matrix-row td{padding-top:12px;padding-bottom:12px}
  .vr-matrix-row:active td{background:rgba(251,210,106,.15)}
  .vr-matrix-row:active td:first-child{color:#FFF59D}
}

@media(max-width:360px){
  .vr-vscore-lbl{font-size:7px;letter-spacing:0}
  .vr-matrix th{font-size:7px;letter-spacing:0}
}

/* Touch devices (covers tablets too): tap feedback on rows */
@media (hover: none) and (pointer: coarse){
  .vr-matrix-row:active td{background:rgba(251,210,106,.15)}
}

/* =============== BODY LOCK WHEN OPEN =============== */
body.vr-modal-open{overflow:hidden}
body.vr-modal-open .pgai-root{display:none!important}

/* =============== TESTING EXPLAINED MODAL =============== */
/* Mirrors the Vendor Review modal's visual language: JetBrains Mono headers,
   amber-gradient TLDR, #121212 cards, #2a2a2a borders, sharp 4px radii. */
.te-modal{
  position:fixed;inset:0;
  display:none;
  align-items:flex-start;justify-content:center;
  padding:24px 16px;
  z-index:99999;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}
.te-modal.te-open{display:flex}
.te-backdrop{
  position:absolute;inset:0;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  animation:vrFadeIn .25s ease;
}
.te-sheet{
  position:relative;
  width:100%;
  max-width:980px;
  max-height:calc(100vh - 48px);
  background:#000;
  border:1px solid #2a2a2a;
  border-radius:8px;
  box-shadow:0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(251,210,106,0.08);
  overflow-y:auto;overflow-x:hidden;
  color:#E8E8E8;line-height:1.6;
  animation:vrSlideUp .3s ease;
  -webkit-overflow-scrolling:touch;
}
.te-sheet *{box-sizing:border-box}
.te-section{padding:32px 32px 0}
.te-section:first-of-type{padding-top:32px}
@media(max-width:680px){.te-section{padding:28px 20px 0}}

.te-close{
  position:absolute;top:20px;right:20px;
  width:32px;height:32px;
  background:#141414;color:#a0a0a0;
  border:1px solid #2a2a2a;border-radius:50%;
  font-size:20px;font-weight:300;line-height:1;
  cursor:pointer;z-index:20;
  display:flex;align-items:center;justify-content:center;padding:0;
  transition:background .2s,border-color .2s,color .2s;
  touch-action:manipulation;
}
.te-close:hover{background:#1a1a1a;border-color:#FBD26A;color:#FBD26A}

.te-tldr{
  background:linear-gradient(135deg,#141008 0%,#0f0d08 100%);
  border:1px solid #6b5519;
  border-left:3px solid #FBD26A;
  padding:20px 24px;border-radius:2px;
}
.te-tldr-lbl{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2.5px;color:#FBD26A;text-transform:uppercase;margin-bottom:10px}
.te-tldr p{font-size:14px;color:#E8E8E8;line-height:1.6;margin:0 0 10px}
.te-tldr p+p{color:#a0a0a0;font-size:13.5px;margin-bottom:0}
.te-tldr strong{color:#FFF59D;font-weight:600}

.te-sec-title{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:3px;color:#FBD26A;text-transform:uppercase;margin-bottom:4px}
.te-sec-head{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;margin:0 0 20px;letter-spacing:-.5px;color:#E8E8E8}

.te-layout{display:flex;flex-direction:column;gap:18px}
.te-pyramid-wrap{
  background:#0a0a0a;border:1px solid #2a2a2a;border-radius:4px;
  padding:18px 16px 14px;
  display:flex;flex-direction:column;align-items:center;
}
.te-pyramid{width:100%;max-width:630px;height:auto;display:block;overflow:visible}

/* Neon-outline tier: outlined shape with glow, faint inner fill, gold label.
   Dimmed by default; lights up on hover/active. */
.te-level{cursor:pointer;}
.te-level:focus{outline:none}
.te-shape{
  stroke-width:2;
  filter:url(#teGlow);
  transition:opacity .2s ease, stroke-width .2s ease;
}
.te-ico{
  fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
  pointer-events:none;transition:opacity .2s ease;
}
.te-ico-txt{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;stroke:none}
.te-plabel{
  font-family:'Outfit',sans-serif;font-size:18px;font-weight:700;letter-spacing:.3px;
  fill:#F5C518;stroke:none;pointer-events:none;transition:opacity .2s ease;
}
.te-plabel-sm{font-size:15px}
.te-plabel-apex{font-size:15px}

/* per-tier stroke + fill colors */
.te-level[data-level="sterility"] .te-shape{stroke:#F5B731;fill:url(#teFillSterility)}
.te-level[data-level="sterility"] .te-ico{stroke:#F5B731}
.te-level[data-level="heavy"] .te-shape{stroke:#9D6FE8;fill:url(#teFillHeavy)}
.te-level[data-level="heavy"] .te-ico{stroke:#9D6FE8}
.te-level[data-level="heavy"] .te-ico-txt{fill:#9D6FE8}
.te-level[data-level="endotoxin"] .te-shape{stroke:#2BC4A8;fill:url(#teFillEndotoxin)}
.te-level[data-level="endotoxin"] .te-ico{stroke:#2BC4A8}
.te-level[data-level="hplc"] .te-shape{stroke:#3FA7E8;fill:url(#teFillBlue)}
.te-level[data-level="hplc"] .te-ico{stroke:#3FA7E8}
.te-level[data-level="massspec"] .te-shape{stroke:#3FA7E8;fill:url(#teFillBlue)}
.te-level[data-level="massspec"] .te-ico{stroke:#3FA7E8}

/* Dim non-selected tiers; the active one stays full. With nothing selected,
   all sit at a calm resting opacity. */
.te-level .te-shape{opacity:.6}
.te-level .te-ico{opacity:.7}
.te-level .te-plabel{opacity:.65}
.te-level:hover .te-shape,.te-level:focus .te-shape{opacity:1;stroke-width:2.4}
.te-level:hover .te-ico,.te-level:focus .te-ico,
.te-level:hover .te-plabel,.te-level:focus .te-plabel{opacity:1}
.te-level.te-active .te-shape{opacity:1;stroke-width:2.6}
.te-level.te-active .te-ico,.te-level.te-active .te-plabel{opacity:1}

.te-pyramid-foot{
  display:flex;justify-content:space-between;
  width:100%;max-width:630px;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:2px;
  color:#666;text-transform:uppercase;margin-top:8px;padding:0 4px;
}

.te-detail{
  width:100%;
  background:#121212;border:1px solid #2a2a2a;border-radius:4px;
  border-left:3px solid #333;
  padding:20px 22px;
  transition:border-left-color .2s ease;
}
.te-d-tag{
  display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:400;
  letter-spacing:2px;text-transform:uppercase;padding:4px 10px;border-radius:2px;
  margin-bottom:12px;color:#0a0a0a;font-weight:700;
}
.te-d-title{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;margin:0 0 3px;letter-spacing:-.3px}
.te-d-sub{font-size:12.5px;color:#888;margin:0 0 16px;font-style:italic}
.te-d-tldr{
  background:#0d0d0d;border:1px solid #242424;border-left:3px solid #333;
  border-radius:2px;padding:11px 14px;margin:0 0 18px;
  font-size:13px;color:#cfcfcf;line-height:1.55;
}
.te-d-tldr-lbl{
  display:block;font-family:'JetBrains Mono',monospace;font-size:8.5px;
  letter-spacing:2px;text-transform:uppercase;color:#888;margin-bottom:5px;
}
.te-d-body p{font-size:13.5px;color:#a0a0a0;margin:0 0 12px;line-height:1.65}
.te-d-body strong{color:#FFF59D;font-weight:600}
.te-d-stats{margin-top:16px;border-top:1px solid #2a2a2a;padding-top:14px}
.te-d-stat{
  display:flex;gap:12px;align-items:baseline;
  padding:7px 0;border-bottom:1px solid #1d1d1d;
}
.te-d-stat:last-child{border-bottom:none}
.te-d-stat-k{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#666;flex-shrink:0;width:108px}
.te-d-stat-v{font-size:13px;color:#E8E8E8;font-weight:600}
.te-hint{font-size:11px;color:#666;text-align:center;margin:18px 0 0;font-style:italic;letter-spacing:.2px}

.te-foot{
  margin-top:28px;padding:24px 32px 40px;
  border-top:1px solid #2a2a2a;background:#0a0a0a;
}
.te-foot p{font-size:13px;color:#a0a0a0;margin:0 0 10px;line-height:1.65}
.te-foot strong{color:#FFF59D;font-weight:600}
.te-disclosure{
  font-size:12px!important;color:#777!important;font-style:italic;
  padding-top:12px;margin-top:12px!important;border-top:1px solid #1d1d1d;
}

@media(max-width:680px){
  .te-layout{gap:14px}
  .te-foot{padding:20px 20px 32px}
  .te-sec-head{font-size:17px}
  .te-d-title{font-size:16px}
}