/* P2 · 渐进加载与反馈的统一皮肤（SPA 与 6 个独立 pilot 页共用）
 * 对应 ui-ux-pro-max 的四条准则：
 *   Loading Indicators —— 稳定骨架 + aria-busy，保留布局，不闪 spinner；
 *   Content Jumping    —— 骨架与结果区同高，替换时附近内容不跳；
 *   Touch & Interaction— 按压有回弹，列表错峰入场；
 *   Reduced Motion     —— 系统开了「减少动态效果」时动画全部静止。
 * 所有颜色都走 site-vars.css 的变量并给 fallback，深色主题同样可读。 */

/* 骨架：固定高度的灰块，先占住标题 / 输入 / 结果三个位置。 */
.skeleton {
  background: linear-gradient(
    100deg,
    rgba(140, 130, 120, 0.14) 30%,
    rgba(140, 130, 120, 0.26) 50%,
    rgba(140, 130, 120, 0.14) 70%
  );
  background-size: 220% 100%;
  border-radius: 12px;
  animation: skeletonShimmer 1.4s ease-in-out infinite;
}
@keyframes skeletonShimmer {
  from { background-position: 160% 0; }
  to { background-position: -60% 0; }
}
.skeleton-line { height: 22px; margin: 12px 0; }
.skeleton-line.title { width: 58%; height: 36px; }
.skeleton-line.input { width: 100%; height: 132px; }
.skeleton-line.result { width: 100%; height: 176px; }
.skeleton-line.short { width: 38%; }
.skeleton-host { padding: 16px 0; }
[hidden] { display: none !important; }

/* 长任务进度：轨道 + 填充 + 一句正在做第几件。 */
.progress-host { margin: 14px 0; }
.progress-track {
  height: 12px;
  border-radius: 999px;
  background: rgba(140, 130, 120, 0.18);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--primary, #B34700);
  transition: width 0.24s ease;
}
.progress-label { margin-top: 8px; font-size: 17px; font-weight: 700; }

/* 空状态：不只是一句「还没开始」，给一个真能点的下一步。 */
.empty-state {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  border: 2px dashed var(--line, #EAD9BE);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 14px 0;
  background: var(--paper, #fff);
}
.empty-state p { margin: 0; flex: 1 1 240px; font-size: 18px; font-weight: 600; }
.empty-state button {
  min-height: 44px;
  padding: 8px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--primary, #B34700);
  color: #fff;
  font-size: 17px;
  font-weight: 800;
  cursor: pointer;
  flex: 0 0 auto;
}
.empty-state button:disabled {
  opacity: 0.55;
  cursor: default;
}

/* PDCA 第 3 轮：示例按钮点击后必须有看得见的回执。flex-basis 100% 让
   它自己占一行，不跟说明文字和按钮挤在一起；颜色跟随统一调色板。 */
.sample-feedback {
  flex: 1 1 100%;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--ink, #2A1A12);
  border-left: 4px solid var(--primary, #B34700);
  padding: 2px 0 2px 12px;
}
.sample-feedback[data-kind="ok"] { border-left-color: #1B5E20; }
.sample-feedback[data-kind="warn"] { border-left-color: #B34700; }

/* 卡片微互动：按下轻微缩小，抬起回弹；入场错峰 40ms。 */
[data-interactive] {
  transition: transform 0.18s cubic-bezier(0.2, 0.8, 0.3, 1),
    box-shadow 0.18s ease;
}
[data-interactive]:active { transform: scale(0.98); }
.card-enter { animation: cardEnter 0.32s cubic-bezier(0.2, 0.8, 0.3, 1) both; }
@keyframes cardEnter {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 首屏装饰图：手机上先折叠成 96px 的小图标，点一下才展开，
   让输入框落在首屏里 —— 体检里最影响「能不能马上开始用」的一处。 */
.deco-collapsible { cursor: pointer; }
.deco-collapsible[data-collapsed="true"] {
  max-height: 96px;
  object-fit: contain;
  margin: 0 auto;
}
.deco-hint { display: block; text-align: center; font-size: 15px; opacity: 0.75; margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: rgba(140, 130, 120, 0.18); }
  .progress-fill { transition: none; }
  [data-interactive] { transition: none; }
  [data-interactive]:active { transform: none; }
  .card-enter { animation: none; }
}