/**
 * Shared styles for drag-and-drop image targets (UMS).
 * Import from pages: <link rel="stylesheet" href="drag%20and%20drop/drag-drop-image.css" />
 */

.dd-drop-zone {
  position: relative;
  transition: box-shadow 0.15s ease, outline-color 0.15s ease;
}

.dd-drop-zone--dragover {
  outline: 1px dashed var(--dd-accent, #2d4ae8);
  outline-offset: 0;
  box-shadow: inset 0 0 0 1px rgba(59, 91, 253, 0.25);
}

.dd-drop-zone--panel {
  cursor: pointer;
}

.dd-drop-hint {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px dashed rgba(148, 163, 184, 0.85);
  background: rgba(248, 250, 252, 0.92);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--dd-muted, #5c6578);
}

.dd-drop-hint-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  opacity: 0.9;
}

.dd-drop-hint strong {
  color: var(--dd-text, #0c1222);
}

.dd-code {
  font-size: 0.82em;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgba(241, 245, 249, 0.95);
  border: 1px solid rgba(226, 232, 240, 0.95);
}

@media (prefers-reduced-motion: reduce) {
  .dd-drop-zone {
    transition: none;
  }
}