/* Small until asked for. The caption is the author's own alt text, so what a
   reader sees under the figure and what a screen reader is told are the same
   sentence — and there is no second field to keep in step with the first. */
.imgfig { display: inline-flex; flex-direction: column; gap: 5px; margin: 10px 12px 10px 0; vertical-align: top; max-width: 100%; }
.imgfig-thumb {
  display: block; padding: 0; cursor: zoom-in; line-height: 0;
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden;
  background: var(--card-bg);
}
.imgfig-thumb:hover { border-color: var(--primary); }
.imgfig-thumb img { display: block; max-width: 260px; max-height: 200px; width: auto; height: auto; }
.imgfig-thumb.is-vector { width: min(100%, 260px); }
.imgfig-thumb.is-vector img { width: 100%; height: auto; }
.imgfig-label { max-width: 260px; font-size: 0.78rem; line-height: 1.4; color: var(--text-muted); }

/* ── The viewer ───────────────────────────────────────────────────────
   The image gets the screen, and what is known about it sits beside it. Dark,
   because a radiograph read against a white page is read through glare. */
.imgfig-viewer {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column;
  background: #0b1220; color: #e2e8f0;
  /* The viewer never scrolls as a whole, at any width. It is one screen: look
     at the picture, close it, carry on from where you were. A scrollbar down
     the side of it invites a scroll that moves nothing anybody wanted moved. */
  overflow: hidden;
}
.imgfig-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.imgfig-tool {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; cursor: pointer; font: inherit; font-size: 0.83rem; font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .22); border-radius: 8px;
  background: transparent; color: #e2e8f0;
}
.imgfig-tool:hover { border-color: #5eead4; color: #5eead4; }
.imgfig-tool.is-on { border-color: #5eead4; color: #0b1220; background: #5eead4; }
.imgfig-close {
  margin-left: auto; width: 34px; height: 34px; cursor: pointer;
  border: 0; border-radius: 8px; background: transparent; color: #e2e8f0; font-size: 1rem;
}
.imgfig-close:hover { background: rgba(255, 255, 255, .12); }

.imgfig-body {
  flex: 1; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: 320px minmax(0, 1fr);
}
.imgfig-desc {
  display: flex; flex-direction: column; gap: 14px;
  padding: 26px 24px; overflow-y: auto;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.imgfig-desc strong { font-size: 1.05rem; font-weight: 700; }
.imgfig-desc-text { font-size: 0.92rem; line-height: 1.6; color: #cbd5e1; }
.imgfig-source { font-size: 0.78rem; line-height: 1.55; color: #94a3b8; }
.imgfig-source a { color: #94a3b8; }

.imgfig-stage {
  display: flex; align-items: center; justify-content: center;
  /* `hidden`, not `auto`: the picture is capped to the space it has, so there
     is nothing to scroll to. */
  padding: 20px; overflow: hidden; cursor: zoom-out;
  min-height: 0;
}
/* The frame is what the overlay is positioned against, so it must be exactly
   the size of the drawn image and no larger — hence a block that shrinks to
   its content rather than a flex child that stretches. */
.imgfig-frame { position: relative; display: block; line-height: 0; cursor: default; }
.imgfig-frame { max-width: 100%; max-height: 100%; }
.imgfig-frame img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }
/* A drawing has no size of its own, only a shape, so it is given the width it
   is allowed and takes its height from that. Line art scales; a photograph
   would be blown up by the same rule, which is why this is not the default. */
.imgfig-frame.is-vector { width: min(100%, 900px); }
.imgfig-frame.is-vector img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }
.imgov { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

@media (max-width: 820px) {
  /* Stacked, description first: it can be read before scrolling to the
     picture rather than after it, and on a phone the picture wants the width
     more than the text does. */
  /* The viewer fills the screen and does not scroll as a whole. What the
     picture is stays at the top and scrolls inside its own box if it is long;
     the picture keeps everything under it. A viewer you have to scroll to see
     the picture in is a viewer that looks broken. */
  .imgfig-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); overflow: hidden; }
  .imgfig-desc {
    border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: 16px 16px 14px; gap: 10px;
    max-height: 38dvh; overflow-y: auto;
  }
  .imgfig-stage { padding: 12px; }
  .imgfig-frame img { max-height: 100%; }
  /* Stacked, so the picture has the width of the screen and whatever height
     its shape asks for — the row it sits in scrolls with the description. */
  .imgfig-frame.is-vector { width: 100%; }
  .imgfig-frame.is-vector img { max-height: 100%; }
}

@media (max-width: 560px) {
  .imgfig { margin-right: 0; }
  .imgfig-thumb img, .imgfig-label { max-width: 100%; }
}