/* A revealed strip above the document, never an overlay on page content. */
.pull-refresh{position:fixed;top:0;left:0;z-index:100;box-sizing:border-box;height:0;opacity:0;width:100%;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;background:#090909;color:#e6c987;font:500 14px/1.4 system-ui,sans-serif;white-space:nowrap;pointer-events:none;overflow-anchor:none;transition:height .28s ease-out,opacity .24s ease-out}
body:has(>.pull-refresh){overflow-anchor:none}
.pull-refresh[data-pulling="true"]{transition:none}
.pull-refresh::before{content:'';width:12px;height:12px;flex-shrink:0;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;opacity:.65}
.pull-refresh[data-loading="true"]::before{animation:refresh-spin .8s linear infinite}
@keyframes refresh-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.pull-refresh{transition:none}.pull-refresh[data-loading="true"]::before{animation:none}}

/* Expanding the refresh strip must not scroll the header out of view. */
html:has(body>.pull-refresh){overflow-anchor:none}
html:has(.pull-refresh[data-pulling]),html:has(.pull-refresh[data-loading]){scroll-behavior:auto;overscroll-behavior-y:none}

/* Move the page visually instead of resizing its scroll layout on every touch. */
body:has(>.pull-refresh)>header,body:has(>.pull-refresh)>main,body:has(>.pull-refresh)>footer{translate:0 var(--pull-refresh-offset,0px);transition:translate .28s ease-out}
body:has(>.pull-refresh[data-pulling])>header,body:has(>.pull-refresh[data-pulling])>main,body:has(>.pull-refresh[data-pulling])>footer{transition:none}
@media(prefers-reduced-motion:reduce){body:has(>.pull-refresh)>header,body:has(>.pull-refresh)>main,body:has(>.pull-refresh)>footer{transition:none}}