.zw-image-editor[open] .ie-stage {
  box-sizing: border-box;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-content: stretch;
  place-items: center;
  block-size: clamp(156px, 57dvh, 610px);
  min-height: 0;
  min-width: 0;
  padding: 8px;
}

.zw-image-editor[open] .ie-stage canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
  touch-action: pan-y pinch-zoom;
}

.zw-image-editor[open] .ie-stage .ie-brush {
  touch-action: none;
}

@media (max-width: 600px) {
  .zw-image-editor[open] .ie-stage {
    block-size: clamp(150px, 48dvh, 460px);
  }
}

@media (max-height: 540px) {
  .zw-image-editor[open] .ie-stage {
    block-size: clamp(136px, 43dvh, 220px);
  }
}

/* Tall originals benefit from the height beside the controls on a desktop. */
@media (min-width: 860px) and (min-height: 620px) {
  dialog.zw-image-editor[open][data-preview-aspect="portrait"] {
    display: grid;
    width: min(960px, calc(100vw - 40px));
    grid-template-columns: minmax(200px, .95fr) minmax(0, 1.05fr);
    grid-template-rows: auto auto auto auto minmax(0, 1fr) auto;
    column-gap: 24px;
    row-gap: 8px;
    align-items: start;
  }

  .zw-image-editor[data-preview-aspect="portrait"] > header {
    grid-column: 1 / -1;
  }

  dialog.zw-image-editor[open][data-preview-aspect="portrait"] > .ie-stage {
    grid-column: 1;
    grid-row: 2 / 7;
    margin: 0;
    block-size: min(calc(100dvh - 134px), 780px);
  }

  .zw-image-editor[data-preview-aspect="portrait"] > :is(.ie-hint, .ie-row, textarea, .ie-status, footer) {
    grid-column: 2;
    min-width: 0;
  }

  .zw-image-editor[data-preview-aspect="portrait"] > .ie-hint { grid-row: 2; }
  .zw-image-editor[data-preview-aspect="portrait"] > .ie-row { grid-row: 3; }
  .zw-image-editor[data-preview-aspect="portrait"] > textarea { grid-row: 4; }
  .zw-image-editor[data-preview-aspect="portrait"] > .ie-status { grid-row: 5; }
  .zw-image-editor[data-preview-aspect="portrait"] > footer { grid-row: 6; align-self: end; }
}