/* Trascinare per riordinare (js/drag.js e le griglie del quaderno)
   La copia che vola è un livello a sé, mosso solo con transform: niente vetro (backdrop-filter),
   ombra semplice, niente transizioni né animazioni dentro, contenuto isolato (contain). */
.dg-ghost {
  box-sizing: border-box;
  border-radius: 12px;
  background: var(--raised, #2c2c2e);
  box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .42), 0 0 0 1px var(--stroke);
  will-change: transform;
  contain: layout style paint;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  list-style: none;
  cursor: grabbing;
}
/* dentro la copia niente animazioni; la copia stessa ha transition/animation in linea (ghostOf), così
   il rilascio può darle la sua transizione per atterrare */
.dg-ghost * { transition: none !important; animation: none !important; }
/* le schede di vetro sono trasparenti: la copia, fuori dalla pagina, avrebbe sotto le altre
   schede che si vedono attraverso. Sotto le loro sfumature va il colore pieno delle superfici */
.dg-ghost { background-color: var(--raised, #2c2c2e) !important; }
.dg-ghost .ui-more { visibility: hidden; }
.dg-hole { opacity: .22; transition: opacity .15s; }
.dg-into { outline: 2px solid var(--solid); outline-offset: -2px; border-radius: 10px; background: var(--fill) !important; animation: dg-pulse .5s cubic-bezier(.3,1.5,.5,1); }
@keyframes dg-pulse { 0% { transform: scale(1); } 45% { transform: scale(1.03); } 100% { transform: scale(1); } }
/* niente selezione del testo; regole solo sulla radice (user-select vale per tutto quello che
   c'è dentro): un selettore universale qui ricalcolava lo stile di tutta la pagina all'inizio
   e alla fine di ogni trascinamento */
html.dg-dragging { -webkit-user-select: none; user-select: none; cursor: grabbing; }
/* col mouse: sopra la pagina, per il cursore e per non accendere le schede al passaggio */
.dg-shield { position: fixed; inset: 0; z-index: 9998; cursor: grabbing; background: transparent; }
@media (prefers-reduced-motion: reduce) { .dg-into { animation: none; } }
