/* ============================================================
   skeleton.css — 通用骨架屏（加载态）组件
   ------------------------------------------------------------
   依赖：tokens.css（设计令牌，均带 fallback，缺失不影响渲染）
   用途：图表/列表数据加载期间，覆盖在内容区上的轻量占位动画，
         替代笨重的全屏 loadingOverlay。

   HTML 结构（由 skeleton.js 的 UI.insertSkeleton 自动生成，无需手写）：
     <div class="chart-content">            ← 需 position: relative（由使用页提供）
       <div class="chart-skeleton" aria-hidden="true">
         <div class="sk-block sk-title"></div>
         <div class="sk-plot"><svg class="sk-line" ...><polyline .../></svg></div>
         <div class="sk-row"><span class="sk-block sk-chip"></span> × N</div>
       </div>
       <div id="chartDiv0"></div>           ← 真实内容（Plotly 等）渲染于此
     </div>

   用法（JS，见 skeleton.js）：
     UI.insertSkeleton(document.querySelector('.chart-content'), { rows: 4 });
     UI.removeSkeleton(document.getElementById('chartDiv0'));  // 数据就绪后
   ============================================================ */

.chart-skeleton {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding: var(--space-4, 16px) 20px;
  background: var(--surface, #fff);
  border-radius: 4px;
  overflow: hidden;
  pointer-events: none;
  transition: opacity var(--transition-base, .26s) ease;
}
.chart-skeleton.is-hidden { opacity: 0; }

/* 通用骨架块：微光扫过（消费令牌，带 fallback） */
.sk-block {
  background: linear-gradient(100deg,
    var(--skeleton-base, #e9ebef) 28%,
    var(--skeleton-hi, #f6f7f9) 50%,
    var(--skeleton-base, #e9ebef) 72%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  border-radius: 6px;
}
.sk-title { width: 38%; height: 12px; }
.sk-plot {
  position: relative;
  flex: 1;
  min-height: 80px;
  border-radius: 6px;
  background: linear-gradient(180deg, #fafbfc, #f4f6f8);
  overflow: hidden;
}
.sk-line {
  position: absolute;
  inset: 8px 10px;
  width: calc(100% - 20px);
  height: calc(100% - 16px);
}
.sk-line polyline {
  fill: none;
  stroke: var(--brand, #ef6a4c);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 360;
  animation: skeleton-draw 2.2s ease-in-out infinite;
}
.sk-row { display: flex; gap: var(--space-3, 12px); }
.sk-chip { flex: 1; height: 22px; }

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes skeleton-draw {
  0%   { stroke-dashoffset: 360; opacity: .12; }
  50%  { opacity: .4; }
  100% { stroke-dashoffset: 0;   opacity: .12; }
}

/* 可访问性：尊重用户的「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  .sk-block { animation: none; }
  .sk-line polyline { animation: none; opacity: .25; }
  .chart-skeleton { transition: none; }
}