/* Image modal styles.
   The class names are prefixed on purpose: the theme bundles Bootstrap, whose
   .modal and .modal-content rules match on the class name alone. Reusing those
   names handed the modal image an unwanted width:100% and stretched it past its
   real size (AA-8984). A prefixed name cannot collide. */
.aa-image-modal {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 90%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.aa-image-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.aa-image-modal__img {
  /* width and height stay auto so the picture keeps its own proportions: with
     no fixed dimension the max-* limits can only shrink it to fit the viewport.
     object-fit only matters if both dimensions are ever pinned at once; it
     costs nothing and keeps that case from stretching the picture. */
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 50%);

  /* The backdrop is near-black in both themes, so a picture drawn for a light
     background needs one here or its transparent canvas turns black and the
     picture reads as a dark-mode variant. The script marks the pictures that
     need no backing — the dark-mode and theme-neutral ones. */
  background-color: #fff;
}

.aa-image-modal__img--unbacked {
  background-color: transparent;
}

/* The theme dims images in dark mode with
   html[data-theme="dark"] img:not(.only-dark, .dark-light). That rule is not
   scoped to the page body, so it reaches this copy as well — and a picture
   drawn for a dark background, which the page copy is exempt from, ends up
   dimmed twice. Lift the dimming from exactly those pictures, so every other
   one still looks in the modal the way it looks on the page. The selector
   matches the theme's own specificity and this file is loaded after it. */
html[data-theme] img.aa-image-modal__img--unbacked {
  filter: none;
}

.aa-image-modal__close {
  position: absolute;
  top: 20px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  line-height: 1;
  z-index: 10001;
}