/* Image lightbox — click any manual image to view full-size in a popup.
   Loaded by every manual via:
     <link rel="stylesheet" href="/manuals/_assets/lightbox.css">
     <script src="/manuals/_assets/lightbox.js" defer></script>
*/
.byr-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  background: rgba(8, 12, 20, .94);
  display: none; align-items: center; justify-content: center;
  cursor: zoom-out; padding: 24px;
  -webkit-tap-highlight-color: transparent;
}
.byr-lightbox.active { display: flex; }
.byr-lightbox img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .55);
  border-radius: 6px; cursor: default;
  user-select: none; -webkit-user-drag: none;
}
.byr-lightbox .close {
  position: absolute; top: 16px; right: 18px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .12); color: #fff;
  font-size: 22px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s ease;
}
.byr-lightbox .close:hover { background: rgba(255, 255, 255, .22); }
.byr-lightbox .hint {
  position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, .55); font-size: 11px;
  font-family: 'SF Mono', Menlo, Consolas, monospace; letter-spacing: .12em;
  text-transform: uppercase; pointer-events: none;
}

/* Any image inside a .shot / figure.shot / .diagram-wrap becomes zoomable.
   We also opt in any <img> that explicitly carries data-zoom (so the
   pinout reference and other ad-hoc images all light up). */
.shot img,
figure.shot img,
.diagram-wrap img,
img[data-zoom] {
  cursor: zoom-in;
  transition: opacity .15s ease, transform .15s ease;
}
.shot img:hover,
figure.shot img:hover,
.diagram-wrap img:hover,
img[data-zoom]:hover {
  opacity: .92;
}