/* Photo Merge tool — mobile-first. Previously unstyled, so full-resolution
   card photos rendered at natural size and blew past the screen. Everything
   here keeps images inside their container and stacks cleanly on narrow
   screens. */

.phototool .ptSlots {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 14px 0;
}

/* One column on phones. */
@media (max-width: 640px) {
  .phototool .ptSlots { grid-template-columns: 1fr; gap: 12px; }
}

.phototool .ptSlot {
  min-width: 0; /* let grid cells shrink instead of overflowing */
  border: 1px solid var(--rule, #8883);
  border-radius: 10px;
  padding: 10px;
  background: var(--surface, #1a1a1a);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.phototool .ptSlotLabel {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-secondary, #999);
}

/* Uploaded thumbnail — the key fix: never exceed the slot width. */
.phototool .ptThumb { position: relative; }
.phototool .ptThumb img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 46vh;
  object-fit: contain;
  border-radius: 8px;
  background: #0004;
}

.phototool .ptRemove {
  position: absolute;
  top: 6px; right: 6px;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%;
  background: #000a; color: #fff;
  cursor: pointer;
}

.phototool .ptSlotName { word-break: break-word; font-size: 11px; }

/* Empty slot picker — tall, tappable target. */
.phototool .ptDrop {
  width: 100%;
  min-height: 128px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px dashed var(--rule, #8886);
  border-radius: 8px;
  background: transparent;
  color: var(--text-secondary, #999);
  cursor: pointer;
  font-size: 13px;
}
.phototool .ptDrop:active { background: var(--hover, #8881); }

.phototool .ptActions { margin: 6px 0 16px; }

/* Merged result. */
.phototool .ptResultHead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.phototool .ptPreviewWrap {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--rule, #8883);
  border-radius: 10px;
  background: #0006;
}

/* The merged preview must scale down to fit — this is what was rendering
   giant on mobile. */
.phototool .ptPreview {
  display: block;
  width: 100%;
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  margin: 0 auto;
}

/* Full-width primary/secondary buttons on phones for easy tapping. */
@media (max-width: 640px) {
  .phototool .ptResultHead .metaPrimaryBtn,
  .phototool .ptActions .metaSecondaryBtn { width: 100%; justify-content: center; }
  .phototool .ptResultHead { flex-direction: column; align-items: stretch; }
}