/*
 * Die Akte in einer Arbeitsliste - Bewegung und Zurücktreten der Nachbarn.
 *
 * Gehört zu media/com_pixelhobel/js/akte.js. Hier steht nur die Mechanik:
 * wie die Bühne fährt, wie die Punkte hüpfen, wie die übrigen Zeilen
 * abblenden. Wie die geöffnete Akte aussieht (Hängemappe, Reiter, Farben),
 * entscheidet die Komponente selbst.
 */

/* Standardmäßig bleibt die Bühne innerhalb der Zelle - der Inhalt behält also
   das Polster, das die Zelle ihm gibt.

   Wer die volle Breite braucht (der Klassenmanager: dort hängen Reiter und
   Abschlusslinie an der Bühne und sollen so breit sein wie die Seite), setzt
   `--phx-akte-luft` auf das Polster seiner Zelle und holt es innen an der
   Fläche wieder herein. Ohne dieses Gegenstück klebt der Inhalt am Rand. */
.phx-akte-buehne {
  position: relative;
  margin: 0 calc(var(--phx-akte-luft, 0px) * -1);
}

/* Solange die Akte fährt, schneidet die Bühne ab. Ohne das stünde ihr Inhalt
   über der Liste. Danach ist die Höhe wieder frei - sonst könnte die Akte
   nicht mitwachsen, wenn sich darin ein Block aufklappt. */
.phx-list__detail.is-faehrt > td > .phx-akte-buehne {
  overflow: hidden;
  /* contain kapselt Umbruch und Zeichnen des Inhalts ab: Der Browser muss ihn
     während der Fahrt nicht in jedem Bild neu berechnen, sondern nur die
     Bühne verschieben. Ohne das ruckelt es bei langen Listen. */
  contain: layout paint;
  will-change: height;
  transition: height .2s cubic-bezier(.2, .7, .3, 1);
  /* Während der Fahrt bleibt die Bühne weiß: Es soll eine leere Seite
     aufgehen, nicht eine farbige Fläche mit halbem Inhalt. */
  background: var(--ars-bg, #fff);
}

/* Die drei Punkte, solange der Inhalt noch aufgebaut wird: Sie springen in
   den Schulfarben und sitzen in der Mitte der leeren Seite. Sie erscheinen
   nur beim ersten Öffnen einer Akte - danach steht der Inhalt sofort. */
.phx-akte-laden {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  pointer-events: none;
}
.phx-akte-laden > span {
  width: .6rem; height: .6rem; border-radius: 50%;
  animation: phx-huepf 1s infinite ease-in-out;
}
.phx-akte-laden > span:nth-child(1) { background: var(--ars-bordeaux, #94132f); animation-delay: 0s; }
.phx-akte-laden > span:nth-child(2) { background: var(--ars-tuerkis, #018186); animation-delay: .14s; }
.phx-akte-laden > span:nth-child(3) { background: var(--ars-orange, #af5800); animation-delay: .28s; }
@keyframes phx-huepf {
  0%, 70%, 100% { transform: translateY(0); opacity: .35; }
  35% { transform: translateY(-.45rem); opacity: 1; }
}

/* Der Inhalt ruht, solange die leere Seite auffährt: Beim ersten Öffnen muss
   der Browser ihn erstmals rechnen und zeichnen - fiele das mitten in die
   Bewegung, ruckelte die erste Fahrt (und nur die). So fährt eine leere
   weiße Seite auf, die Punkte hüpfen, und der Inhalt kommt, wenn er steht. */
.phx-list__detail.is-faehrt > td > .phx-akte-buehne > .phx-akte-flaeche,
.phx-list__detail.is-faehrt > td > .phx-akte-buehne > .phx-akte-reiter { visibility: hidden; }
.phx-list__detail.is-faehrt.is-zeigt > td > .phx-akte-buehne > .phx-akte-flaeche,
.phx-list__detail.is-faehrt.is-zeigt > td > .phx-akte-buehne > .phx-akte-reiter { visibility: visible; }

/* Der Seitenkopf zeichnet weich, was hinter ihm liegt. Während die Akte fährt,
   müsste er das in jedem Bild neu tun - für zwei Zehntelsekunden ist er
   einfach deckend. */
html.phx-faehrt .ars-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  background: var(--ars-bg, #fff);
}

/* Steht eine Akte offen, treten die übrigen Zeilen zurück. Abgeblendet wird
   über die Farbe, nicht über opacity: Eine durchscheinende Zeile legt sich
   sonst als eigene Ebene über die Liste, und das Zeichnen wird teuer. */
.phx-list.is-fokus tbody tr:not(.is-offen):not(.phx-list__detail) > td {
  color: var(--ars-muted, #6b7280);
}
.phx-list.is-fokus tbody tr:not(.is-offen):not(.phx-list__detail) > td :is(a, button, .phx-list__aufklappen) {
  color: var(--ars-muted, #6b7280);
}
.phx-list.is-fokus tbody tr:not(.is-offen):not(.phx-list__detail) > td .phx-badge {
  opacity: .55;
}
/* Beim Überfahren kommt die Zeile zurück - man will ja dorthin wechseln. */
.phx-list.is-fokus tbody tr:not(.is-offen):not(.phx-list__detail):hover > td,
.phx-list.is-fokus tbody tr:not(.is-offen):not(.phx-list__detail):hover > td :is(a, button, .phx-list__aufklappen) {
  color: inherit;
}
.phx-list.is-fokus tbody tr:not(.is-offen):not(.phx-list__detail):hover > td .phx-badge {
  opacity: 1;
}

/* Die geöffnete Zeile soll unter der klebenden Kopfzeile nicht verschwinden. */
.phx-list__zeile { scroll-margin-top: 5rem; }

@media (prefers-reduced-motion: reduce) {
  .phx-akte-laden > span { animation: none; opacity: .6; }
  .phx-list__detail.is-faehrt > td > .phx-akte-buehne { transition: none; }
}