/* Ziehen - die Zustaende zum Baustein ziehen.js.

   Haltung: Umsortieren ist eine Nebenhandlung, keine Vorstellung. Es gibt
   genau drei sichtbare Zustaende - aufgenommen, unterwegs, Platzhalter - und
   jeder davon arbeitet mit einer Haarlinie und einer Flaechenabstufung. Keine
   Schlagschatten-Kaskade, keine Farbe, die es sonst nirgends gibt: Die
   Aufmerksamkeit gehoert dem Eintrag, den man gerade traegt, nicht dem Effekt.

   Alle Farben kommen aus styles.css. Diese Datei fuehrt kein eigenes Grau ein. */

/* Der Eintrag im Ruhezustand.

   touch-action: manipulation nimmt nur die Doppeltipp-Lupe weg (die sonst
   beim schnellen Umsortieren aufblitzt) und laesst das Scrollen der Liste
   ausdruecklich zu - ohne Griff beginnt ein Zug erst nach dem Halten, und
   bis dahin muss der Finger die Seite noch bewegen duerfen. */
.ziehbar {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Anspringbar heisst auch sichtbar anspringbar. Ohne diesen Ring waere der
   Tastaturweg zwar da, aber unauffindbar: Man saehe nicht, welcher Eintrag
   gleich aufgenommen wird. */
.ziehbar:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}

/* Der Griff. Nur hier steht touch-action: none - und genau deshalb steht es
   nicht am ganzen Eintrag: Der Browser gibt uns damit die Fingerbewegung ab,
   die Seite scrollt beim Ziehen nicht mit. Am ganzen Eintrag waere derselbe
   Wert ein Fehler, weil die Liste dann gar nicht mehr scrollbar waere. */
.ziehgriff {
  touch-action: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  color: var(--text-muted);
}

.ziehgriff:active { cursor: grabbing; }

/* Ohne eigenen Griff ist der ganze Eintrag der Griff - dann darf er das auch
   zeigen. */
.ziehbar:not(:has(.ziehgriff)) { cursor: grab; }

/* Waehrend ein Zug laeuft.

   Der Zeiger gehoert jetzt dem Zug: kein Textmarkieren, kein versehentliches
   Aufziehen einer Auswahl quer ueber die Liste. touch-action: none an der
   Liste ist der zweite Riegel neben dem Griff - er greift auch dann, wenn ein
   Zug ohne Griff durch langes Halten begonnen wurde. */
body.zieht-aktiv {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

body.zieht-aktiv .zieh-liste { touch-action: none; }

/* Der Platzhalter: der Eintrag bleibt an Ort und Stelle stehen, damit die
   Liste nicht in sich zusammenfaellt, tritt aber zurueck. Der Inhalt bleibt
   schwach lesbar - eine leere Luecke laesst einen im Zweifel, was man gerade
   traegt. Gepunktete Haarlinie statt gestrichelt: ruhiger im Auge. */
.zieht-platzhalter {
  opacity: .38;
  background: var(--surface-sunken);
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px var(--border);
}

/* Das Stueck, das dem Finger folgt. Das einzige Element mit Schatten - es
   liegt wirklich ueber der Seite, das darf man sehen. 1.5 Grad Neigung waere
   Zirkus; es bleibt bei einer Spur Vergroesserung. */
.zieht-schweber {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  margin: 0;
  pointer-events: none;
  background: var(--surface-2);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  opacity: .96;
  transform-origin: center;
  scale: 1.02;
  overflow: hidden;
}

/* Die Liste, ueber der der Eintrag gerade schwebt. Wichtig wird das erst,
   wenn mehrere Listen zu einer Gruppe gehoeren - dann muss man sehen, wo der
   Eintrag landet. Eine Haarlinie in Markenfarbe reicht dafuer. */
.zieht-ziel {
  border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 42%, transparent);
}

/* Mit der Tastatur aufgenommen. Der Eintrag bleibt sichtbar an seinem Platz
   und traegt den gleichen Ring wie der Fokus - nur gefuellt, damit "liegt in
   der Hand" von "steht nur darauf" unterscheidbar bleibt. */
.zieht-aufgenommen {
  background: var(--accent-soft);
  border-radius: var(--radius);
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  position: relative;
  z-index: 1;
}

/* Nur fuer die Sprachausgabe: die Ansage ("Platz 3 von 7") und die
   Tastatur-Anleitung. Uebliches Ausblendmuster - display: none waere hier
   falsch, das liest keine Sprachausgabe vor. */
.zieh-ansage {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Wer beruhigte Bewegung eingestellt hat, bekommt keine. Das Gleiten der
   Nachbarn schaltet ziehen.js selbst ab (dort wird die Einstellung bei jedem
   Schritt neu gefragt); hier fallen die letzten optischen Zutaten weg. Der
   Zustand bleibt vollstaendig ablesbar - nur eben ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .zieht-schweber {
    scale: 1;
    box-shadow: inset 0 0 0 1px var(--border-strong);
    opacity: 1;
  }
}

/* Hoher Kontrast: Deckung als einziges Unterscheidungsmittel traegt hier
   nicht, darum bekommt der Platzhalter eine echte Linie. */
@media (forced-colors: active) {
  .zieht-platzhalter {
    opacity: 1;
    border: 1px dotted CanvasText;
  }

  .zieht-aufgenommen {
    outline: 3px solid Highlight;
  }
}