/* Press and hold to move a photo (app-review-holddrag.js, app-review-holddrag-wire.js). */

/* A tile that can be lifted is not selected, saved or menu'd by the press that lifts it. */
#review-grid .review-tile, #review-order-strip .order-thumb, .moment-cell { -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.hold-dragging, .hold-dragging * { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* The lifted tile: a small raise, and the place it left dimmed. */
.review-tile.hold-lifted, .order-thumb.hold-lifted, .moment-cell.hold-lifted { opacity: .4; transform: scale(.94); transition: transform .12s ease-out, opacity .12s ease-out; }

/* The drop marker: a bar beside the tile the photo would land next to. Logical sides, so it stands at the right edge in a
   right-to-left page. Tiles are already positioned (their ticks and pins are placed in them). */
.review-tile.hold-before::after, .review-tile.hold-after::after, .order-thumb.hold-before::after, .order-thumb.hold-after::after,
.moment-cell.hold-before::after, .moment-cell.hold-after::after {
  content: ""; position: absolute; top: 0; bottom: 0; z-index: 4; width: 5px; border-radius: 3px; background: var(--accent); pointer-events: none; }
.review-tile.hold-before::after, .order-thumb.hold-before::after, .moment-cell.hold-before::after { inset-inline-start: -4px; }
.review-tile.hold-after::after, .order-thumb.hold-after::after, .moment-cell.hold-after::after { inset-inline-end: -4px; }

/* The picture that follows the pointer. It is placed with left and top (physical), centred on the pointer. */
.hold-ghost { position: fixed; z-index: 200; width: 84px; height: 84px; margin-left: -42px; margin-top: -58px; pointer-events: none;
  border: 2px solid var(--accent); border-radius: 12px; overflow: hidden; background: var(--surface-2); transform: scale(1.06);
  box-shadow: 0 14px 32px rgba(0, 0, 0, .55); }
.hold-ghost img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (prefers-reduced-motion: reduce) {
  .review-tile.hold-lifted, .order-thumb.hold-lifted, .moment-cell.hold-lifted { transition: none; transform: none; }
  .hold-ghost { transform: none; }
}