/* Framing for user-guide screenshots.
   The app is dark-themed and so is this site, so a bare screenshot bleeds into
   the page background with no visible edge. */

.md-typeset img[src*="assets/img/"] {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgb(0 0 0 / 35%);
  display: block;
  margin: 1.2em auto 0.4em;
  max-width: 100%;
  /* glightbox wraps each image in an <a>, so it's clickable — say so. */
  cursor: zoom-in;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.md-typeset a.glightbox:hover img[src*="assets/img/"] {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 4px 18px rgb(0 0 0 / 50%);
}

/* The wrapping anchor is a plain image link — strip the usual link styling. */
.md-typeset a.glightbox {
  border-bottom: none;
  display: block;
}

/* Lightbox chrome sits above the Material header (z-index 5). */
.glightbox-container {
  z-index: 10000;
}

/* Caption: the italic paragraph immediately after an image. */
.md-typeset img[src*="assets/img/"] + em,
.md-typeset figcaption {
  color: var(--md-default-fg-color--light);
  display: block;
  font-size: 0.75rem;
  text-align: center;
}