/* ============================================================================
 * 第 2 批 · modal.css —— 通用弹窗（公告 / 活动共用）
 *
 * 【形态】沿用第 1 批已有的 .mo-mask 遮罩 + .mo-card 卡片（showConfirm 同款），
 *   这里只做「扩展」：加 .mo-modal 变体（更宽、可带封面、右上角关闭按钮），
 *   不另造一套弹窗体系——同一时刻全站只有一种遮罩观感。
 * 【P0】无硬编码色值（#fff/#000 例外）；无紫→粉渐变；圆角 ≤ 18px（--radius-xl）。
 * ========================================================================== */

/* 遮罩：由 .mo-mask 提供（position/背景/z-index 已在 index.html / admin.html 定义），
   这里只补「带封面弹窗」需要的居中滚动与更宽卡片 */
.mo-mask.mo-mask-scroll { overflow-y: auto; align-items: flex-start; padding: 32px 16px; }

.mo-modal {
  position: relative;
  max-width: 560px;
  padding: 0;
  overflow: hidden;
  border-radius: var(--radius-xl, 18px);
  animation: moPop var(--motion-base, 200ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

/* 封面：有图用 <img>，无图用占位块（渐变走 token，青碧方向，非紫→粉） */
.mo-modal-cover {
  display: block;
  width: 100%;
  height: 190px;
  object-fit: cover;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}
.mo-modal-cover.is-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--meta);
  background: linear-gradient(135deg, var(--surface-2) 0%, var(--accent-dim) 100%);
}

/* 关闭按钮：44×44 触控区（WCAG 2.5.5），悬浮在卡片右上角 */
.mo-modal-x {
  position: absolute;
  top: 8px; right: 8px;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; border-radius: var(--radius-pill, 9999px);
  background: rgba(10, 14, 21, .55);
  color: var(--fg-2);
  cursor: pointer;
  transition: background-color var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1)),
              color var(--motion-fast, 150ms) var(--ease-standard, cubic-bezier(0.2, 0, 0, 1));
}
.mo-modal-x:hover { background: rgba(10, 14, 21, .8); color: var(--fg); }
.mo-modal-x:focus-visible { box-shadow: var(--focus-ring); }

.mo-modal-body { padding: 22px 24px 20px; }
.mo-modal-body h3 {
  margin: 0 0 10px;
  font-size: var(--text-xl, 18px);
  line-height: var(--leading-tight, 1.3);
  letter-spacing: -0.01em;
  color: var(--fg);
}
.mo-modal-body p {
  margin: 0 0 16px;
  font-size: var(--text-base, 14px);
  line-height: var(--leading-body, 1.7);
  color: var(--fg-2);
  white-space: pre-wrap;
  max-height: 46vh;
  overflow-y: auto;
}
.mo-modal-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* 「不再提示」：默认勾选态走原生 checkbox，配色跟随 token */
.mo-modal-once {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: var(--text-sm, 13px);
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.mo-modal-once input { width: auto; margin: 0; cursor: pointer; }
.mo-modal-spacer { margin-left: auto; }
.mo-modal-foot .mo-btn { text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.mo-modal-foot .mo-ok { color: var(--on-accent); }

@media (max-width: 600px) {
  .mo-modal-cover { height: 150px; }
  .mo-modal-body { padding: 18px 18px 16px; }
  .mo-modal-foot .mo-btn { flex: 1; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .mo-modal { animation: none; }
}