/* Sideways swipe hint (Simon, 7 Nov 2026). Wherever a row of cards (or a wide table) scrolls left and right,
   a soft shade comes in from the right-hand edge and the brand blue finger, the same one as on the laptop
   sample report, swipes across it. It shows only when the row really overflows, and goes for good once the
   visitor scrolls the row. Added by public/assets/js/swipe-hint.js. */
.swipe-host { position: relative; }
.swipe-hint { position: absolute; top: 0; right: 0; bottom: 0; z-index: 4; width: 76px; display: flex; align-items: center; justify-content: center; pointer-events: none;
  background: linear-gradient(to left, rgba(23, 26, 28, 0.16), rgba(23, 26, 28, 0)); opacity: 1; transition: opacity 0.35s ease; }
.swipe-hint[hidden] { display: none; }
.swipe-hint.is-gone { opacity: 0; }
.hx--dark .swipe-hint, .sec--ink .swipe-hint { background: linear-gradient(to left, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0)); }
.swipe-hint__finger { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #2563eb; color: #fff;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.92), 0 8px 18px rgba(0, 0, 0, 0.35); }
.swipe-hint__finger svg { width: 58%; height: 58%; }
.swipe-hint--play .swipe-hint__finger { animation: swipe-hint 2.4s cubic-bezier(.45, 0, .25, 1) 0.3s 2 both; }
@keyframes swipe-hint {
  0% { opacity: 0; transform: translateX(10px) scale(0.85); }
  15% { opacity: 1; transform: translateX(10px) scale(1); }
  45%, 55% { opacity: 1; transform: translateX(-34px) scale(1); }
  85% { opacity: 1; transform: translateX(10px) scale(1); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-hint--play .swipe-hint__finger { animation: none; }
  .swipe-hint { transition: none; }
}