/* Image Editor — an uploader (after="hide") and a split: the preview card
   (canvas + crop overlay, then the image's meta row) on the left, the
   settings inspector on the right (layout from styles/components/form.css +
   uploader.css; the checkered stage is styles/components/preview.css, and
   the crop overlay is positioned against it). Only the crop overlay, the
   transform icon row and the two-up button grid are the page's own. */

/* Crop overlay */
.ie-crop-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.ie-crop-box {
  position: absolute;
  border: 2px solid #fff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  cursor: move;
}

.ie-crop-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}

.ie-crop-handle--tl { top: -5px; left: -5px; cursor: nwse-resize; }
.ie-crop-handle--tr { top: -5px; right: -5px; cursor: nesw-resize; }
.ie-crop-handle--bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.ie-crop-handle--br { bottom: -5px; right: -5px; cursor: nwse-resize; }

/* Transform toolbar — rotate, flip and crop as equal-width icon buttons on
   one line; labels live in aria-label/title. A pressed flip fills with the accent. */
.ie-icon-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-2);
}

.ie-icon-row .btn {
  width: 100%;
  padding-inline: 0;
}

.ie-icon-row .btn[aria-pressed="true"] {
  background: var(--accent);
  color: #ffffff;
}

/* Even two-up button grid so unequal labels don't wrap raggedly in the
   inspector (Apply crop/Cancel). */
.ie-btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}

.ie-btn-grid .btn {
  width: 100%;
}

/* Quality only applies to the lossy formats; with PNG picked the row dims. */
.ie-dim { opacity: 0.45; }