/* ptr.css —— 通用下拉刷新指示器
 *
 * 视觉：iOS UIRefreshControl / MIUI 风
 *   ┌────────────────────┐
 *   │      ◜◝           │  下拉：圆环 stroke-dasharray 跟随进度伸展
 *   │   下拉刷新          │  过阈值：圆环补满 + 文字切"松开刷新" + haptic
 *   └────────────────────┘  刷新中：圆环无限旋转
 *
 * 组件由 JS 动态注入，放在 shell 的最前面。shell position:relative + overflow:visible
 * 让 header 通过 margin-top:-60px 藏在 shell 上方；shell 整体 transform:translateY(y)
 * 时 header 和内容一起下移，露出 spinner。
 */

.ptr-shell {
  position: relative;
  /* 上方 60px 内容溢出可见，才能露出 ptr-header 的 spinner */
  will-change: transform;
}

.ptr-header {
  position: absolute;
  top: -64px;
  left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  user-select: none;
  /* Safe-area 兜底：极窄手机把左右 padding 留出 */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  z-index: 1;
}

/* Spinner 圆环 —— SVG，半径 12，周长约 75.4 */
.ptr-spinner {
  width: 26px; height: 26px;
  display: inline-flex;
  align-items: center; justify-content: center;
}
.ptr-spinner svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg); /* 从 12 点方向开始伸展 */
}
.ptr-ring {
  stroke: var(--ios-label3, rgba(60,60,67,.3));
  stroke-linecap: round;
  transition: stroke .2s var(--ios-ease, ease);
}
.ptr-header.ptr-ready .ptr-ring {
  stroke: var(--ios-blue, #007aff);
}

/* Loading —— 圆环补满 + 无限旋转 */
.ptr-header.ptr-loading .ptr-spinner {
  animation: ptr-spin 0.85s linear infinite;
}
.ptr-header.ptr-loading .ptr-ring {
  stroke: var(--ios-blue, #007aff);
  stroke-dasharray: 60 20 !important;
}
@keyframes ptr-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.ptr-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--ios-label2, rgba(60,60,67,.6));
  letter-spacing: -0.005em;
  min-width: 68px;
  transition: color .2s var(--ios-ease, ease);
}
.ptr-header.ptr-ready .ptr-text,
.ptr-header.ptr-loading .ptr-text {
  color: var(--ios-blue, #007aff);
}

/* prefers-reduced-motion：关掉旋转、缩短过渡 */
@media (prefers-reduced-motion: reduce) {
  .ptr-header.ptr-loading .ptr-spinner { animation: none; }
}