/* ===================================================================
   乾道 · 详情页共享组件  (qiandao-courages / powers / ways 三页共用)
   依赖 site.css 的设计 token（--bg / --gold / --ink / --space-* 等）
   =================================================================== */

/* ---------- 页首 header ---------- */
.qd-header {
  position: relative;
  padding: calc(var(--space-8) + 24px) 0 var(--space-6);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.qd-header-glyph {
  position: absolute; top: 50%; right: 4vw; transform: translateY(-46%);
  font-family: var(--serif-display-cn), var(--serif-cn);
  font-size: clamp(160px, 26vw, 360px); line-height: 1;
  color: var(--gold); opacity: .05; pointer-events: none; user-select: none;
}
.qd-back {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--space-5);
  font-family: var(--serif-cn); font-size: 13px; letter-spacing: .14em; color: var(--ink-dim);
  transition: color 280ms ease;
}
.qd-back::before { content: '←'; font-family: var(--serif-en); color: var(--gold); transition: transform 280ms ease; }
.qd-back:hover { color: var(--gold-bright); }
.qd-back:hover::before { transform: translateX(-4px); }
.qd-header-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--space-3);
}
.qd-header-title {
  font-family: var(--serif-display-cn), var(--serif-cn);
  font-size: clamp(40px, 7vw, 78px); letter-spacing: .14em; color: var(--ink); line-height: 1.1;
  margin-bottom: 12px;
  white-space: nowrap;   /* 详情页主标题强制一行 */
}
.qd-header-en {
  font-family: var(--serif-en); font-style: italic; font-size: clamp(16px, 2vw, 22px);
  color: var(--ink-dim); letter-spacing: .04em; margin-bottom: var(--space-4);
}
.qd-header-intro {
  font-family: var(--serif-cn); font-size: 16px; line-height: 2; color: var(--ink-dim);
  max-width: 680px; letter-spacing: .02em;
}
.qd-header-intro strong { color: var(--ink); font-weight: 500; }
.qd-header-intro em { font-style: normal; color: var(--gold-bright); }

/* ---------- 节点 node (1.1 / 2.1 …) ---------- */
.qd-node { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.qd-node:first-of-type { border-top: none; }
.qd-node-head { display: grid; grid-template-columns: 92px 1fr; gap: var(--space-5); align-items: start; }
@media (max-width: 768px) { .qd-node-head { grid-template-columns: 1fr; gap: var(--space-3); } }
/* 移动端横溢防护：grid 子项默认 min-width:auto，宽内容(表格/长串)会撑破轨道→整页横滚。
   置 min-width:0 让轨道可收缩、宽内容在自身 overflow 容器内滚动。覆盖全部详情页（天道+乾道）。 */
.qd-node-head > * { min-width: 0; }
.qd-node-num {
  font-family: var(--mono); font-size: 13px; color: var(--gold); letter-spacing: .2em;
  border-right: 1px solid var(--line); padding-right: var(--space-3); text-align: center; padding-top: 8px;
}
@media (max-width: 768px) {
  .qd-node-num { border-right: none; border-bottom: 1px solid var(--line); padding: 0 0 var(--space-3); text-align: left; }
}
.qd-node-title {
  font-family: var(--serif-cn); font-size: clamp(26px, 3.4vw, 34px); letter-spacing: .2em;
  color: var(--ink); margin-bottom: var(--space-2);
}
.qd-node-en { font-family: var(--serif-en); font-style: italic; font-size: 16px; color: var(--ink-faint); letter-spacing: .04em; margin-bottom: var(--space-4); }
.qd-node-claim {
  font-family: var(--serif-cn); font-size: clamp(19px, 2.4vw, 24px); line-height: 1.7;
  color: var(--gold-bright); letter-spacing: .03em; max-width: 760px;
  padding-left: 18px; border-left: 2px solid var(--gold); margin-bottom: var(--space-5);
}

/* ---------- 正文 prose ---------- */
.qd-prose { max-width: 720px; }
.qd-prose p {
  font-family: var(--serif-cn); font-size: 16px; line-height: 2.05; color: var(--ink-dim);
  letter-spacing: .015em; margin-bottom: var(--space-4);
}
.qd-prose p:last-child { margin-bottom: 0; }
.qd-prose strong { color: var(--ink); font-weight: 500; }
.qd-prose em { font-style: normal; color: var(--gold-bright); }
.qd-prose .ref { color: var(--ink-faint); font-size: .92em; }

/* ---------- 叶子 leaf (节点内的子目：沉/跳/刀 · 聚/识/用 …) ---------- */
.qd-leaves { margin-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.qd-leaf {
  background: var(--bg-card); border: 1px solid var(--line); border-left: 2px solid var(--gold-deep);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  transition: border-color 360ms ease;
}
.qd-leaf:hover { border-left-color: var(--gold); }
.qd-leaf-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 10px;
}
.qd-leaf-title {
  font-family: var(--serif-cn); font-size: 19px; letter-spacing: .1em; color: var(--ink);
  margin-bottom: var(--space-3);
}
.qd-leaf-title .dash { color: var(--gold-bright); font-size: .8em; letter-spacing: .04em; margin-left: 10px; }
.qd-leaf .qd-prose p { font-size: 15px; line-height: 1.95; }

/* ---------- 典范 exemplar ---------- */
.qd-exemplar {
  display: inline-flex; align-items: baseline; gap: 12px; margin: var(--space-4) 0 var(--space-2);
  padding: 10px 18px; border: 1px solid var(--line-bright); background: rgba(200, 150, 74, .04);
}
.qd-exemplar-k { font-family: var(--mono); font-size: 9px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.qd-exemplar-name { font-family: var(--serif-display-cn), var(--serif-cn); font-size: 18px; letter-spacing: .18em; color: var(--ink); }

/* ---------- 金句 pull-quote ---------- */
.qd-pull { margin: var(--space-6) 0; text-align: center; }
.qd-pull-mark { font-family: var(--serif-en); font-size: 40px; color: var(--gold); opacity: .5; line-height: .6; }
.qd-pull-text {
  font-family: var(--serif-display-cn), var(--serif-cn); font-style: normal;
  font-size: clamp(20px, 2.8vw, 28px); line-height: 1.6; color: var(--ink);
  letter-spacing: .04em; max-width: 760px; margin: var(--space-3) auto;
}
.qd-pull-src { font-family: var(--serif-en); font-style: italic; font-size: 14px; color: var(--ink-faint); letter-spacing: .06em; }

/* ---------- 作者第一人称 · voice ---------- */
.qd-voice {
  position: relative; max-width: 720px; margin: var(--space-5) 0;
  padding: var(--space-4) var(--space-5); background: var(--bg-mid);
  border: 1px solid var(--gold-faint); border-radius: 1px;
}
.qd-voice::before {
  content: '我 的 判 断'; position: absolute; top: -10px; left: 18px; padding: 0 10px; background: var(--bg);
  font-family: var(--mono); font-size: 9px; letter-spacing: .34em; color: var(--gold);
}
.qd-voice p { font-family: var(--serif-cn); font-size: 16px; line-height: 2; color: var(--ink); letter-spacing: .02em; margin: 0; }
.qd-voice strong { color: var(--gold-bright); font-weight: 500; }

/* ---------- 模型卡 · model（把原创框架显性立成「工具/图」，案例退为注脚）---------- */
.qd-model {
  max-width: 720px; margin: var(--space-2) 0 var(--space-5);
  border: 1px solid var(--gold-faint);
  background: linear-gradient(180deg, rgba(200, 150, 74, .06), rgba(200, 150, 74, .015));
  padding: var(--space-4) var(--space-5);
}
.qd-model-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 12px;
}
.qd-model-name {
  font-family: var(--serif-display-cn), var(--serif-cn); font-size: 22px; letter-spacing: .12em;
  color: var(--gold-bright); margin-bottom: var(--space-3); line-height: 1.4;
}
.qd-model-parts { display: flex; flex-direction: column; gap: 11px; }
.qd-model-part {
  font-family: var(--serif-cn); font-size: 15px; line-height: 1.72; color: var(--ink-dim);
  letter-spacing: .02em; padding-left: 15px; border-left: 2px solid var(--gold-deep);
}
.qd-model-part b { color: var(--ink); font-weight: 500; margin-right: 9px; letter-spacing: .04em; }
.qd-model-note {
  margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--gold-faint);
  font-family: var(--serif-cn); font-size: 13.5px; line-height: 1.7; color: var(--ink-faint); letter-spacing: .02em;
}

/* ---------- 留白 · 大白话停顿（降密度，给节奏一口气）---------- */
.qd-breath {
  max-width: 600px; margin: var(--space-5) 0;
  font-family: var(--serif-cn); font-size: 17.5px; line-height: 1.9; color: var(--ink);
  letter-spacing: .03em;
}

/* ---------- 怎么练 · practice（每个主节点一处，兑现「实践主义」）---------- */
.qd-drill {
  max-width: 720px; margin: var(--space-5) 0; padding: var(--space-4) var(--space-5);
  border: 1px solid var(--line-bright); border-left: 3px solid var(--gold); background: var(--bg-mid);
}
.qd-drill-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .32em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 11px;
}
.qd-drill-body p {
  font-family: var(--serif-cn); font-size: 15px; line-height: 1.95; color: var(--ink); letter-spacing: .02em; margin: 0 0 8px;
}
.qd-drill-body p:last-child { margin-bottom: 0; }
.qd-drill-body b { color: var(--gold-bright); font-weight: 600; margin: 0 2px; }

/* ---------- 更多案例 · 折叠 details（主节点留一案，其余就地展开）---------- */
.qd-more {
  max-width: 720px; margin: var(--space-4) 0; border: 1px solid var(--line); background: var(--bg-card);
}
.qd-more > summary {
  list-style: none; cursor: pointer; padding: 13px var(--space-4);
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; transition: background 240ms ease;
}
.qd-more > summary::-webkit-details-marker { display: none; }
.qd-more > summary::before {
  content: '＋'; font-family: var(--serif-en); color: var(--gold); font-size: 15px; line-height: 1.4; flex-shrink: 0;
}
.qd-more[open] > summary::before { content: '－'; }
.qd-more > summary:hover { background: rgba(200, 150, 74, .05); }
.qd-more > summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.qd-more-k { font-family: var(--mono); font-size: 10px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); flex-shrink: 0; }
.qd-more-list { font-family: var(--serif-cn); font-size: 14px; color: var(--ink-faint); letter-spacing: .04em; }
.qd-more-body { padding: 0 var(--space-4) var(--space-4); border-top: 1px solid var(--line); }
.qd-more-body p {
  font-family: var(--serif-cn); font-size: 14.5px; line-height: 1.92; color: var(--ink-dim); letter-spacing: .015em; margin-top: var(--space-4);
}
.qd-more-body p b, .qd-more-body p strong { color: var(--ink); font-weight: 500; }
.qd-more-body em { font-style: normal; color: var(--gold-bright); }

/* ---------- 代价 / 反面 · 思想诚实（每篇一处，winners-only 的解药）---------- */
.qd-cost {
  max-width: 760px; margin: 0 auto; padding: var(--space-5);
  border: 1px solid var(--line-bright); background: var(--bg-elevated);
}
.qd-cost-k {
  font-family: var(--mono); font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 12px;
}
.qd-cost-title {
  font-family: var(--serif-display-cn), var(--serif-cn); font-size: 21px; letter-spacing: .08em;
  color: var(--ink); margin-bottom: var(--space-3); line-height: 1.45;
}
.qd-cost-body p {
  font-family: var(--serif-cn); font-size: 15.5px; line-height: 2; color: var(--ink-dim); letter-spacing: .015em; margin-bottom: var(--space-3);
}
.qd-cost-body p:last-child { margin-bottom: 0; }
.qd-cost-body strong { color: var(--ink); font-weight: 500; }
.qd-cost-body em { font-style: normal; color: var(--gold-bright); }

/* ---------- 节末小结 / coda ---------- */
.qd-coda {
  font-family: var(--serif-cn); font-size: 17px; line-height: 1.9; color: var(--ink);
  letter-spacing: .04em; text-align: center; max-width: 680px; margin: var(--space-6) auto 0;
}
.qd-coda em { font-style: normal; color: var(--gold-bright); }

/* ---------- 页末导航 prev / overview / next ---------- */
.qd-foot { padding: var(--space-7) 0; border-top: 1px solid var(--line); }
.qd-foot-grid { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.qd-foot-link { font-family: var(--serif-cn); font-size: 14px; letter-spacing: .1em; color: var(--ink-dim); transition: color 280ms ease; }
.qd-foot-link:hover { color: var(--gold-bright); }
.qd-foot-link .lbl { display: block; font-family: var(--mono); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.qd-foot-home { font-family: var(--serif-cn); font-size: 13px; letter-spacing: .16em; color: var(--ink-faint); }
.qd-foot-home:hover { color: var(--gold); }
@media (max-width: 640px) { .qd-foot-grid { flex-direction: column; align-items: flex-start; gap: var(--space-3); } }