/* lightbox.css — modal chrome shared by every dev-portal gallery page
   (artifacts.html, git-graphs.html). Pairs with lightbox.js: the DOM ids
   below (#lb, #lb-stage, #lb-content, #lb-name, #lb-close, #lb-prev,
   #lb-next) are exactly what lightbox.js wires up.

   Only the GENERIC modal chrome lives here — the backdrop, the stage, the
   close/prev/next buttons, the filename bar. What goes INSIDE #lb-content
   (plain <img>/<video>/<pre> for artifacts.html, a zoom/pan <img> wrapper for
   git-graphs.html) is page-specific and stays in each page's own <style>.

   Each page still defines its own --bg/--panel/--border/etc. custom
   properties (both currently use the identical dark/light palette); this
   file only reads them, it doesn't declare them, so a page could in
   principle re-theme without touching this file. */

.lb {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,.86);
  display: none;
}
.lb.open { display: block; }
.lb-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 72px 92px 60px;    /* room for the edge arrows + close + filename */
}
.lb-content {
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.lb-content img,
.lb-content video {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  background: #000;
  border-radius: 8px;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
}
/* Text opens large & comfortably readable (14px, as requested). */
.lb-content pre {
  margin: 0;
  width: min(1100px, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 22px 26px;
  font: 14px/1.6 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--text);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
}
.lb-btn {
  position: absolute; z-index: 2;
  appearance: none; border: 1px solid rgba(255,255,255,.22);
  background: rgba(20,24,30,.72); color: #fff;
  cursor: pointer; border-radius: 50%;
  display: grid; place-items: center;
  line-height: 1; transition: background .12s, opacity .12s;
  backdrop-filter: blur(2px);
}
.lb-btn:hover { background: rgba(40,48,60,.92); }
.lb-close { top: 18px; right: 22px; width: 42px; height: 42px; font-size: 22px; }
.lb-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 30px; z-index: 3; }
.lb-prev { left: 20px; }
.lb-next { right: 20px; }
/* No over-cycling: the arrow simply isn't there at a boundary (first has no
   prev, last has no next). */
.lb-btn[hidden] { display: none; }
.lb-name {
  position: absolute; left: 0; right: 0; bottom: 16px;
  text-align: center; color: #cdd6df; font-size: 13px;
  padding: 0 100px; word-break: break-all;
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
  pointer-events: none;
}
/* Left/right CLICK-ZONE strips — step to the previous/next item on a plain
   click anywhere in the outer ~18% of the stage (not just the small round
   arrow button). Sits UNDER the arrow buttons (z-index 1 < .lb-nav's 3) and
   ABOVE the backdrop, so it never swallows a backdrop-click-to-close and
   never competes with the arrow buttons' own click handler. Deliberately
   narrow enough to stay clear of the central content area, so it never
   fights a page's own click-on-image behaviour (e.g. git-graphs.html's
   click-to-zoom). Opt-in per page via the `.lb-clickzone` class on a page's
   own overlay element — plain artifacts.html doesn't use it (a click on a
   video/text card has its own meaning there). */
.lb-clickzone {
  position: absolute; top: 0; bottom: 0; z-index: 1;
  width: 18%; max-width: 220px;
  cursor: pointer;
}
.lb-clickzone.left { left: 0; }
.lb-clickzone.right { right: 0; }