/* ═══════════════════════════════════════════════════════════════════
   ShukWAY · Shared Components · Sprint 15
   kpi-card (new markup contract), skeleton shimmer
   ═══════════════════════════════════════════════════════════════════ */

/* ─── KPI Card (new markup: .kpi-card-top, .kpi-drill-cta) ─── */
.kpi-card-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
}

.kpi-drill-cta{
  font-size:var(--text-xs);
  color:var(--teal);
  margin-top:var(--sp-2);
  opacity:0;
  transition:opacity var(--tx-fast);
}
.kpi-card.drill{cursor:pointer}
.kpi-card.drill:hover .kpi-drill-cta{opacity:1}
.kpi-card.drill:hover{
  box-shadow:var(--sh-md);
  transform:translateY(-2px);
}

/* ─── Delta chip down variant ─── */
.kpi-trend.down{color:var(--danger)}

/* ─── Skeleton shimmer ─── */
@keyframes skel-shimmer{
  0%{background-position:200% 0}
  100%{background-position:-200% 0}
}
.skel{
  background:linear-gradient(90deg, var(--cream-deep) 0%, var(--paper) 50%, var(--cream-deep) 100%);
  background-size:200% 100%;
  animation:skel-shimmer 1.5s infinite;
  border-radius:var(--r-sm);
}

/* ─── Skeleton KPI card ─── */
.kpi-card.skeleton{
  min-height:120px;
  pointer-events:none;
}
.kpi-card.skeleton .skel{display:block}