/* ── COA certificate lightbox ─────────────────────────────────────────────
   Shared by /vendors/<slug>, /dashboard/vendors/<id>, and research articles.
   Extracted from vendor_public_v2.html 2026-07-30 so the dashboard page gets
   the same in-place preview instead of navigating away mid-comparison.

   Every colour is `var(--vp-*, var(--assay-token, #literal))`. The public page
   defines the --vp-* scale; the dashboard runs on Assay tokens and would
   otherwise render this transparent-on-transparent. Same fallback convention
   as compound_explorer.css.
   ────────────────────────────────────────────────────────────────────────── */

.vp-lb { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; }
.vp-lb[hidden] { display: none; }
.vp-lb-backdrop {
  position: absolute; inset: 0; background: rgba(245,249,253,0.86);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.vp-lb-panel {
  position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center;
  gap: 14px; width: min(92vw, 820px); max-height: 92vh; padding: 18px;
  border: 1px solid var(--vp-line, var(--bord, rgba(29,99,211,0.2)));
  border-radius: var(--vp-r-lg, 16px);
  background: rgba(255,255,255,0.97); box-shadow: 0 24px 80px rgba(245,249,253,0.7);
}
.vp-lb-head {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  font-family: var(--vp-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace));
  font-size: 10px; line-height: 1.2; letter-spacing: 1.35px; text-transform: uppercase;
  color: var(--vp-blue-hi, var(--accent, #1d63d3));
}
.vp-lb-head span:last-child { color: var(--vp-muted, var(--muted, #475d73)); letter-spacing: .7px; }
.vp-lb-empty {
  width: 100%; min-height: 280px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; padding: 34px;
  border: 1px dashed var(--vp-line, var(--bord, #ffffff)); border-radius: var(--vp-r-md, 10px);
  background: rgba(11,29,48,0.018); text-align: center;
  color: var(--vp-muted, var(--muted, #475d73));
}
.vp-lb-empty[hidden] { display: none; }
.vp-lb-empty strong { color: var(--vp-bright, var(--txt, #0b1d30)); font: 600 16px/1.3 var(--vp-sans, var(--sans, system-ui, sans-serif)); }
.vp-lb-empty span { max-width: 34ch; font: 400 13px/1.5 var(--vp-sans, var(--sans, system-ui, sans-serif)); }
.vp-lb-empty svg { color: var(--vp-blue-hi, var(--accent, #1d63d3)); margin-bottom: 4px; }
.vp-lb-noimg .vp-lb-img { display: none; }
.vp-lb-img {
  max-width: 100%; max-height: 68vh; object-fit: contain; background: #0b1d30;
  border-radius: var(--vp-r-md, 10px); box-shadow: 0 12px 50px rgba(245,249,253,0.6);
}
.vp-lb-cap {
  font-family: var(--vp-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace));
  font-size: 12.5px; color: var(--vp-text, var(--txt, #0b1d30));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  justify-content: center; text-align: center;
}
.vp-lb-cap .sep { color: var(--vp-line, var(--bord, #ffffff)); }
.vp-lb-cap .over { color: var(--vp-red, var(--bad, #bf3e29)); font-weight: 600; }
.vp-lb-cap .under { color: var(--vp-amber, var(--accent, #1d63d3)); font-weight: 600; }
.vp-lb-full {
  font-family: var(--vp-mono, var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace));
  font-size: 12.5px; font-weight: 600; color: var(--vp-blue-hi, var(--accent, #1d63d3));
  text-decoration: none; border: 1px solid rgba(29,99,211,0.32);
  background: var(--vp-blue-dim, rgba(29,99,211,0.08));
  padding: 7px 14px; border-radius: 999px; transition: border-color .14s, background .14s;
}
.vp-lb-full:hover { border-color: var(--vp-blue, var(--accent, #1d63d3)); background: rgba(29,99,211,0.14); }
.vp-lb-x {
  position: absolute; top: 18px; right: 18px; z-index: 4; width: 40px; height: 40px;
  border-radius: 999px; border: 1px solid var(--vp-line, var(--bord, #ffffff));
  background: rgba(255,255,255,0.9); color: var(--vp-bright, var(--txt, #0b1d30));
  font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.vp-lb-x:hover { border-color: var(--vp-blue, var(--accent, #1d63d3)); }
.vp-lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
  width: 46px; height: 46px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--vp-line, var(--bord, #ffffff)); background: rgba(255,255,255,0.9);
  color: var(--vp-bright, var(--txt, #0b1d30)); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.vp-lb-nav:hover { border-color: var(--vp-blue, var(--accent, #1d63d3)); background: var(--vp-panel, var(--pnl, #ffffff)); }
.vp-lb-prev { left: 14px; }
.vp-lb-next { right: 14px; }
.vp-lb-x:focus-visible, .vp-lb-nav:focus-visible, .vp-lb-full:focus-visible {
  outline: 2px solid var(--vp-blue, var(--accent, #1d63d3)); outline-offset: 2px;
}
@media (max-width: 640px) {
  .vp-lb-panel { width: calc(100vw - 24px); max-height: 90vh; padding: 14px; }
  .vp-lb-img { max-height: 64vh; }
  .vp-lb-empty { min-height: 220px; }
  .vp-lb-nav { width: 40px; height: 40px; font-size: 22px; }
  .vp-lb-prev { left: 4px; } .vp-lb-next { right: 4px; }
}

.vp-lb-evidence .vp-lb-panel {display:block; width:min(1120px,calc(100vw - 140px)); max-width:none; max-height:88vh; padding:0; overflow:auto; border:1px solid #1f7a4d; border-radius:6px; container:ve-evidence / inline-size}
.vp-lb-evidence #vp-lb-evidence {min-width:0}
.vp-lb-evidence .ve-source-image {height:auto; max-height:65vh; min-height:320px; object-fit:contain}
.vp-lb-evidence .ve-certificate {border-radius:0}
.vp-lb-cap[hidden],.vp-lb-full[hidden],.vp-lb-img[hidden] {display:none}
.vp-lb-evidence .vp-lb-head {padding:16px 24px; box-sizing:border-box; background:var(--tl-surface-panel)}
@media(max-width:640px) {
  .vp-lb-evidence .vp-lb-panel {width:calc(100vw - 28px); max-height:calc(100dvh - 130px); margin-top:12px}
  .vp-lb-evidence .vp-lb-nav {top:auto; bottom:10px; transform:none}
  .vp-lb-evidence .ve-source-image {max-height:55vh; min-height:0}
}

/* One report gate stays in view while its measurements scroll on mobile. */
.ve-gate-report-label {display:none}
@media (max-width:640px) {
 .vp-lb-evidence .vp-lb-panel {display:flex;flex-direction:column;align-items:stretch;gap:0;height:calc(100dvh - 130px);max-height:calc(100dvh - 130px);overflow:hidden}
 .vp-lb-evidence .vp-lb-head {flex-shrink:0;box-sizing:border-box}
 .vp-lb-evidence #vp-lb-evidence {display:flex;flex-direction:column;min-height:0;flex:1;overflow:hidden}
 .vp-lb-evidence .ve-certificate {display:flex;flex-direction:column;min-height:0;flex:1;box-shadow:none}
 .vp-lb-evidence .ve-certificate-brand {flex-shrink:0;padding:12px 18px}
 .vp-lb-evidence .ve-report-main {overflow:auto;min-height:0;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#1d63d3 #1f7a4d;align-content:start}
 .vp-lb-evidence .ve-certificate-gate {flex-shrink:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px 12px;padding:12px 16px max(14px,env(safe-area-inset-bottom));box-shadow:0 -10px 24px #080b0840;position:relative;z-index:1}
 .vp-lb-evidence .ve-gate-identity {min-width:0}
 .vp-lb-evidence .ve-protected-vendor,.vp-lb-evidence .ve-gate-copy>strong,.vp-lb-evidence .ve-gate-copy>p {display:none}
 .vp-lb-evidence .ve-gate-copy {min-width:0}
 .vp-lb-evidence .ve-gate-report-label {display:block;text-align:right;font:400 11px/1.5 var(--vp-sans);color:#475d73;overflow-wrap:anywhere}
 .vp-lb-evidence .ve-certificate-gate .ve-unlock-button {grid-column:1/-1;width:100%;box-sizing:border-box;margin:0;min-height:46px;padding:12px 14px}
 .vp-lb-evidence .ve-viewer-state {overflow:auto;min-height:0}
}