/**
 * idf-list-insert — Hover-Affordance „zwischen Zeilen einfügen"
 *
 * Markup wird vom JS gerendert (siehe idf-list-insert.js) — pro Row
 * wird ein Affordance-Element NACH der Row in den Container gehängt.
 *
 * Layout-Konzept:
 *   - .idf-list-insert hat height: 0 → kein vertikaler Push, die
 *     Liste sieht im Default-Zustand exakt aus wie ohne Affordance.
 *   - Plus-Button + Linie sind `position: absolute` → überlagern die
 *     untere Kante der vorhergehenden Row.
 *   - Sichtbar nur bei Hover über die zugehörige Row ODER über die
 *     erweiterte Hit-Zone des Plus-Buttons.
 *   - Plus sitzt LINKS unter dem TITEL-TEXT (nicht am Anfang der
 *     Title-Spalte) — Notion-artig direkt unter dem ersten Buchstaben
 *     der Aufgabe. Position über --al-titel-left vom Modul-JS gesetzt.
 *   - Während aktivem Drag (`body.idf-sortable-dragging`) oder
 *     Drag-Handle-Hover wird das Insert komplett ausgeblendet, damit
 *     Sortable und Insert sich nicht in die Quere kommen.
 *
 * Voraussetzung: _shared/tokens/design-tokens/idf-tokens.css.
 *
 * Audit L5/#201 (L-E8): --z-overlay-Fallback 10 auf den exakten Token-Wert 5
 * normalisiert (Regel 17); render-identisch, es rendert seit jeher 5 und
 * liegt damit weiter ueber den Tree-Connectors (z-index 1).
 */

.idf-list-insert {
  position: relative;
  height: 0;
  overflow: visible;
  margin: 0;
  /* Container blockt KEINE Pointer-Events — Klicks auf Title-Text der
     darunterliegenden Row müssen durchgehen. Der Button selbst hat
     eigenes pointer-events: auto. */
  pointer-events: none;
  /* Hoch genug, um über Tree-Connector-Pseudo-Elemente der nächsten
     Sub-Aufgabe zu liegen (deren `.al-grid` z-index 1 hat, Connector-
     Pseudos darin top: -1px → ragen in den Affordance-Bereich rein). */
  z-index: var(--z-overlay, 5);
}

/* Linie: dünner Brand-Roter Strich, beginnt knapp nach dem Plus-Button
   und endet am Ende der Title-Spalte. Die CSS-Variablen
   --al-titel-left (linke Kante der Plus-Mitte) und --al-titel-width
   werden vom Modul-JS auf dem Rows-Container gesetzt (siehe
   attachListInsertAfterRender in aufgaben-list.js). Fallbacks gelten,
   falls das JS noch nicht gemessen hat. */
.idf-list-insert::before {
  content: '';
  position: absolute;
  top: -1px;
  left: calc(var(--al-titel-left, 88px) + 18px);
  width: calc(var(--al-titel-width, 220px) - 18px);
  height: 1px;
  background: var(--primary, #c8134b);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--motion-fast, 80ms);
}

/* Plus-Button: visuell 22×22 Pille, sitzt mit der Mitte auf der
   Trennlinie zwischen den Rows. left wird so berechnet, dass die
   Button-MITTE auf --al-titel-left landet (also unter dem ersten
   Buchstaben des Titel-Texts).
   pointer-events: auto IMMER — der Button bleibt klickbar, auch wenn
   die Vorgänger-Row gerade nicht hover ist. opacity: 0 sorgt dafür,
   dass er unsichtbar wird, sobald die Maus die Hit-Zone verlässt. */
.idf-list-insert-btn {
  position: absolute;
  top: -11px;
  left: calc(var(--al-titel-left, 88px) - 11px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--primary, #c8134b);
  border-radius: 999px;
  background: var(--white, #fff);
  color: var(--primary, #c8134b);
  font-size: 11px;
  cursor: pointer;
  opacity: 0;
  pointer-events: auto;
  transition:
    opacity   var(--motion-fast, 80ms),
    transform var(--motion-base, 120ms) var(--ease-out, cubic-bezier(0.2, 0.8, 0.2, 1)),
    background var(--motion-base, 120ms),
    color var(--motion-base, 120ms);
}

/* Mini-Hover-Brücke — nur 3 px oberhalb/unterhalb des Plus-Glyphs,
   damit die Maus-Reise von der Row zum Plus nicht im 1-2-Pixel-Spalt
   abreißt, aber der Klick nicht 10 px außerhalb des Plus triggert.
   Horizontal exakt 22 px breit (kein left/right-Versatz). UI fühlt
   sich auf den Glyph genau an. */
.idf-list-insert-btn::after {
  content: '';
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: 0;
  right: 0;
}

/* Sichtbarkeit:
   1. Bei Hover über die Vorgänger-Row erscheint Plus + Linie.
   2. Bei Hover über den Plus-Button (inkl. erweiterter Hit-Zone)
      bleibt er sichtbar — auch wenn die Maus die Row verlassen hat. */
.al-row:hover + .idf-list-insert::before,
.idf-list-insert-btn:hover ~ .idf-list-insert,
.idf-list-insert:has(.idf-list-insert-btn:hover)::before {
  opacity: 0.6;
}
.al-row:hover + .idf-list-insert .idf-list-insert-btn,
.idf-list-insert-btn:hover {
  opacity: 1;
}

.idf-list-insert-btn:hover {
  background: var(--primary, #c8134b);
  color: var(--white, #fff);
  transform: scale(1.1);
}

.idf-list-insert-btn:focus-visible {
  outline: 2px solid var(--accent, #167ea0);
  outline-offset: 2px;
}

/* Drag-Modus: während aktivem Sortable-Drag oder Hover über den
   Drag-Handle der Vorgänger-Row → Affordance KOMPLETT aus dem Weg.
   Sortable.js setzt body.idf-sortable-dragging beim Drag-Start
   (siehe _shared/blocks/sortable/idf-sortable.js, onStart). Greifer-Hover
   ohne aktiven Drag wird via :has() abgefangen — verhindert das
   gleichzeitige Anzeigen von Drag-Cursor und Insert-Plus. */
body.idf-sortable-dragging .idf-list-insert,
.al-row:has(.al-drag-handle:hover) + .idf-list-insert {
  display: none;
}