/* Screenshot Framer — local surface for the frame stage and live preview canvas.
   Scoped under .screenshot-framer-page so it never leaks into the global system. */

.screenshot-framer-page {
  --category-gradient: var(--category-picture-bench);
}

/* layout-preview-first: the workspace forces both columns to equal height, so the
   bench card is as tall as the controls. Pin the topline to its natural height and
   let the stage row absorb the rest so the preview fills the card with no empty band. */
.screenshot-framer-page .canvas-bench {
  grid-template-rows: auto 1fr;
}

.screenshot-framer-page .device-stage {
  min-height: 30rem;
}

.screenshot-framer-page .frame-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.screenshot-framer-page .frame-stage .file-drop-zone {
  min-height: 100%;
}

.screenshot-framer-page .frame-stage.has-image .file-drop-zone {
  display: none;
}

/* The canvas is rendered at the full export resolution and scaled down for display,
   so the preview is pixel-for-pixel what gets exported. The checkerboard shows
   through only where a transparent PNG leaves the canvas clear. */
.screenshot-framer-page .frame-canvas {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 60vh;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #d7d9e0 25%, transparent 25%),
    linear-gradient(-45deg, #d7d9e0 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #d7d9e0 75%),
    linear-gradient(-45deg, transparent 75%, #d7d9e0 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
  box-shadow: var(--tool-object-shadow);
}

.screenshot-framer-page .frame-canvas[hidden] {
  display: none;
}