/* ============================================================================
 * 第 3 批 · onboarding.css —— 新手引导层
 *
 *   1) .mo-tip    关键参数悬浮说明（问号图标 + 气泡，由表单 label 文案驱动）
 *   2) .mo-next   「下一步该做什么」动作条（书房卡片 / 作品详情共用一套）
 *   3) .mo-gd     首次进入引导（高亮框 + 一句话说明卡片，非模态、不挡操作）
 *   4) .mo-manual 「新手必读」面板（复用既有 .mo-mask / .mo-card 观感，不另造弹窗体系）
 *
 * 【P0】与本项目其余样式同源，四条红线照旧：
 *   - 零硬编码色值（唯一例外 #fff / #000），一律 var(--token)
 *   - 无紫→粉渐变；无 emoji；无装饰性毛玻璃
 *   - 圆角 ≤ 18px（--radius-xl）；不做「1px 边框 + blur≥16px 阴影」的幽灵卡片
 *   - 引导层本体 pointer-events:none，只有按钮卡片吃点击 —— 绝不挡住任何操作
 * ========================================================================== */

/* ===== 1) 参数悬浮说明 ===== */
/* 触发器用 span 而非 button：它会被插进 <label> 里，
   而 HTML 不允许 label 内嵌可交互控件（内嵌 button 属于非法嵌套）。 */
.mo-tip { position: relative; display: inline-flex; align-items: center; margin-left: 5px; vertical-align: middle; }
.mo-tip-i {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: var(--radius-pill);
  color: var(--meta); cursor: help;
  transition: color var(--motion-fast) var(--ease-standard);
}
.mo-tip:hover .mo-tip-i, .mo-tip:focus-within .mo-tip-i, .mo-tip.is-open .mo-tip-i { color: var(--accent); }
.mo-tip-b {
  position: absolute; bottom: calc(100% + 8px); left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-dropdown);
  width: max-content; max-width: min(272px, 70vw);
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--elev-raised);
  font-size: var(--text-xs); font-weight: var(--weight-read);
  line-height: var(--leading-body); letter-spacing: 0;
  color: var(--fg-2); text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--motion-fast) var(--ease-standard),
              visibility var(--motion-fast) var(--ease-standard);
}
.mo-tip:hover .mo-tip-b,
.mo-tip:focus-within .mo-tip-b,
.mo-tip.is-open .mo-tip-b { opacity: 1; visibility: visible; }

/* ===== 2) 下一步动作条 ===== */
/* 动作按钮本身沿用页面既有的 .btn.ghost.sm-btn —— 不另起一套按钮语言，
   这里只提供容器与排版。 */
.mo-next {
  margin-top: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.mo-next-hd {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: var(--weight-announce);
  color: var(--accent); letter-spacing: .01em;
}
.mo-next-tip {
  margin: 6px 0 10px;
  font-size: var(--text-sm); line-height: var(--leading-body);
  color: var(--muted);
}
.mo-next-row { display: flex; gap: 8px; flex-wrap: wrap; }
.mo-next-danger { color: var(--danger); }
.mo-next-danger:hover { border-color: var(--danger); background: var(--warn-dim); color: var(--danger); }
/* 生成完成后追加的跳转行 */
.mo-next-jump {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; padding: 4px 0;
  font-size: var(--text-sm); font-weight: var(--weight-emphasize);
  color: var(--accent); cursor: pointer; background: none; border: none;
}
.mo-next-jump:hover { color: var(--accent-hover); }

/* ===== 3) 首访引导 ===== */
/* 高亮框：border + 同色扩散环，不加暗投影，避免「幽灵卡片」观感 */
.mo-gd-ring {
  position: fixed; top: 0; left: 0;
  z-index: var(--z-lightbox);
  border: 2px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 3px var(--accent-dim);
  pointer-events: none;                 /* 核心：高亮框绝不拦截点击 */
  transition: top var(--motion-base) var(--ease-out),
              left var(--motion-base) var(--ease-out),
              width var(--motion-base) var(--ease-out),
              height var(--motion-base) var(--ease-out),
              opacity var(--motion-fast) var(--ease-standard);
}
.mo-gd {
  position: fixed; top: 0; left: 0;
  z-index: var(--z-lightbox);
  width: min(332px, calc(100vw - 32px));
  padding: 16px 18px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-raised);
}
.mo-gd-step {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--text-xs); font-weight: var(--weight-emphasize);
  color: var(--meta); letter-spacing: .06em;
}
.mo-gd-t {
  margin: 7px 0 6px;
  font-size: var(--text-md); font-weight: var(--weight-announce);
  line-height: var(--leading-tight); letter-spacing: -0.01em;
  color: var(--fg);
}
.mo-gd-b {
  margin: 0;
  font-size: var(--text-base); line-height: var(--leading-body);
  color: var(--fg-2);
}
.mo-gd-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px;
}
.mo-gd-close {
  margin-left: auto; padding: 6px 12px;
  background: none; border: none; border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--muted); cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
}
.mo-gd-close:hover { color: var(--fg); }

/* ===== 4) 新手必读面板 ===== */
/* 面板比常规 .mo-card 宽，内容长时注意滚动；其余观感与既有弹窗完全一致 */
.mo-manual { max-width: 620px; padding: 0; }
.mo-manual-hd {
  display: flex; align-items: center; gap: 10px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border);
}
.mo-manual-hd h3 {
  margin: 0;
  font-size: var(--text-xl); font-weight: var(--weight-announce);
  letter-spacing: -0.01em; color: var(--fg);
}
.mo-manual-x {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-left: auto; padding: 0;
  background: none; border: none; border-radius: var(--radius-pill);
  color: var(--muted); cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard),
              background-color var(--motion-fast) var(--ease-standard);
}
.mo-manual-x:hover { color: var(--fg); background: var(--surface-2); }
.mo-manual-body { padding: 16px 22px 4px; max-height: min(62vh, 480px); overflow-y: auto; }
.mo-manual-sec { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.mo-manual-sec:last-child { border-bottom: none; }
.mo-manual-ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: var(--radius-sm);
  background: var(--accent-dim); color: var(--accent);
}
.mo-manual-sec h4 {
  margin: 0 0 4px;
  font-size: var(--text-base); font-weight: var(--weight-emphasize);
  color: var(--fg);
}
.mo-manual-sec p {
  margin: 0;
  font-size: var(--text-sm); line-height: var(--leading-body);
  color: var(--muted); white-space: pre-wrap;
}
.mo-manual-foot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border);
}

@media (max-width: 600px) {
  .mo-manual-hd { padding: 15px 16px 12px; }
  .mo-manual-body { padding: 12px 16px 4px; }
  .mo-manual-foot { padding: 12px 16px 15px; }
  .mo-manual-foot .mo-btn { flex: 1; justify-content: center; }
}

/* 减弱动效：位移与淡入一律退化到瞬时 */
@media (prefers-reduced-motion: reduce) {
  .mo-gd-ring, .mo-tip-b { transition: none; }
}