/* 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-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; }
.ci-image-caption { flex: none; font-size: .65rem; line-height: 1.4; margin: 0; max-height: 3.6em; overflow: auto; }