/* ==========================================================================
   BookTo — Darstellung der Verweil-Ansteuerung (Dwell)

   WICHTIG: Diese Datei gehoert zur Engine _shared_input/dwell-dom.js.
   Die Engine sucht in jedem angemeldeten Element ein <span class="dwell-dot">
   und setzt darauf per JavaScript width/height/background/mask sowie
   transform: translate(-50%, -50%).

   Damit der Punkt MITTIG im Bedienelement waechst, muss er hier absolut
   positioniert sein (top/left 50%). Ohne diese Regeln sitzt er als normales
   Inline-Element oben rechts — genau der Fehler vom 25.07.2026.

   (GazeTos css/dom-dwell.css passt NICHT: die dortige Variante zeichnet
   einen Ring per ::before-Pseudoelement und kennt kein .dwell-dot.)
   ========================================================================== */

.dwell-dot {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  will-change: width, height;
}

/* Der Punkt darf die Beschriftung nie verdecken. */
.btn > *:not(.dwell-dot),
.tile > *:not(.dwell-dot),
.reader__nav > *:not(.dwell-dot),
.imgpick > *:not(.dwell-dot) {
  position: relative;
  z-index: 3;
}

/* Sicherheitsnetz: alles, was Dwell-Ziel ist, braucht einen
   Positionierungs-Kontext und darf den Punkt nicht ueberlaufen lassen.

   ⚠️ Die Menge muss zum SELECTOR in js/input.js passen — der lautet
   `button:not([disabled]), [data-dwell]`, also JEDER Knopf. Stand hier nur
   `[data-dwell]`, fiel jeder Knopf ohne eigene `position` durch: Der Punkt
   suchte sich den naechsten positionierten Vorfahren und landete, wenn es
   keinen gab, in der Mitte des Fensters. Genau das passierte den
   Schlagwoertern der Bibliothek (`.libtag`, Befund Lars 02.08.2026), waehrend
   `.btn` es nur deshalb nicht tat, weil es zufaellig `position: relative`
   trug. Eine Regel, die eine Teilmenge absichert, sichert gar nichts. */
[data-dwell], button { position: relative; overflow: hidden; }

/* Kurzes Aufblitzen beim Ausloesen. */
@keyframes dwell-fired {
  0%   { box-shadow: 0 0 0 0 rgba(75,105,140,.55); }
  100% { box-shadow: 0 0 0 18px rgba(75,105,140,0); }
}
.dwell-fired { animation: dwell-fired .45s ease-out; }

@media (prefers-reduced-motion: reduce) {
  .dwell-fired { animation: none; }
}