/* 宿主节点必须显式声明 display —— 自定义组件宿主默认是 inline，而内部是 block。
   inline 盒被 block 子元素打断后会碎成「前半段/后半段」两个零宽行盒，页面侧一旦
   在 <ui-card> 标签上加 border / box-shadow，就只会画在这两个碎片上，看起来是
   「角上冒出两根竖条」(首页 .just-completed 高亮踩过这个坑)；transform 对非替换
   inline 元素更是完全无效，缩放脉冲动画一次都不会跑。
   margin-bottom 也一并上提到宿主：外边距归宿主、内边距归内部，页面侧加边框时
   才不会把 24rpx 外边距一起圈进框里。 */
:host {
  display: block;
  margin-bottom: 24rpx;
  box-sizing: border-box;
}

.ui-card {
  background: var(--card-bg, #FFFFFF);
  border-radius: 24rpx;
  padding: 32rpx;
  box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
}

/* Dark mode: shadows barely read against the darker backdrop, so add a
   faint bright edge to keep cards elevated and separated from the page. */
@media (prefers-color-scheme: dark) {
  .ui-card {
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.45), 0 0 0 1rpx rgba(255, 255, 255, 0.04);
  }
}

.ui-card--flush {
  padding: 0;
}

/* Soft variant: subtle background tint, no shadow */
.ui-card.soft {
  background: rgba(var(--primary-rgb, 255, 107, 53), 0.04);
  box-shadow: none;
  border-radius: 20rpx;
}

/* Gradient variant: hero card filled with the theme gradient, white text.
   Descendant elements override --text / --text-secondary locally so any
   generic text inside automatically flips to white. */
.ui-card.gradient {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
  box-shadow: 0 8rpx 28rpx rgba(var(--primary-rgb), 0.35);
  /* These custom properties are the ONLY channel that crosses the component
     style-isolation boundary into slotted page content (see MEMORY.md). Any
     text/fill inside the hero card must read from them, never var(--primary). */
  --text: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.85);
  --border: rgba(255, 255, 255, 0.28);
  --on-primary: #FFFFFF;
}

/* Staggered entrance animation.
   交错延迟由页面传入的 index 换算成内联 animation-delay(见 ui-card.wxml)，
   不能用 :nth-child —— .ui-card 在组件内部永远是根节点下唯一的第 1 个子元素，
   恒匹配 nth-child(1)，所有卡片延迟都会是同一个值，压根不交错。 */
.ui-card.in {
  animation: uiCardIn 0.45s ease both;
}

@keyframes uiCardIn {
  from { opacity: 0; transform: translateY(40rpx); }
  to   { opacity: 1; transform: translateY(0); }
}