/* One shared frame and equal white padding for every APT screenshot. */
.o2c-announcements .o2c-workflow-screenshot.o2c-workflow-screenshot {
  --o2c-shot-padding: 24px;
  position: relative;
  display: block;
  flex: none;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  padding: var(--o2c-shot-padding);
  overflow: hidden;
  isolation: isolate;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 4px 16px rgb(28 45 37 / 8%);
}
.o2c-announcements .o2c-workflow-screenshot.o2c-workflow-screenshot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  box-sizing: border-box;
  border: 1px solid #dce4df;
  border-radius: inherit;
}
.o2c-announcements .o2c-workflow-screenshot.o2c-workflow-screenshot > .o2c-workflow-screenshot-canvas {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  aspect-ratio: var(--o2c-shot-ratio);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #fff;
  box-shadow: none;
}
.o2c-announcements .o2c-workflow-screenshot.o2c-workflow-screenshot > .o2c-workflow-screenshot-canvas > img {
  position: absolute;
  display: block;
  left: var(--o2c-shot-left, 0%);
  top: var(--o2c-shot-top, 0%);
  width: var(--o2c-shot-width, 100%);
  height: var(--o2c-shot-height, 100%);
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  object-fit: fill;
  box-shadow: none;
  clip-path: var(--o2c-shot-mask, none);
}
/* Fit the complete padded frame without distorting the image viewport. */
.o2c-announcements .o2c-workflow-dialog .o2c-gallery-preview:has(.o2c-workflow-screenshot) {
  container-type: size;
  container-name: o2c-shot-measure;
  min-width: 0;
  min-height: 0;
}
.o2c-announcements .o2c-workflow-dialog .o2c-workflow-screenshot {
  --o2c-shot-fit-width: min(calc(100cqw - 12px), calc((100cqh - 12px - var(--o2c-shot-padding) * 2) * var(--o2c-shot-ratio) + var(--o2c-shot-padding) * 2));
  width: var(--o2c-shot-fit-width);
  height: calc((var(--o2c-shot-fit-width) - var(--o2c-shot-padding) * 2) / var(--o2c-shot-ratio) + var(--o2c-shot-padding) * 2);
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}
.o2c-announcements .o2c-workflow-dialog .o2c-workflow-screenshot > .o2c-workflow-screenshot-canvas,
.o2c-announcements .o2c-gallery-dialog .o2c-workflow-screenshot > .o2c-workflow-screenshot-canvas { height: 100%; }
/* Unrelated gallery images keep their original fit and actual-size behavior. */
.o2c-gallery-screen-frame,
.o2c-gallery-screen-frame:not(.o2c-workflow-screenshot) > .o2c-workflow-screenshot-canvas { display: contents; }
.o2c-announcements .o2c-gallery-screen-frame.o2c-workflow-screenshot:has(img[hidden]) { display: none; }
.o2c-announcements .o2c-gallery-dialog:not(.is-actual-size) .o2c-gallery-stage:has(.o2c-gallery-screen-frame.o2c-workflow-screenshot) {
  container-type: size;
  container-name: o2c-gallery-shot-measure;
}
.o2c-announcements .o2c-gallery-dialog:not(.is-actual-size) .o2c-gallery-screen-frame.o2c-workflow-screenshot {
  --o2c-shot-fit-width: min(100cqw, calc((100cqh - var(--o2c-shot-padding) * 2) * var(--o2c-shot-ratio) + var(--o2c-shot-padding) * 2));
  width: var(--o2c-shot-fit-width);
  height: calc((var(--o2c-shot-fit-width) - var(--o2c-shot-padding) * 2) / var(--o2c-shot-ratio) + var(--o2c-shot-padding) * 2);
  max-width: 100%;
  max-height: 100%;
}
.o2c-announcements .o2c-gallery-dialog.is-actual-size .o2c-gallery-screen-frame.o2c-workflow-screenshot {
  max-width: none;
  max-height: none;
  margin: 0 auto;
}
@media(max-width:720px) {
  .o2c-announcements .o2c-workflow-screenshot.o2c-workflow-screenshot { --o2c-shot-padding: 12px; border-radius: 10px; }
}
@media print { .o2c-announcements .o2c-workflow-screenshot.o2c-workflow-screenshot { box-shadow: none; } }