/* ========== Pull to refresh (home-screen app only) ==========
   js/pull-to-refresh.js creates #pull-to-refresh and drives it: the disc
   follows the finger (transform), the arrow turns as the pull nears the
   threshold (--ptr-angle), and data-state names the phase. The page itself
   never moves — the disc floats over it, so nothing reflows and fixed
   elements keep their place. */

.ptr {
    position: fixed;
    top: 8px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: calc(var(--z-index-hamburger) + 1);
    transform: translateY(-60px);
    will-change: transform;
}
.ptr.ptr-settling { transition: transform 0.25s ease; }

/* Below the app bar on a phone, where the gesture lives */
@media (max-width: 767px) {
    body.authenticated .ptr { top: 64px; }
}

.ptr-disc {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    color: var(--text-muted);
}
.ptr[data-state="ready"] .ptr-disc,
.ptr[data-state="refreshing"] .ptr-disc { color: var(--brand); }
.ptr[data-state="done"] .ptr-disc { color: var(--ok-text); }

.ptr-icon,
.ptr-icon-done {
    width: 18px;
    height: 18px;
    display: block;
}
.ptr-icon { transform: rotate(var(--ptr-angle, 0deg)); }
.ptr[data-state="refreshing"] .ptr-icon { animation: ptr-spin 0.9s linear infinite; }

.ptr-icon-done { display: none; }
.ptr[data-state="done"] .ptr-icon { display: none; }
.ptr[data-state="done"] .ptr-icon-done { display: block; }

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

/* The spinner is a progress indicator, so it stays — slower. The settle
   transition is decoration and goes. */
@media (prefers-reduced-motion: reduce) {
    .ptr.ptr-settling { transition: none; }
    .ptr[data-state="refreshing"] .ptr-icon { animation-duration: 2s; }
}

/* Installed to the home screen, the native overscroll is either a second
   refresh (Android) or a bounce under the disc (iOS). Neither is wanted. */
@media (display-mode: standalone) {
    html, body { overscroll-behavior-y: none; }
}