/* ── COA certificate lightbox ─────────────────────────────────────────────
   Shared by /vendors/<slug> (public v2) and /dashboard/vendors/<id>.
   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: 1000; display: flex; align-items: center; justify-content: center; }
.vp-lb[hidden] { display: none; }
.vp-lb-backdrop {
  position: absolute; inset: 0; background: rgba(5,8,12,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; max-width: min(92vw, 760px); max-height: 92vh; padding: 0 8px;
}
.vp-lb-img {
  max-width: 100%; max-height: 74vh; object-fit: contain; background: #fff;
  border-radius: var(--vp-r-md, 10px); box-shadow: 0 12px 50px rgba(0,0,0,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, #c9d1d9));
  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, #23262b)); }
.vp-lb-cap .over { color: var(--vp-red, var(--bad, #E06C5A)); font-weight: 600; }
.vp-lb-cap .under { color: var(--vp-amber, var(--accent, #F0B544)); 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, #F0B544));
  text-decoration: none; border: 1px solid rgba(240,181,68,0.32);
  background: var(--vp-blue-dim, rgba(240,181,68,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, #F0B544)); background: rgba(240,181,68,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, #23262b));
  background: rgba(13,18,26,0.9); color: var(--vp-bright, var(--txt, #ECE7DD));
  font-size: 17px; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.vp-lb-x:hover { border-color: var(--vp-blue, var(--accent, #F0B544)); }
.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, #23262b)); background: rgba(13,18,26,0.9);
  color: var(--vp-bright, var(--txt, #ECE7DD)); 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, #F0B544)); background: var(--vp-panel, var(--pnl, #12161c)); }
.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, #F0B544)); outline-offset: 2px;
}
@media (max-width: 640px) {
  .vp-lb-nav { width: 40px; height: 40px; font-size: 22px; }
  .vp-lb-prev { left: 4px; } .vp-lb-next { right: 4px; }
}