/* Native dialog supplies focus trapping, Escape dismissal and an inert page. */
.md-content [data-ci-zoom] { cursor: zoom-in; }
.md-content [data-ci-zoom]:focus-visible { outline: 3px solid var(--ci-ring); outline-offset: 4px; }
html.ci-image-open { overflow: hidden; }
.ci-image-viewer {
  box-sizing: border-box;
  width: 95vw;
  height: 95vh;
  height: 95dvh;
  max-width: 95vw;
  max-height: 95dvh;
  margin: auto;
  padding: .5rem;
  border: var(--ci-bw) solid var(--ci-line);
  border-radius: var(--ci-radius);
  color: var(--ci-fg);
  background: var(--ci-surface);
}
.ci-image-viewer[open] { display: flex; flex-direction: column; gap: .4rem; }
.ci-image-viewer::backdrop { background: rgb(0 0 0 / 85%); }
.ci-image-toolbar { display: flex; justify-content: flex-end; gap: .5rem; flex: none; }
.ci-image-toolbar button {
  font: inherit;
  font-size: .7rem;
  padding: .35rem .65rem;
  min-height: 44px;
  border: 1px solid var(--ci-line);
  border-radius: var(--ci-radius);
  background: var(--ci-surface);
  color: var(--ci-fg);
  cursor: pointer;
}
.ci-image-toolbar button[aria-pressed="true"] { background: var(--ci-primary); color: var(--ci-on-primary); }
.ci-image-toolbar button:focus-visible { outline: 3px solid var(--ci-ring); outline-offset: 2px; }
.ci-image-body { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-height: 0; min-width: 0; }
.ci-image-side .ci-image-body { flex-direction: row; }
.ci-image-stage { flex: 1; min-height: 0; min-width: 0; overflow: auto; }
.ci-image-stage > img, .ci-image-stage > svg { display: block; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.ci-image-actual .ci-image-stage > img { width: auto; height: auto; max-width: none; margin: auto; }
/* images.js sizes the caption to fill the space beside or below the scaled image. */
.ci-image-caption { flex: none; min-height: 0; min-width: 0; box-sizing: border-box; padding: 0 .3rem; overflow: auto; font-size: .75rem; line-height: 1.5; }
.ci-image-side .ci-image-caption { align-self: center; max-height: 100%; padding: 0 .3rem 0 .6rem; }
.ci-image-caption p, .ci-image-caption ol { margin: 0 0 .5em; }
.ci-image-caption > :last-child { margin-bottom: 0; }
.ci-image-caption ol { padding-left: 1.6em; }
.ci-image-caption li + li { margin-top: .35em; }
.ci-image-caption .ci-image-title { font-size: .85rem; font-weight: 700; }