.ksw-iiif-open { cursor: zoom-in; border: 0; padding: 0; background: transparent; width: 100%; display: block; position: relative; z-index: 2; }
.ksw-iiif-modal { width: min(96vw, 120rem); height: min(94vh, 72rem); max-width: none; max-height: none; padding: 0; border: 0; background: #111; color: #fff; }
.ksw-iiif-modal::backdrop { background: rgba(0, 0, 0, .86); }
.ksw-iiif-modal-shell { position: relative; width: 100%; height: 100%; min-height: 20rem; }
.ksw-iiif-modal-close { position: absolute; z-index: 20; top: .75rem; right: .75rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 999px; background: rgba(0,0,0,.75); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.ksw-iiif-modal-host, .ksw-iiif-clover-stage, .ksw-iiif-clover-stage > clover-viewer, .ksw-iiif-clover-stage > clover-image { display: block; width: 100%; height: 100%; min-height: inherit; }
.ksw-iiif-modal-host { height: 100%; min-height: 20rem; }
.ksw-iiif-load-error::after { content: 'IIIF viewer could not be loaded.'; display: grid; place-items: center; min-height: 10rem; padding: 2rem; }
body.ksw-iiif-modal-open { overflow: hidden; }
.ksw-iiif-modal-host { position: relative; overflow: hidden; }
.ksw-iiif-modal-fallback { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; background: #111; }
.ksw-iiif-modal-host > .ksw-iiif-clover-stage { position: absolute; inset: 0; z-index: 2; }
.ksw-ve-clover-host { position: relative; }
.ksw-ve-clover-host > .ksw-iiif-clover-stage { position: absolute; inset: 0; z-index: 2; }
.ksw-ve-clover-host > .ksw-ve-clover-fallback { position: relative; z-index: 1; }
/* V5.15: the ordinary image is a failure fallback, not a permanent layer below
   Clover. Keeping it visible made the preview look like two synchronized images. */
.ksw-iiif-fallback-under-viewer,
.ksw-iiif-mounted > .ksw-iiif-fallback,
.ksw-iiif-mounted > .ksw-ve-clover-fallback { display: none !important; }