/* ============================================================
   Readiness Card · 就緒檢查卡（spec 5.1.5.2 §4.4「Ready to sell?」）
   ------------------------------------------------------------
   建立流程上架前的備齊檢查：逐項列出要備好的內容，已備齊打勾、
   未備齊空心圈；卡底 banner 統計還差幾項，全部備齊轉綠字。
   create-product（依類型換檢查項）/ create-bundle 共用。
     .readiness
       .readiness__head > .readiness__title
       .readiness__list > .readiness__item(.--done) > .readiness__mark + 文字
       .readiness__banner(.--ready)
   done 態用 --status-success；未備齊用空心圈（inset box-shadow 當圈）。
   ============================================================ */

.readiness {
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
  /* 2026-07-28（使用者裁示「每張卡都要有細微陰影」）：本元件原本只有底色＋圓角、
     沒有任何 box-shadow，在深色畫布上與背景幾乎貼平、讀不出「這是一張浮起的卡」。
     深色版的 --shadow-card 帶 rgba(253,253,253,0.08) 的亮色 rim——深底上真正看得見的
     是那圈 rim 而不是黑色陰影，這也是為什麼不能只加純黑 drop。 */
  box-shadow: var(--shadow-card);
}

.readiness__head { padding: var(--sp-14) var(--sp-16) var(--sp-2); }
.readiness__title { font-family: var(--font-display);
  font-size: var(--fs-14); font-weight: var(--fw-regular); margin: 0; }

.readiness__list {
  list-style: none; margin: 0;
  padding: var(--sp-10) var(--sp-16) var(--sp-12);
  display: flex; flex-direction: column; gap: var(--sp-8);
}
.readiness__item {
  display: flex; align-items: center; gap: 9px;
  font-size: var(--fs-13); color: var(--foreground-muted);
}
.readiness__item--done { color: var(--foreground); }

.readiness__mark {
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.4px var(--border);
  color: transparent;
}
.readiness__item--done .readiness__mark {
  background: var(--status-success);
  box-shadow: none;
  color: var(--foreground-on-inverse);
}
.readiness__mark .ztor-icon { width: 11px; height: 11px; stroke-width: 2.6; }

.readiness__banner {
  padding: 11px var(--sp-16);
  border-top: 1px solid var(--border);
  background: var(--muted);
  font-size: var(--fs-12); font-weight: var(--fw-regular);
  color: var(--foreground-muted);
}
.readiness__banner--ready { color: var(--status-success); }

/* ------------------------------------------------------------
   Footer chip 變體：貼在 footer 主動作旁的就緒狀態指示（inline chip）。
   未備齊＝muted、全備齊＝轉綠（--ready）；hover／focus 於上方浮出完整
   .readiness 卡當 tooltip（__pop）。create-product / create-campaign footer 共用。
   Promoted 2026-07-01 from create-product/create-campaign inline（.cp-ready-chip）。
   ------------------------------------------------------------ */
.readiness__chip {
  position: relative;
  display: inline-flex; align-items: center; gap: var(--sp-6);
  font-size: var(--fs-12); font-weight: var(--fw-medium);
  color: var(--foreground-muted);
  white-space: nowrap; cursor: default;
}
.readiness__chip .ztor-icon { width: 14px; height: 14px; }
.readiness__chip--ready { color: var(--status-success); }
.readiness__pop {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: 300px; max-width: 78vw;
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity var(--duration) var(--easing),
              transform var(--duration) var(--easing),
              visibility var(--duration) var(--easing);
  pointer-events: none; z-index: 60;
}
.readiness__pop .readiness { box-shadow: var(--shadow-float); max-height: 60vh; overflow: auto; text-align: left; }
.readiness__pop::after { content: ""; position: absolute; top: 100%; right: 26px; border: 7px solid transparent; border-top-color: var(--muted); }
.readiness__chip:hover .readiness__pop,
.readiness__chip:focus-within .readiness__pop { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
@media (prefers-reduced-motion: reduce) {
  .readiness__pop { transition: none; }
}