/* ===================================================================
   创造法则 · 详情页 + 深度查证页 共享组件 (cr-*)
   依赖 site.css 设计 token；与 qiandao-detail.css 的 qd-* 协同
   =================================================================== */

/* ---------- 本页导航 · cr-nav ---------- */
.cr-nav {
  display: flex; flex-wrap: wrap; gap: 9px 20px; align-items: baseline; justify-content: center;
  padding: var(--space-4) 0; border-bottom: 1px solid var(--line); margin-bottom: var(--space-4);
}
.cr-nav .cr-nav-k { font-family: var(--mono); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-right: 4px; }
.cr-nav a { font-family: var(--serif-cn); font-size: 14px; letter-spacing: .1em; color: var(--ink-dim); transition: color .25s ease; }
.cr-nav a:hover { color: var(--gold-bright); }
.cr-nav a.to-notes { color: var(--gold); }
.cr-nav a.to-notes::after { content: ' →'; color: var(--gold-deep); }

/* ---------- 立场 callout · cr-stance ---------- */
.cr-stance {
  background: var(--bg-mid); border: 1px solid var(--gold-faint); padding: var(--space-4) var(--space-5);
  margin: var(--space-4) 0; max-width: 760px;
}
.cr-stance-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.cr-stance p { font-family: var(--serif-cn); font-size: 15px; line-height: 1.95; color: var(--ink-dim); margin-bottom: var(--space-3); letter-spacing: .015em; }
.cr-stance p:last-child { margin-bottom: 0; }
.cr-stance strong { color: var(--ink); font-weight: 500; }
.cr-stance em { font-style: normal; color: var(--gold-bright); }

/* ---------- 子标题 · cr-subhead ---------- */
.cr-subhead { font-family: var(--mono); font-size: 10.5px; letter-spacing: .34em; text-transform: uppercase; color: var(--gold); margin: var(--space-5) 0 var(--space-2); padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.cr-subhead span { color: var(--ink-faint); }

/* ---------- 硬边界三柱 · cr-pillars ---------- */
.cr-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 820px) { .cr-pillars { grid-template-columns: 1fr; } }
.cr-pillar { background: var(--bg-elevated); border: 1px solid var(--line-bright); border-left: 2px solid var(--gold-deep); padding: var(--space-4); }
.cr-pillar-k { font-family: var(--mono); font-size: 9px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 9px; }
.cr-pillar-t { font-family: var(--serif-cn); font-size: 16px; color: var(--ink); letter-spacing: .04em; margin-bottom: 9px; }
.cr-pillar p { font-family: var(--serif-cn); font-size: 13px; line-height: 1.85; color: var(--ink-dim); letter-spacing: .01em; }
.cr-pillar p b { color: var(--gold-bright); font-weight: 400; }

/* ---------- 可折叠依据脚注 · cr-cite ---------- */
.cr-cite { margin: var(--space-4) 0 0; border-top: 1px solid var(--line); max-width: 760px; }
.cr-cite > summary { list-style: none; cursor: pointer; padding: 11px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-deep); display: flex; align-items: center; gap: 9px; transition: color .2s ease; }
.cr-cite > summary::-webkit-details-marker { display: none; }
.cr-cite > summary::before { content: '＋'; font-family: var(--serif-en); color: var(--gold); font-size: 13px; }
.cr-cite[open] > summary::before { content: '－'; }
.cr-cite > summary:hover { color: var(--gold); }
.cr-cite > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.cr-cite-body { font-family: var(--serif-cn); font-size: 12.5px; line-height: 1.9; color: var(--ink-faint); letter-spacing: .015em; padding: 0 0 14px; }
.cr-cite-body b { color: var(--ink-dim); font-weight: 400; }

/* ---------- 行内小注 · cr-note ---------- */
.cr-note { font-family: var(--serif-cn); font-size: 12.5px; line-height: 1.78; color: var(--ink-faint); letter-spacing: .015em; border-left: 1px solid var(--line-bright); padding: 2px 0 2px 14px; margin-top: var(--space-4); max-width: 760px; }
.cr-note b { color: var(--ink-dim); font-weight: 400; }

/* ---------- 表格 · cr-table ---------- */
.cr-table-wrap { overflow-x: auto; margin: var(--space-4) 0; }
.cr-table { width: 100%; border-collapse: collapse; font-family: var(--serif-cn); min-width: 560px; }
.cr-table th, .cr-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.7; vertical-align: top; }
.cr-table th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); border-bottom-color: var(--line-bright); }
.cr-table td:first-child { color: var(--ink); font-size: 13.5px; }
.cr-table td { color: var(--ink-dim); }
.cr-table td b { color: var(--gold-bright); font-weight: 400; }
.cr-table td em { font-style: normal; color: var(--ink); }
.cr-table .verdict { color: var(--gold-bright); white-space: nowrap; }

/* ---------- 目标卡（财富/关系/事业）· cr-targets ---------- */
.cr-targets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin: var(--space-4) 0; }
@media (max-width: 820px) { .cr-targets { grid-template-columns: 1fr; } }
.cr-target { background: var(--bg-card); border: 1px solid var(--line); border-top: 2px solid var(--gold-deep); padding: var(--space-4); display: flex; flex-direction: column; }
.cr-target-k { font-family: var(--serif-display-cn), var(--serif-cn); font-size: 20px; letter-spacing: .14em; color: var(--gold-bright); margin-bottom: 4px; }
.cr-target-main { font-family: var(--mono); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 12px; }
.cr-target p { font-family: var(--serif-cn); font-size: 13px; line-height: 1.9; color: var(--ink-dim); margin-bottom: 8px; }
.cr-target .rewrite { color: var(--ink); border-top: 1px dashed var(--line); padding-top: 10px; margin-top: auto; }
.cr-target .rewrite b { color: var(--gold-bright); font-weight: 500; }

/* ---------- 案例按径归位 · cr-cases ---------- */
.cr-cases { margin: var(--space-3) 0; }
.cr-case-grp { margin-bottom: var(--space-4); }
.cr-case-grp-k { font-family: var(--serif-cn); font-size: 15px; letter-spacing: .1em; color: var(--gold); margin-bottom: 10px; }
.cr-case-grp ul { list-style: none; }
.cr-case-grp li { font-family: var(--serif-cn); font-size: 14px; line-height: 1.95; color: var(--ink-dim); margin-bottom: 6px; padding-left: 18px; position: relative; }
.cr-case-grp li::before { content: '—'; position: absolute; left: 0; color: var(--gold-deep); }
.cr-case-grp li b { color: var(--ink); font-weight: 500; }
.cr-case-grp li em { font-style: normal; color: var(--gold-bright); }

/* ---------- 压舱石 · cr-bedrock ---------- */
.cr-bedrock { background: var(--bg-mid); border: 1px solid var(--gold-faint); padding: var(--space-4) var(--space-5); margin: var(--space-5) 0 0; }
.cr-bedrock .cr-case-grp-k { color: var(--gold-bright); }
.cr-bedrock p { font-family: var(--serif-cn); font-size: 14px; line-height: 1.95; color: var(--ink-dim); margin-top: 10px; }
.cr-bedrock p b { color: var(--ink); font-weight: 500; }

/* ---------- 注疏入口 · cr-gate（低调补漏小入口·细长药丸）---------- */
.cr-gate {
  display: flex; align-items: center; gap: 14px;
  width: fit-content; max-width: 100%;
  margin: var(--space-5) auto 0; padding: 8px 8px 8px 22px;
  border: 1px solid var(--gold-faint); border-radius: 999px;
  background: transparent;
  transition: border-color .3s ease, background .3s ease;
}
.cr-gate:hover { border-color: var(--gold); background: rgba(200,150,74,.05); }
.cr-gate-l { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cr-gate-l .cr-gate-k { font-family: var(--mono); font-size: 8.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); }
.cr-gate-l .cr-gate-t { font-family: var(--serif-cn); font-size: 13.5px; color: var(--ink); letter-spacing: .05em; }
.cr-gate-l .cr-gate-d { font-family: var(--serif-cn); font-size: 11px; color: var(--ink-faint); letter-spacing: .02em; }
.cr-gate-go {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(200,150,74,.08); color: var(--gold);
  font-family: var(--serif-en); font-size: 14px; line-height: 1;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}
.cr-gate:hover .cr-gate-go { background: var(--gold); color: var(--bg); transform: translateX(2px); }

/* ---------- 移动端横向溢出修复（创造/天道详情页的宽表格）----------
   宽表格(cr-table)在窄屏需能在自身 wrap 内横向滚动，而非顶破布局。
   配合 qiandao-detail.css 里 `.qd-node-head>*{min-width:0}`（让 grid 轨道可收缩）一起生效。 */
.cr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }