/* ============================================================
   BaguaChart — Article legacy component layer
   旧文章页组件兼容层（2026-09-15 建立）

   背景：30 篇文章页原本各带 5–6KB 内联 <style>，里面定义了 85 个
   一次性组件类（五行卡 / 生肖卡 / 天干卡 / 十神卡 / 卦线 / 时间轴 …）。
   杂志化改造时把内联样式整体丢弃、统一走 article.css，但**没有改这些
   组件的 DOM 结构** —— 本文件就是它们的唯一样式来源。

   规则：
     1. 只使用 article.css 的 token，不新增色值
     2. 出血块（.card-band / .chart-box / .trigram-grid …）的文字
        必须落在 186 基线 → 内边距一律 calc(var(--wrap-pad) - 1px)
     3. 卡片里的成段文字限宽到 --col-text，右半边留白
     4. 正文里的面板（.concept-box / .dm …）按 .callout 规格做
   ============================================================ */

/* ---------- 1. 卡带：连续同级卡片收拢成的出血条 ---------- */
.card-band {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin: 46px 0 12px;
}
/* 卡片本体：出血全宽的面板，文字固定在左 680、右侧留白 */
.card-band > .element-card,
.card-band > .stem-card,
.card-band > .god-card,
.card-band > .info-card,
.card-band > .match-card,
.card-band > .zodiac-card,
.card-band > .animal-card,
.card-band > .phase-card,
.card-band > .step-card,
.card-band > .pillar-card,
.card-band > .wealth-card {
  position: relative;
  padding: 28px calc(var(--wrap-pad) - 1px) 30px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(201, 160, 80, .05), rgba(20, 16, 12, .62));
}
/* 细金线在卡片左缘亮起（原 .element-card::before 的统一化） */
.card-band > *::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity: .35;
  border-radius: 12px 0 0 12px;
}
.card-band > * > * { max-width: var(--col-text); }

/* 卡片标题：衬线、金白，内部可挂 CJK 大字或角标 */
.element-card h3,
.stem-card h3,
.god-card h3,
.info-card h3,
.match-card h3,
.zodiac-card h3,
.animal-card h3,
.phase-card h3,
.step-card h3,
.pillar-card h3,
.wealth-card h3,
.trigram-card h3,
.compare-card h3,
.concept-card h3,
.concept-box h3,
.cycle-box h3,
.derive-box h3,
.chart-box h3,
.timeline-box h3 {
  font-family: var(--ff-serif);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--gold-pale);
  margin: 0 0 12px;
}
.card-band > * h3 { font-size: 23px; }

/* 卡片正文 */
.card-band > * > p,
.card-band > * > ul,
.card-band > * > ol,
.trigram-card p,
.compare-card p,
.concept-card p,
.concept-box p,
.cycle-box p,
.derive-box p,
.pillar-card p,
.match-card p {
  font-size: 15.5px;
  line-height: 1.78;
  margin-bottom: .9em;
}
.card-band > * > ul,
.card-band > * > ol,
.concept-box ul,
.cycle-box ul,
.derive-box ul,
.wealth-card ul {
  margin: 0 0 1em 1.1em;
}
.card-band > * > ul > li,
.card-band > * > ol > li,
.concept-box li,
.cycle-box li,
.derive-box li,
.wealth-card li {
  margin-bottom: .42em;
  line-height: 1.7;
}
.card-band > * > *:last-child,
.concept-box > *:last-child,
.cycle-box > *:last-child,
.derive-box > *:last-child { margin-bottom: 0; }

/* ---------- 2. 网格卡（出血 3–4 列） ---------- */
.trigram-grid,
.compare-grid {
  display: grid;
  gap: 16px;
  padding: 0 calc(var(--wrap-pad) - 1px);
  margin: 46px 0 12px;
}
.trigram-grid { grid-template-columns: repeat(auto-fit, minmax(224px, 1fr)); }
.compare-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.trigram-card,
.compare-card {
  position: relative;
  padding: 22px 20px 24px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: rgba(26, 21, 16, .5);
  transition: border-color .25s, background .25s;
}
.trigram-card:hover { border-color: var(--border-gold); background: rgba(36, 30, 23, .62); }
.trigram-card h3 { margin-bottom: 8px; font-size: 20px; }
.trigram-card .symbol {
  display: block;
  font-size: 30px;
  line-height: 1;
  color: var(--gold-bright);
  margin-bottom: 8px;
}
.trigram-card .chinese {
  font-family: 'SerifTC', 'Songti TC', 'STSongti-TC', serif;
  font-size: 22px;
  color: var(--gold-pale);
  margin-left: 6px;
}
.trigram-card .name { font-size: 20px; color: var(--gold-pale); }
.trigram-card .desc { font-size: 14px; line-height: 1.7; color: var(--muted); margin-top: 6px; }

.compare-card .label {
  display: block;
  font-family: var(--ff-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 8px;
}
.compare-card .title { font-size: 20px; color: var(--gold-pale); margin-bottom: 10px; }
.compare-card .desc { font-size: 14.5px; line-height: 1.75; color: var(--muted); }
.compare-card.east { border-left: 2px solid var(--jade); }
.compare-card.west { border-left: 2px solid var(--sky); }
.compare-card.east .title { color: var(--jade); }
.compare-card.west .title { color: var(--sky); }

/* ---------- 3. 行式数据版（出血全宽） ---------- */
.chart-box,
.timeline-box,
.pillar-diagram,
.element-wheel {
  margin: 46px 0 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(26, 21, 16, .5);
}

.chart-row,
.timeline-row {
  display: grid;
  grid-template-columns: 96px 54px 54px minmax(0, 1fr);
  column-gap: 18px;
  align-items: baseline;
  padding: 15px calc(var(--wrap-pad) - 1px);
  border-bottom: 1px solid var(--border);
}
.chart-row:last-child,
.timeline-row:last-child,
.element-row:last-child { border-bottom: 0; }
.chart-row:nth-child(even),
.timeline-row:nth-child(even) { background: rgba(201, 160, 80, .028); }

.chart-label,
.timeline-age {
  font-family: var(--ff-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}
.chart-stem, .chart-branch,
.timeline-stem, .timeline-branch {
  font-family: 'SerifTC', 'Songti TC', 'STSongti-TC', 'PMingLiU', serif;
  font-size: 23px;
  line-height: 1.2;
  color: var(--gold-pale);
  text-align: center;
}
.chart-theme,
.timeline-theme { font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* 五行相克链：元素 —箭头→ 元素 */
.element-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 148px minmax(0, 1fr);
  align-items: baseline;
  column-gap: 14px;
  padding: 13px calc(var(--wrap-pad) - 1px);
  border-bottom: 1px solid var(--border);
}
.element-box {
  font-size: 15.5px;
  color: var(--gold-pale);
}
.element-row .element-box:first-child { text-align: right; }
.element-row .element-box:last-child { text-align: left; }
.element-arrow {
  font-family: var(--ff-ui);
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}

/* 四柱图（年/月/日/时 四列） */
.pillar-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  padding: 20px calc(var(--wrap-pad) - 1px);
}
.pillar-col { text-align: center; }
.pillar-col .label {
  display: block;
  font-family: var(--ff-ui);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.pillar-col .stem,
.pillar-col .branch {
  display: block;
  font-family: 'SerifTC', 'Songti TC', 'STSongti-TC', serif;
  font-size: 27px;
  line-height: 1.25;
  color: var(--gold-pale);
}
.pillar-col .branch { color: var(--gold); opacity: .8; }
.pillar-col .name { display: block; font-size: 13.5px; color: var(--muted); margin-top: 8px; }
.pillar-col.highlight .stem { color: var(--gold-bright); }
.pillar-col.highlight .branch { color: var(--gold-bright); opacity: 1; }

/* ---------- 4. 角标 / 标签 / 色块 ---------- */
.element-tag,
.tag,
.pill,
.trait-tag,
.wealth-tag,
.polarity,
.role,
.step-num,
.phase-num,
.pillar-num,
.wealth-label,
.card-head {
  display: inline-block;
  padding: 3px 9px 2px;
  margin: 0 6px 6px 0;
  font-family: var(--ff-ui);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid rgba(201, 160, 80, .3);
  border-radius: 3px;
  background: rgba(201, 160, 80, .06);
  vertical-align: middle;
}
/* 卡片顶部的小序号（STEP 1 / 02 …）：不描边，纯字距 */
.step-num,
.phase-num,
.pillar-num {
  display: block;
  margin: 0 0 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--dim);
  letter-spacing: .24em;
}
/* 卡片标题右侧的角色标签 */
.god-card h3 .role,
.stem-card h3 .polarity,
.match-card h3 .tag { margin-left: 10px; }
.god-card .role { color: var(--jade); border-color: rgba(134, 181, 150, .35); }

.traits { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.traits span { margin: 0; }
.years {
  font-family: var(--ff-ui);
  font-size: 12px;
  letter-spacing: .04em;
  color: var(--dim);
  margin-bottom: 12px;
}
.card-head { color: var(--gold-bright); }
.animal-cn,
.cn-char {
  font-family: 'SerifTC', 'Songti TC', 'STSongti-TC', 'PMingLiU', serif;
  font-size: 24px;
  line-height: 1;
  color: var(--gold-bright);
  margin-right: 10px;
}
.swatch {
  display: inline-block;
  width: 13px;
  height: 13px;
  border-radius: 3px;
  margin-right: 9px;
  vertical-align: -1px;
  border: 1px solid rgba(0, 0, 0, .45);
}
.favorable { color: var(--jade); }
.unfavorable { color: var(--cinnabar); }
.harmony { color: var(--jade); border-color: rgba(134, 181, 150, .35); }
.clash { color: var(--cinnabar); border-color: rgba(184, 73, 58, .4); }
.element-label { color: var(--gold-pale); }

/* 表格内的吉凶底色（生肖配对表） */
td.match-good, td.match-caution, td.match-clash { font-weight: 600; }
td.match-good { color: var(--jade); }
td.match-caution { color: var(--earth); }
td.match-clash { color: var(--cinnabar); }

/* ---------- 5. 六爻卦线 ---------- */
.hex-visual {
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: 88px;
  margin: 34px 0 36px;
}
.hex-visual .line,
.hex-visual .broken {
  height: 7px;
  border-radius: 1px;
}
.hex-visual .line { background: var(--gold); }
.hex-visual .broken { position: relative; background: transparent; }
.hex-visual .broken::before,
.hex-visual .broken::after {
  content: '';
  position: absolute;
  top: 0;
  height: 100%;
  width: 41%;
  background: var(--gold);
  border-radius: 1px;
}
.hex-visual .broken::before { left: 0; }
.hex-visual .broken::after { right: 0; }

/* 64 卦表里的卦符 —— 原方案是 Unicode 卦符（䷀ 区段 U+4DC0–U+4DFF），
   但该区段的字体覆盖跨平台完全不可控：macOS 的 Apple Symbols 不含它，
   无头 Chromium 实测渲染成豆腐块，Windows / Android 视 ROM 而异。
   六十四卦表是这个页面最核心的内容，不能赌读者的字体 →
   改由 tools/mag_hexagrams.py 出内联 SVG，六条线自绘，任何平台都一致。
   这里的 .hex 只是那个 SVG 的尺寸容器。 */
.hex {
  display: inline-block;
  width: 18px;
  height: 26px;
  margin-right: 9px;
  vertical-align: -5px;
  color: var(--gold-bright);
}
.hex svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* 六条线共用一条 path（见 tools/mag_hexagrams.py 的 mini），颜色走 currentColor */
.hex svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;      /* viewBox 高 26，渲染 26px 时正好 2px 粗 */
  stroke-linecap: butt;
}

/* ---------- 6. 正文里的小部件 ---------- */
/* 提示面板（原 .concept-box / .cycle-box / .derive-box / .concept-card） */
.concept-box,
.cycle-box,
.derive-box,
.concept-card {
  border: 1px solid var(--hair);
  border-left: 3px solid var(--border-gold);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 34px 0;
  background: linear-gradient(180deg, rgba(201, 160, 80, .06), rgba(20, 16, 12, .66));
  max-width: var(--col-text);
}
/* 单张信息卡留在正文里（未构成连续卡片时的退化情形） */
.info-card,
.match-card {
  border: 1px solid var(--hair);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 30px 0;
  background: rgba(26, 21, 16, .5);
  max-width: var(--col-text);
}

/* 日主提示框 */
.dm {
  border: 1px solid var(--hair);
  border-left: 3px solid var(--gold);
  border-radius: 8px;
  padding: 20px 22px;
  margin: 32px 0;
  background: linear-gradient(180deg, rgba(201, 160, 80, .07), rgba(20, 16, 12, .62));
  max-width: var(--col-text);
}
.dm strong { color: var(--gold-bright); }

/* 导语段（部分页用 .lede 代替 .standfirst） */
.prose > p.lede {
  font-size: 19px;
  line-height: 1.72;
  color: #e3d8c1;
}
.highlight {
  background: rgba(201, 160, 80, .1);
  padding: 1px 6px;
  border-radius: 3px;
  color: var(--gold-pale);
}
.disclaimer {
  font-size: 13px;
  line-height: 1.7;
  color: var(--dim);
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 32px;
  max-width: var(--col-text);
}

/* ---------- 7. 表格列宽：2–4 列等分（article.css 的 5 列比例只适合 5 列表） ---------- */
.table-box table.cols-2 th { width: 50%; }
.table-box table.cols-3 th { width: 33.3333%; }
.table-box table.cols-4 th { width: 25%; }

/* ---------- 8. 出血块内部的行内语气 ---------- */
.bleed strong { color: var(--gold-pale); font-weight: 600; }
.spread-main strong { color: var(--gold-pale); font-weight: 600; }
.spread-main em { font-style: italic; color: #e6dbc4; }
.spread-main :is(p, li, dd, .desc) a,
.bleed :is(p, li, td, .desc) a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 160, 80, .35);
}
.spread-main :is(p, li, dd, .desc) a:hover,
.bleed :is(p, li, td, .desc) a:hover { color: var(--gold-bright); border-bottom-color: var(--gold-bright); }

/* 五行文字色（出现在正文、表格、标签里） */
.wood { color: var(--wood); }
.fire { color: var(--fire); }
.earth { color: var(--earth); }
.metal { color: var(--metal); }
.water { color: var(--water); }
.element-tag.wood { color: var(--wood); border-color: rgba(134, 181, 150, .35); }
.element-tag.fire { color: var(--fire); border-color: rgba(212, 97, 79, .35); }
.element-tag.earth { color: var(--earth); border-color: rgba(200, 162, 78, .35); }
.element-tag.metal { color: var(--metal); border-color: rgba(222, 215, 199, .3); }
.element-tag.water { color: var(--water); border-color: rgba(116, 168, 190, .35); }

/* ---------- 9. 响应式 ---------- */
@media (max-width: 900px) {
  .card-band > * > * { max-width: none; }
  .chart-row, .timeline-row {
    grid-template-columns: 84px 44px 44px minmax(0, 1fr);
    column-gap: 12px;
  }
  .chart-stem, .chart-branch, .timeline-stem, .timeline-branch { font-size: 20px; }
  .concept-box, .cycle-box, .derive-box, .concept-card,
  .info-card, .match-card, .dm { max-width: none; }
}

@media (max-width: 700px) {
  .card-band { gap: 18px; }
  .card-band > .element-card,
  .card-band > .stem-card,
  .card-band > .god-card,
  .card-band > .info-card,
  .card-band > .match-card,
  .card-band > .zodiac-card,
  .card-band > .animal-card,
  .card-band > .phase-card,
  .card-band > .step-card,
  .card-band > .pillar-card,
  .card-band > .wealth-card { padding: 22px 18px 24px; }
  .card-band > * h3 { font-size: 20px; }
  /* 四列数据在窄屏压成两行：标签行 + 数值行 */
  .chart-row, .timeline-row {
    grid-template-columns: 46px 40px minmax(0, 1fr);
    row-gap: 4px;
  }
  .chart-theme, .timeline-theme { grid-column: 1 / -1; }
  .element-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .element-row .element-box:first-child,
  .element-row .element-box:last-child { text-align: left; }
  .element-arrow { text-align: left; }
  .pillar-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .trigram-grid, .compare-grid { grid-template-columns: minmax(0, 1fr); }
  .hex-visual { width: 76px; }
  .hex { width: 15px; height: 22px; margin-right: 7px; vertical-align: -4px; }
  .concept-box, .cycle-box, .derive-box, .concept-card { padding: 18px 18px; }
}