/*
 * Mobile pull-to-refresh indicator.
 *
 * Fixed at the top of the viewport rather than inserted into the document flow: the gesture only
 * ever runs while the page is scrolled to its top, so a fixed pill that slides in from under the
 * header reads the same on every page it appears on, curated home page or not. Colors come from the
 * same tokens every other surface uses, so dark mode and the light/dark toggle need no changes here.
 */
.nv-ptr {
  position: fixed;
  top: 0;
  left: 50%;
  z-index: 90;
  display: flex;
  align-items: center;
  gap: var(--sp-2, 8px);
  padding: 8px 16px;
  border: 1px solid var(--nv-border);
  border-radius: 999px;
  background: var(--nv-surface);
  color: var(--nv-text-secondary);
  font-size: 0.8125rem;
  font-family: var(--nv-font-body);
  box-shadow: var(--nv-shadow-hover);
  transform: translate(-50%, -120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  will-change: transform, opacity;
}

.nv-ptr[data-nv-ptr-active] { opacity: 1; }

.nv-ptr[data-nv-ptr-settling] { transition: transform .2s ease, opacity .2s ease; }

.nv-ptr__spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid var(--nv-border);
  border-top-color: var(--nv-accent);
  animation: nv-ptr-spin .7s linear infinite;
  display: none;
}

.nv-ptr[data-nv-ptr-state="refreshing"] .nv-ptr__spinner { display: block; }

.nv-ptr[data-nv-ptr-state="refreshing"] .nv-ptr__arrow { display: none; }

.nv-ptr__arrow {
  display: inline-block;
  width: 15px;
  height: 15px;
  transition: transform .15s ease;
}

.nv-ptr[data-nv-ptr-state="release"] .nv-ptr__arrow { transform: rotate(180deg); }

@keyframes nv-ptr-spin {
  to { transform: rotate(360deg); }
}

@media (min-width: 768px) {
  /* The gesture is mobile-only; the indicator never mounts on a device without touch, but this is
     a second guard in case a desktop browser reports coarse pointer support (some hybrid laptops
     do) after the page was already sized for a pointer-driven layout. */
  .nv-ptr { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .nv-ptr, .nv-ptr__spinner, .nv-ptr__arrow { transition: none; animation-duration: 0.001ms; }
}