/* The image chooser: a file input, a modal for positioning, and a preview of what
   will actually be saved. */

/* `[hidden]` is only a `display: none` rule in the UA stylesheet, so any class that
   sets `display` overrides it — which left an empty "Ready to save" panel on screen
   before anything had been chosen. */
.image-upload__result[hidden] { display: none; }
.image-upload { min-inline-size: 0; max-inline-size: 100%; }
.image-upload input[type="file"] { inline-size: 100%; min-inline-size: 0; max-inline-size: 100%; }
.image-upload__result {
  display: flex; gap: var(--space-4); align-items: center;
  margin-top: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.image-upload__preview {
  width: 5rem; height: 5rem; flex: none;
  border-radius: var(--radius-sm); object-fit: cover; background: var(--surface-2);
}
/* The form has not been saved yet — say so, because a visible preview otherwise
   reads as "done" and people leave the page. */
.image-upload__ready { font-size: var(--step--1); color: var(--success); }

.image-dialog {
  border: none; border-radius: var(--radius); padding: 0;
  max-width: min(94vw, 30rem); width: 100%;
  background: var(--surface); color: var(--text);
  box-shadow: var(--shadow-lg, 0 20px 60px rgba(0, 0, 0, 0.25));
}
.image-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.image-dialog__body { display: grid; gap: var(--space-3); padding: var(--space-5); }
.image-dialog__title { margin: 0; font-size: var(--step-1); }
.image-dialog__frame {
  position: relative; width: 100%;
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2);
}
.image-dialog__canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  cursor: grab; touch-action: none;
}
.image-dialog__canvas:active { cursor: grabbing; }
.image-dialog__canvas:focus-visible { outline: none; box-shadow: var(--ring); }
.image-dialog__zoom { display: flex; align-items: center; gap: var(--space-3); font-size: var(--step--1); color: var(--text-muted); }
.image-dialog__zoom input { flex: 1; accent-color: var(--accent); }
.image-upload [data-role="payload"] { display: none; }