/* skeleton.css */
.skeleton {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-skeleton);
  border-radius: 8px;
}

.skeleton::after {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-skeleton-shimmer),
    transparent
  );
  animation: shimmer 1.8s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200%);
  }
}

.skeleton-title {
  height: 28px;
  width: 70%;
  margin-bottom: 12px;
}

.skeleton-meta {
  height: 14px;
  width: 40%;
  margin-bottom: 20px;
}

.skeleton-line {
  height: 16px;
  width: 100%;
  margin-bottom: 10px;
}

.skeleton-line.short {
  width: 60%;
}

.skeleton-button {
  height: 40px;
  width: 120px;
  margin-top: 10px;
  border-radius: 10px;
}

.skeleton-paragraph {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.skeleton-paragraph .skeleton-line:last-child {
  width: 75%;
}

/* 骨架卡片：版式跟真实文章卡一致，但不接收交互 */
.skeleton-card {
  pointer-events: none;
}

/* 给读屏用户的加载状态，视觉上隐藏 */
.skeleton-status {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* 加载失败：骨架屏换成明确的错误态，不留下一直闪的占位条 */
.list-error {
  padding: 24px;
  color: var(--color-text-muted);
  text-align: center;
}

.list-error p {
  margin-bottom: 14px;
}

.retry-btn {
  padding: 8px 18px;
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
  background: var(--color-bg-hover);
  border: 1px solid var(--color-border-light);
  border-radius: 8px;
  transition: background 0.25s ease;
}

.retry-btn:hover {
  background: var(--color-bg-hover-strong);
}

.retry-btn:disabled {
  cursor: default;
  opacity: 0.6;
}

/* 减少动态效果时不要一直闪 */
@media (prefers-reduced-motion: reduce) {
  .skeleton::after {
    animation: none;
  }
}