/* Widen the content column so diagrams render larger (their on-page text size
   is proportional to display width / native width). Diagrams dominate these
   books and were rendering with sub-body-size text at the stock 750px; 1000px
   makes them ~1.3x larger while keeping prose under ~90 chars/line. */
:root {
  --content-max-width: 1000px;
}

#lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 9999;
  display: none;
  /* Scroll the overlay itself so tall diagrams can exceed the viewport
     height and be read top-to-bottom instead of being shrunk to fit. */
  overflow: auto;
  padding: 2rem;
}
#lightbox-overlay.open {
  display: block;
}
#lightbox-overlay .lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Center horizontally; allow natural (possibly tall) height. */
  margin: 0 auto;
  width: fit-content;
  max-width: 95vw;
}
#lightbox-overlay .lightbox-img {
  /* Fill the available width so text renders large; let height follow the
     aspect ratio and the overlay scroll vertically. No max-height clamp and
     no object-fit:contain (both shrank tall diagrams to ~0.2x even
     full-screen). Never upscale a small diagram past its natural size. */
  width: 100%;
  max-width: max-content;
  height: auto;
  background: white;
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
  cursor: zoom-out;
}
#lightbox-overlay .lightbox-caption {
  color: #ddd;
  margin-top: 0.8rem;
  font-size: 0.9rem;
  text-align: center;
  max-width: 80vw;
}
#lightbox-overlay .lightbox-close {
  position: fixed;
  top: 0.8rem;
  right: 1.2rem;
  font-size: 2.2rem;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  color: #fff;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  z-index: 1;
}
#lightbox-overlay .lightbox-close:hover {
  background: rgba(255, 255, 255, 0.1);
}
.content img {
  cursor: zoom-in;
  transition: opacity 0.15s;
  /* Center every diagram at its native width, shrinking only when it exceeds
     the content column. Upscaling a medium PNG makes its labels much larger
     than neighbouring diagrams; the special classes below handle exceptions. */
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
.content img:hover {
  opacity: 0.92;
}
/* Small diagrams (narrow native width): don't upscale past native resolution
   (PNGs would blur); just center them so they aren't stranded in whitespace. */
.content img.diagram-small {
  width: auto;
  max-width: 100%;
}
/* Portrait diagrams otherwise inherit width: 100%, which enlarges their text
   far beyond neighbouring landscape diagrams. Keep them centered at a bounded
   fraction of the content column; the lightbox still opens at natural size. */
.content img.diagram-portrait {
  width: 58%;
  max-width: 600px;
}
.content img.diagram-portrait-tall {
  width: 52%;
  max-width: 560px;
}
.content img.diagram-portrait-compact {
  width: 35%;
  max-width: 350px;
}
/* Dense, large-canvas diagrams and wide strips need more than the 1000px
   column to keep their labels readable. JS assigns a readable width inside
   this local scroller; clicking still opens the unchanged full-size lightbox. */
.content .diagram-scroll {
  display: block;
  width: 100%;
  overflow-x: auto;
  margin: 0 auto;
}
.content .diagram-scroll img.diagram-detail,
.content .diagram-scroll img.diagram-wide {
  width: var(--diagram-scroll-width);
  max-width: none;
}
@media (max-width: 700px) {
  .content img.diagram-portrait,
  .content img.diagram-portrait-tall,
  .content img.diagram-portrait-compact {
    width: 100%;
  }
}