/*!
 * PreviouslyDnD v1.0.0 — shared styles
 *
 * Rewind tokens only:
 *   Deep Charcoal #161114 · Warm Bone #EDE6D6 · Graphite #2B2B30
 *   Rewind Red #E8321E — used for the drop indicator ONLY. Never buttons.
 */

:root {
  --dnd-charcoal: #161114;
  --dnd-bone: #EDE6D6;
  --dnd-graphite: #2B2B30;
  --dnd-red: #E8321E;
}

/* ------------------------------------------------------------------ */
/* Drag handle: the visible pickup affordance.                          */
/* touch-action:none on the handle is the scroll contract: the handle   */
/* owns the drag gesture, item bodies keep scrolling.                  */
/* ------------------------------------------------------------------ */
.dnd-handle {
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* no callout on long-press */
}
.dnd-handle:active {
  cursor: grabbing;
}
/* Handles are the primary interaction affordance, so the focus ring shows
   on any focus (not just keyboard-modality :focus-visible): keyboard users
   must always be able to see which handle they are about to move. */
.dnd-handle:focus {
  outline: 2px solid var(--dnd-bone);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Optional ready-made grip texture teams can drop inside a handle. */
.dnd-grip {
  flex: none;
  align-self: stretch;
  width: 22px;
  min-height: 34px;
  border-radius: 6px;
  opacity: 0.65;
  background-image: radial-gradient(circle, rgba(237, 230, 214, 0.6) 1.6px, transparent 1.8px);
  background-size: 8px 8px;
  background-position: center;
  background-repeat: repeat;
}
.dnd-grip:hover {
  opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Lifted item: elevation + slight scale while dragging.                */
/* `scale` is an independent property so it never fights the inline    */
/* translate() the engine drives each frame.                           */
/* ------------------------------------------------------------------ */
.dnd-dragging {
  scale: 1.03;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
  outline: 1px solid rgba(237, 230, 214, 0.35);
  outline-offset: -1px;
  cursor: grabbing;
  transition: box-shadow 160ms ease, scale 160ms ease;
}

/* ------------------------------------------------------------------ */
/* Gap placeholder: Warm Bone outline on charcoal, exact footprint of   */
/* the dragged item. The ::before bar is the drop indicator — the one  */
/* and only place Rewind Red appears in this module.                   */
/* ------------------------------------------------------------------ */
.dnd-gap {
  box-sizing: border-box;
  flex: none;
  position: relative;
  border: 2px dashed rgba(237, 230, 214, 0.65);
  border-radius: 12px;
  background: rgba(237, 230, 214, 0.05);
}
.dnd-gap::before {
  content: "";
  position: absolute;
  background: var(--dnd-red);
  border-radius: 2px;
}
/* leading insertion edge per orientation */
.dnd-gap--vertical::before,
.dnd-gap--grid::before {
  left: 10px;
  right: 10px;
  top: -5px;
  height: 4px;
}
.dnd-gap--horizontal::before {
  top: 10px;
  bottom: 10px;
  left: -5px;
  width: 4px;
}

/* ------------------------------------------------------------------ */
/* Cross-container source drags                                         */
/* ------------------------------------------------------------------ */
.dnd-source {
  cursor: grab;
  /* Scroll stays alive on sources: taps and pans scroll normally, and the
     engine only locks scrolling after a long-press pickup owns the touch. */
  touch-action: pan-x pan-y;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.dnd-source:active {
  cursor: grabbing;
}
.dnd-source-ghost {
  scale: 1.04;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4);
  outline: 1px solid rgba(237, 230, 214, 0.4);
  outline-offset: -1px;
  border-radius: 12px;
  overflow: hidden;
  cursor: grabbing;
}
.dnd-ghost-reject {
  cursor: not-allowed;
}

/* Default highlight for drop targets (teams may pass their own class). */
.dnd-target-active {
  outline: 2px solid var(--dnd-bone);
  outline-offset: 3px;
  background: rgba(237, 230, 214, 0.08);
}

/* ------------------------------------------------------------------ */
/* Global drag state                                                    */
/* ------------------------------------------------------------------ */
body.dnd-is-dragging,
body.dnd-is-dragging * {
  -webkit-user-select: none;
  user-select: none;
}
body.dnd-is-dragging {
  cursor: grabbing;
}
.dnd-settling {
  will-change: transform;
}

/* Keyboard-move confirmation flash */
.dnd-kb-moved {
  animation: dnd-kb-flash 600ms ease;
}
@keyframes dnd-kb-flash {
  0%   { box-shadow: 0 0 0 2px var(--dnd-bone); }
  100% { box-shadow: 0 0 0 0 rgba(237, 230, 214, 0); }
}

/* Visually-hidden live region */
.dnd-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .dnd-dragging,
  .dnd-source-ghost {
    transition: none;
    scale: 1;
  }
  .dnd-kb-moved {
    animation: none;
  }
}