/* Image Cropper — local surface for the crop stage and interactive canvas.
   Scoped under .image-cropper-page so it never leaks into the global system. */

.image-cropper-page {
  --category-gradient: var(--category-picture-bench);
}

/* 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 crop/drop surface fills the card instead of
   leaving an empty band above it. */
.image-cropper-page .canvas-bench {
  grid-template-rows: auto 1fr;
}

.image-cropper-page .device-stage {
  min-height: 30rem;
}

.image-cropper-page .crop-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
}

.image-cropper-page .crop-stage .file-drop-zone {
  min-height: 100%;
}

.image-cropper-page .crop-stage .file-drop-zone[hidden] {
  display: none;
}

.image-cropper-page .crop-stage.is-cropping .file-drop-zone {
  display: none;
}

.image-cropper-page .crop-canvas {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--tool-object-bg);
  box-shadow: var(--tool-object-shadow);
  touch-action: none;
  cursor: crosshair;
}

.image-cropper-page .crop-canvas[hidden] {
  display: none;
}