/* app-mirai.css — the card editor's photo preview and tools.
   Everything else the Mirai screens use (library tiles, the study flip card,
   the rating row) lives in app.css. See STYLE.md. */

/* Editor photo preview — shows the whole photo (object-fit: contain),
   deliberately distinct from the cropped .card-tile-art library tiles:
   in the editor the student is judging whether it's the right picture. */
.mirai-editor-image-wrap {
  flex: none;
}

.mirai-editor-image {
  display: flex;
  align-items: center;
  justify-content: center;
  max-height: 176px;
  overflow: hidden;
  border-radius: var(--radius-tile);
  background: var(--bg);
}

.mirai-editor-image img {
  display: block;
  width: 100%;
  max-height: 176px;
  object-fit: contain;
}

.mirai-editor-image.placeholder {
  min-height: 110px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

/* "Name this photo" / "Generate image" row, under the front/back fields. */
.mirai-editor-photo-actions {
  display: flex;
  gap: 9px;
}

.mirai-photo-action-btn {
  flex: 1;
  min-height: 40px;
  background: var(--lilac);
}

.mirai-photo-action-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  flex: none;
}

.mirai-photo-action-icon svg {
  width: 100%;
  height: 100%;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}