/* Our pull replaces the browser's own while someone is signed in, so there is one refresh with one meaning. */
html.pull-refresh-on, html.pull-refresh-on body { overscroll-behavior-y: contain; }
.pull-refresh { position: fixed; z-index: 60; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; padding: env(safe-area-inset-top) 12px 6px; pointer-events: none; transform: translateY(calc(var(--pull-offset, 0px) + env(safe-area-inset-top) - 100%)); }
.pull-refresh[hidden] { display: none; }
.pull-refresh.pull-settling { transition: transform .22s ease-out; }
/* The whole page moves with the finger and Frank appears in the gap it leaves. top rather than transform, so fixed bars inside the page stay put. */
body.pull-active .page { position: relative; top: var(--pull-offset, 0px); }
body.pull-active.pull-settling .page { transition: top .22s ease-out; }
.pull-tile { flex: none; width: 48px; height: 48px; display: grid; place-items: center; box-sizing: border-box; padding: 6px; background: var(--green); border-radius: 15px; box-shadow: 0 5px 14px rgb(36 57 48 / .2); transform: scale(calc(.72 + .28 * var(--pull-progress, 0))) rotate(calc(-10deg + 10deg * var(--pull-progress, 0))); }
.pull-tile .frank-mascot .fm-outline { display: none; }
.pull-label { margin: 0; padding: 3px 11px; background: var(--white); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font: 15px/1.3 Georgia, serif; max-width: min(280px, calc(100vw - 92px)); }
.pull-label:empty { display: none; }
.pull-refresh.pull-ready .pull-tile { animation: pull-pop .22s ease-out; }
.pull-refresh.pull-working .pull-tile .frank-mascot { transform-origin: 50% 90%; animation: pull-sway .8s ease-in-out infinite alternate; }
.pull-refresh.pull-working .pull-tile .fm-dot { transform-box: fill-box; transform-origin: center; animation: pull-dot .8s ease-in-out infinite alternate; }
.pull-refresh.pull-done .pull-tile { animation: pull-pop .26s ease-out; }
.pull-refresh.pull-failed .pull-label, .pull-refresh.pull-held .pull-label { font-family: inherit; }
@keyframes pull-pop { 0% { transform: scale(1); } 45% { transform: scale(1.13); } 100% { transform: scale(1); } }
@keyframes pull-sway { from { transform: rotate(-7deg); } to { transform: rotate(7deg); } }
@keyframes pull-dot { from { transform: scale(.75); } to { transform: scale(1.2); } }
@media (prefers-reduced-motion: reduce) {
 .pull-refresh.pull-settling, body.pull-active.pull-settling .page { transition: none; }
 .pull-refresh .pull-tile, .pull-refresh .pull-tile .frank-mascot, .pull-refresh .pull-tile .fm-dot { animation: none !important; }
}
@media (forced-colors: active) { .pull-tile { border: 1px solid CanvasText; } }
@media print { .pull-refresh { display: none; } }