/* Drag to move (js/drag.js; Drew 2026-11-10, gesture A of mockups/proposals/drag.html). */
/* Drew, 2026-11-10: "Add some transparency to the item being dragged so I can see the line that shows where it will go".
   One value for every dragged thing (lists, Browse, Home, docs, the Calendar's blocks and cards). */
:root { --eg-drag-opacity: .65; }
.eg-ghost { position: fixed; z-index: 90; pointer-events: none; box-sizing: border-box; border-radius: 14px; background: var(--sheet); color: var(--ink);
  box-shadow: var(--glassRing, 0 0 0 1px var(--line)), 0 16px 40px rgba(0,0,0,.35); transform: scale(1.03); transform-origin: 30% 50%;
  transition: transform 170ms cubic-bezier(.2,.8,.2,1), box-shadow 170ms; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; will-change: left, top; overflow: hidden; }
.eg-ghost.eg-drag { opacity: var(--eg-drag-opacity); transform: scale(1.04) rotate(-.6deg); box-shadow: var(--glassRing, 0 0 0 1px var(--line)), 0 22px 50px rgba(0,0,0,.45); }
.eg-ghost > * { margin: 0 !important; background: transparent !important; animation: none !important; transform: none !important; }
.eg-ghost .ds-row::before, .eg-ghost .ds-row::after { display: none; }
.eg-gone { height: 0 !important; min-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important;
  border-width: 0 !important; opacity: 0 !important; overflow: hidden !important; pointer-events: none;
  transition: height 170ms cubic-bezier(.2,.8,.2,1), padding 170ms cubic-bezier(.2,.8,.2,1), margin 170ms cubic-bezier(.2,.8,.2,1), opacity 120ms; }
.eg-gone::before, .eg-gone::after { display: none !important; }
.eg-into { background: color-mix(in srgb, var(--accent) 16%, transparent) !important; box-shadow: inset 0 0 0 2px var(--accent) !important; border-radius: 12px; }
.eg-into::before { display: none !important; }
.eg-line { position: fixed; z-index: 91; height: 2px; border-radius: 1px; background: var(--accent); pointer-events: none; transition: left 90ms ease, width 90ms ease; }
.eg-line::before { content: ''; position: absolute; left: -8px; top: -4px; width: 6px; height: 6px; border-radius: 5px; border: 2px solid var(--accent); background: var(--app); }
@media (prefers-reduced-motion: reduce) { .eg-ghost, .eg-line, .eg-gone { transition: none; } }
/* still holding: a bar fills along the bottom; when it's full the item opens (OPEN in js/drag.js) */
.eg-ghost.eg-charge::after { content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--accent); transform-origin: left;
  animation: eg-charge var(--eg-open, 500ms) linear forwards; }
@keyframes eg-charge { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.eg-spacer { flex: none; pointer-events: none; }
/* the Calendar (js/motion.js): a lifted block, the ghost of a card on its way to an hour; the outline shows through */
.cx-blk.lift, .cx-ghost { opacity: var(--eg-drag-opacity); }