/* ==========================================================
   AI 投研提示词库（research-prompts.html）页面专属样式
   依赖 base.css 设计 token 与 pages.css 的 guide-* 组件；
   颜色 / 圆角 / 字号 / 间距一律走 token，不写死色值
   ========================================================== */

/* ---------- 页头统计行 ---------- */

.pc-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
  margin-top: 26px;
}

.pc-stat { text-align: center; }

.pc-stat b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--primary);
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.pc-stat span {
  font-size: var(--fs-xs);
  color: var(--text-3);
  letter-spacing: 1px;
}

/* ---------- 章节标题行：h2 + 数量徽标 ---------- */

.pc-h2row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.pc-h2row h2 {
  font-size: var(--fs-xl);
  margin-bottom: 0;
  letter-spacing: 0.5px;
}

.pc-count {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}

/* ---------- 提示词卡片 ---------- */

.pc-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}

.pc-card { padding: 24px 26px; }

.pc-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.pc-card-head h3 {
  font-size: var(--fs-lg);
  line-height: 1.5;
}

.pc-card-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.pc-flag {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--primary-deep);
  background: var(--primary-soft);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
}

.pc-card-desc {
  font-size: var(--fs-md);
  color: var(--text-2);
  margin-bottom: 12px;
}

.pc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}

.pc-tag {
  font-size: var(--fs-xs);
  color: var(--text-3);
  background: var(--surface-2);
  border-radius: 999px;
  padding: 3px 10px;
}

/* ---------- 折叠面板：提示词全文 / 产出样例 ---------- */

.pc-details {
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.pc-details summary {
  cursor: pointer;
  user-select: none;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--primary);
  transition: color var(--tr-fast);
}

.pc-details summary:hover { color: var(--primary-deep); }

.pc-details summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

.pc-details[open] summary { border-bottom: 1px dashed var(--line); }

/* 产出样例：虚线边 = 示意数据，与工具占位卡同一「非正式」视觉语言 */
.pc-details-sample {
  background: var(--surface-2);
  border-style: dashed;
}

.pc-details-sample summary { color: var(--text-2); }

.pc-details-sample summary:hover { color: var(--text); }

.pc-pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: inherit;
  font-size: var(--fs-sm);
  line-height: 1.85;
  color: var(--text-2);
  padding: 14px 16px;
  margin: 0;
}

/* ---------- 技能卡：安装步骤 ---------- */

.pc-steps {
  margin: 12px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  font-size: var(--fs-sm);
  color: var(--text-2);
  line-height: 1.7;
}

/* ---------- 技能装配说明：全站唯一一份（数据在 prompt-skills-data.js） ---------- */

.pc-howto {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin: 20px 0 32px;
}

.pc-howto-lead { margin: 0; }

/* 容器 gap 已管间距，抵掉 pc-details 自带的卡片内 margin */
.pc-howto .pc-details { margin-top: 0; }

.pc-howto-body { padding: 4px 16px 14px; }

.pc-howto-body .pc-steps { margin-top: 10px; }

.pc-howto-tip {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--text-3);
  line-height: 1.7;
}

/* ---------- FAQ ---------- */

.pc-faq { display: grid; gap: 12px; max-width: 860px; }

.pc-faq-item {
  padding: 16px 20px;
  background: var(--bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
}

.pc-faq-item summary {
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--text);
}

.pc-faq-item summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}

.pc-faq-item p {
  margin-top: 10px;
  font-size: var(--fs-md);
  color: var(--text-2);
  line-height: 1.8;
}

/* ---------- 响应式 ---------- */

@media (max-width: 720px) {
  .pc-stats { gap: 24px; }
  .pc-card { padding: 20px 18px; }
  .pc-card-head { flex-direction: column; gap: 10px; }
  .pc-card-tools { width: 100%; justify-content: flex-start; }
}

/* ---------- 一人项目提示词库（solo-prompts.html）追加组件 ---------- */

/* 时机行：标题下的「什么时候跑」，弱化呈现 */
.pc-card-when {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: 8px;
}

/* 心法折叠：内文是段落不是代码块，行高放宽 */
.pc-details-why p {
  padding: 14px 16px;
  font-size: var(--fs-md);
  color: var(--text-2);
  line-height: 1.8;
}

/* 组合技卡：无复制钮与折叠，纯说明 */
.pc-card-combo h3 { margin-bottom: 8px; }
.pc-card-combo .pc-card-desc { margin-bottom: 0; }

/* 卡内站内链接：时机行弱色可读性不够，链接用主色加强可点感 */
.pc-card-link a {
  color: var(--primary);
  font-weight: 600;
}
.pc-card-link a:hover { color: var(--primary-deep); }

/* ---------- 组合路线（research-prompts.html 组合路线章，渲染在 prompt-course.js） ---------- */

/* 路线列表：单列纵向排布——路线卡内是步骤链，双列网格会把长链压扁 */
.pc-routes { display: flex; flex-direction: column; gap: 20px; }

/* .card 基类不带内边距，路线卡与 pc-card 同规格（覆写须与桌面规则同段，
   放进上方 720px 媒体查询会被本段更靠后的同名规则压掉） */
.pc-route { padding: 24px 26px; }
@media (max-width: 720px) {
  .pc-route { padding: 20px 18px; }
}

/* 什么时候走这条线：弱化呈现，同 solo 课时机行 */
.pc-route-when {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-bottom: 14px;
}

.pc-route-steps { list-style: none; margin: 0; padding: 0; }
.pc-route-step {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px dashed var(--line-soft);
}
.pc-route-step:first-child { border-top: none; padding-top: 0; }

.pc-route-no {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-deep);
  font-size: var(--fs-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.pc-route-body { display: flex; flex-direction: column; gap: 2px; }
.pc-route-body a { color: var(--text); font-weight: 600; transition: color var(--tr-fast); }
.pc-route-body a:hover { color: var(--primary); }
.pc-route-note { font-size: var(--fs-sm); color: var(--text-3); line-height: 1.7; }

/* 步骤锚点跳转落点：吸顶目录会盖住卡片头，留出偏移 */
.pc-card { scroll-margin-top: 96px; }