/* jelly-ui / drag.css -- the styling half of drag.js.
 *
 * Only what the drag interaction itself needs: the handle's affordance and the
 * two "this item is being dragged" states. Everything about how a draggable
 * item *looks* stays in the app -- a jellytodo ticket and a jellystat dashboard
 * tile have nothing visually in common, and forcing them into one shared
 * component was explicitly ruled out (see README.md, "What this deliberately
 * doesn't cover").
 *
 * One colour comes from the app, as a custom property: --jelly-drag-bg, the
 * background an item takes on while it's in flight (see below). Nothing else
 * here is themed -- the drop preview is the gap the dragged item leaves behind,
 * moved to where it would land, so there's no bar of the app's accent colour to
 * draw.
 */

.jelly_drag_handle {
    cursor: grab;

    /* Stops the browser starting its own scroll/pan gesture from a touch that
       begins on the handle, so the touch drag path gets an uninterrupted
       touchmove stream instead of the gesture being stolen for scrolling
       partway through. drag.js preventDefaults on touchstart too; both are
       needed, on different browsers. */
    touch-action: none;
}

.jelly_drag_handle:active {
    cursor: grabbing;
}

/* What an item looks like while it's in flight, on both input paths.

   A jelly* card is usually transparent, drawn only by its border and shadow.
   That's fine sitting on the page, but an item cut out of the page and carried
   around is then a floating outline with whatever it passes over showing
   straight through it. So a dragged item gets a real background: the page's own
   colour, so it still reads as the same card, at 80% so it stays clear that
   it's above the page rather than part of it.

   --jelly-drag-bg is the one value an app has to supply. This file is static and
   shared, while the page colour is per-app (and in jellystat per-domain theme),
   so it's declared on whichever container the app already themes and cascades
   down from there -- the same custom-property route jelly-style.md prescribes
   for theming any static stylesheet. The first declaration is the fallback for a
   browser without color-mix: the same colour, fully opaque. */
.jelly_drag_image,
.jelly_touch_dragging {
    background-color: var(--jelly-drag-bg, transparent);
    background-color: color-mix(in srgb, var(--jelly-drag-bg, transparent) 80%, transparent);
}

/* Mouse + native drag-and-drop: the browser's own drag image is what the cursor
   carries, so this hides the copy left behind in the DOM -- otherwise the item
   appears twice at once.

   visibility, not display: the hidden item keeps occupying a slot, and that gap
   is the drop preview (drag.js moves the item, still hidden, to wherever a drop
   would land). display:none would collapse the gap and leave nothing to preview
   with. */
.jelly_drag_source_hidden {
    visibility: hidden;
}

/* Touch has no native drag image, so the item doubles as its own visual and is
   translated in JS to follow the finger. pointer-events:none is what lets
   document.elementFromPoint see through it to whatever is underneath, the way
   visibility:hidden effectively does for the mouse path above.

   Its transparency comes from the shared background rule above, not from an
   `opacity` of its own: the two paths have to look the same, and an element
   opacity here would compound with that background's 80% instead of matching
   it. */
.jelly_touch_dragging {
    position: relative;
    z-index: 1000;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* There is deliberately no drop-indicator rule here. The moving gap is the whole
   preview: a bar drawn next to it would be a second answer to the same question,
   with its own geometry to keep in sync. Removing it also drops the requirement
   that the container be a positioning context -- nothing here is absolutely
   positioned against it any more. */