/* CM001 kit — interactions.css (@layer cm.components). Tier-2: draggable/droppable/resizable/selectable. */
@layer cm.components {
  /* draggable */
  .cm-draggable { touch-action: none; }
  .cm-drag-handle { cursor: grab; }
  .cm-draggable.is-dragging { z-index: var(--z-overlay, 900); box-shadow: var(--shadow-md); cursor: grabbing; }
  body.cm-dragging { user-select: none; }
  body.cm-dragging * { user-select: none !important; }

  /* droppable */
  .cm-droppable { transition: background var(--dur-fast, 120ms) var(--ease-std, ease), border-color var(--dur-fast, 120ms) var(--ease-std, ease); }
  .cm-drop-hover { background: color-mix(in srgb, var(--brand) 12%, transparent); border-color: var(--brand) !important; outline: 2px dashed var(--brand); outline-offset: -4px; }

  /* resizable */
  .cm-resize-handle { position: absolute; z-index: 3; }
  .cm-resize-se { width: 14px; height: 14px; right: 0; bottom: 0; cursor: se-resize; }
  .cm-resize-se::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 7px; height: 7px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); }
  .cm-resize-sw { width: 14px; height: 14px; left: 0; bottom: 0; cursor: sw-resize; }
  .cm-resize-ne { width: 14px; height: 14px; right: 0; top: 0; cursor: ne-resize; }
  .cm-resize-nw { width: 14px; height: 14px; left: 0; top: 0; cursor: nw-resize; }
  .cm-resize-e { top: 8px; bottom: 8px; right: 0; width: 6px; cursor: e-resize; }
  .cm-resize-w { top: 8px; bottom: 8px; left: 0; width: 6px; cursor: w-resize; }
  .cm-resize-s { left: 8px; right: 8px; bottom: 0; height: 6px; cursor: s-resize; }
  .cm-resize-n { left: 8px; right: 8px; top: 0; height: 6px; cursor: n-resize; }
  body.cm-resizing { user-select: none; }

  /* selectable */
  .cm-selectable { position: relative; }
  .cm-select-marquee { position: absolute; z-index: var(--z-overlay, 900); border: 1px solid var(--brand); background: color-mix(in srgb, var(--brand) 14%, transparent); pointer-events: none; border-radius: 4px; }
  .cm-selectable .is-selecting { outline: 1px solid color-mix(in srgb, var(--brand) 55%, transparent); }
  .cm-selectable .is-selected { outline: 2px solid var(--brand); outline-offset: 1px; background: color-mix(in srgb, var(--brand) 8%, transparent); }
}