/* =========================================================================
   FinStack 四态样式（2026-09-20）· 配合 /static/states.js 使用
   ---------------------------------------------------------------------------
   为什么单独一个文件、而不是并进 components.css：

     `index.html` **不加载 components.css**（它自带 707 行页面样式），而它是四态
     用得最多的页面（历史报告列表、看板、健康状态）。把四态样式放进 components.css
     等于"首页拿不到"—— 而这恰恰是"页面各自造轮子"的起点。
     本文件被 17 个页面全部加载，四态样式因此只有一份、且任何页面都拿得到。

   命名空间统一 `fs-state-*`：与页面既有的 `.loading` / `.empty` / `.err-note`
   / `.error-box` 互不干扰（迁移期内两者会短暂共存，改名比复用安全）。

   颜色一律走 token（C3）：状态色用 --err/--warn/--ok 的 dim 变体，
   文本用 --text-2/--text-3，骨架用 --surface-*。
   ========================================================================= */

.fs-state {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border-radius: var(--r-sm);
  font-size: var(--fs-14);
  line-height: var(--lh-base);
}
.fs-state-ico { display: inline-flex; flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px; }
.fs-state-ico svg { width: 18px; height: 18px; }
.fs-state-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fs-state-msg { color: var(--text-1); }
.fs-state-diag {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--text-3);
  word-break: break-all;
}
.fs-state-act { flex-shrink: 0; display: flex; align-items: center; gap: 8px; }
.fs-state-btn {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--surface-1);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xs);
  color: var(--text-1);
  font-size: var(--fs-13);
  font-family: inherit;
  padding: 5px 11px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 140ms, color 140ms;
}
.fs-state-btn:hover { border-color: var(--gold); color: var(--gold); }
.fs-state-btn svg { width: 14px; height: 14px; }
.fs-state-note {
  align-self: center;
  font-size: var(--fs-12);
  color: var(--text-3);
}

/* ── loading：骨架微光，**不出现"加载中…"文字** ──
   纯文字的加载态不占位，内容到位时布局会跳一下；在读数密集的看板上，
   跳一下等于读数位移。骨架保持高度，进来时表格不抖。 */
.fs-state-loading { flex-direction: column; gap: 8px; padding: 16px 14px; }
.fs-sk-bar {
  display: block;
  height: 12px;
  border-radius: var(--r-xs);
  background: linear-gradient(90deg, var(--surface-1) 0%, var(--surface-3) 50%, var(--surface-1) 100%);
  background-size: 200% 100%;
  animation: fsSkShimmer 1.6s linear infinite;
}
@keyframes fsSkShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ── empty：中性图标 + 解释 + 行动点 ── */
.fs-state-empty { background: var(--surface-0); border: 1px dashed var(--border-2); }
.fs-state-empty .fs-state-ico { color: var(--text-3); }
.fs-state-empty .fs-state-msg { color: var(--text-2); }

/* ── error：红框 + 人话 +（端点 · HTTP 状态 · code）+ 重试 ── */
.fs-state-error { background: var(--err-dim); border: 1px solid var(--err-dim); }
.fs-state-error .fs-state-ico { color: var(--err); }
.fs-state-error .fs-state-btn:hover { border-color: var(--err); color: var(--err); }

/* ── degraded：「部分数据源不可用，已显示可用数据」──
   与 error 的区别是**语义**：degraded 说"东西不全但能用"，
   error 说"这块读不到"。两者共用一个配色会让用户分不清该重试还是该照常看。 */
.fs-state-degraded { background: var(--warn-dim); border: 1px solid var(--warn-dim); }
.fs-state-degraded .fs-state-ico { color: var(--warn); }
.fs-state-degraded .fs-state-msg { color: var(--text-1); }

/* ── 表格内（<tbody> 容器）：去掉独立卡片感，留一行高 ── */
.fs-state-cell { padding: 0; border: none; }
.fs-state-cell .fs-state { border-radius: var(--r-xs); padding: 12px 14px; margin: 2px 0; }

/* ── 无障碍：禁止动效时必须降级成静态块，而不是"转得慢一点" ── */
@media (prefers-reduced-motion: reduce) {
  .fs-sk-bar { animation: none; background: var(--surface-2); }
  .fs-state-btn { transition: none; }
}

@media (max-width: 720px) {
  .fs-state { padding: 12px; }
  .fs-state-act { align-self: flex-start; }
}