html.has-pull-refresh, html.has-pull-refresh body { overscroll-behavior-y: none; }
.pull-refresh {
  position: fixed;
  z-index: 21;
  left: 50%;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: calc(100% - 32px);
  color: var(--brand);
  pointer-events: none;
  transform: translate(-50%, var(--pull-offset, 0px));
}
.pull-refresh[hidden] { display: none; }
.pull-refresh-disc {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(20, 45, 39, .2);
}
.pull-refresh-disc svg { width: 24px; height: 24px; transform: rotate(var(--pull-rotation, 0deg)); }
.pull-refresh-label {
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  color: var(--ink-muted);
  background: var(--surface);
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
}
.pull-refresh[data-state="refreshing"] svg { animation: pull-refresh-spin 800ms linear infinite; }
.pull-refresh[data-state="complete"] { color: var(--success); }
.pull-refresh[data-state="error"] { color: var(--danger); }
@keyframes pull-refresh-spin { to { transform: rotate(630deg); } }
@media (prefers-reduced-motion: reduce) {
  .pull-refresh[data-state="refreshing"] svg { animation: none; }
}