/**
 * 八字排盘页专用样式（/bazi/）
 * 公用控件、表格、五行徽章、条形图来自 style/chaxun.css，这里只补命盘特有的排版
 */

/* ---- 四柱命盘表 ---- */
.bz-pillar td {
  vertical-align: middle;
  line-height: 1.5;
}

/* 天干地支两个大字 */
.bz-gz {
  display: inline-block;
  min-width: 22px;
  margin-right: 2px;
  font-family: var(--font-display);
  font-size: 21px;
  letter-spacing: 0;
}

/* ---- 十神小签 ---- */
.bz-ss {
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.bz-ss--peer     { color: #2c6e52; } /* 同我：比肩、劫财 */
.bz-ss--child    { color: #8a6a2f; } /* 我生：食神、伤官 */
.bz-ss--wealth   { color: #b0232f; } /* 我克：正财、偏财 */
.bz-ss--officer  { color: #2b5f8a; } /* 克我：正官、七杀 */
.bz-ss--resource { color: #7a828c; } /* 生我：正印、偏印 */
.bz-ss--self     { color: var(--ink); font-weight: 600; }
.bz-ss--other    { color: var(--ink-soft); }

/* ---- 地支藏干（每柱最多三行） ---- */
.bz-hide {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bz-hide__row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
}

.bz-hide__row .gz {
  font-size: 16px;
  min-width: 16px;
}

.bz-hide__type {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
}

/* ---- 五行条形图：竖线标出「只算主气」的位置；第二列是相对日主的生克关系 ---- */
#bz_bars .cx-bar {
  grid-template-columns: 30px 52px 1fr 64px;
}

.bz-bar__rel {
  align-self: center;
  font-size: 11.5px;
  letter-spacing: 0.04em;
}

#bz_bars .cx-bar__track {
  position: relative;
}

.bz-bar__mark {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  margin-left: -1px;
  background: var(--ink);
  opacity: 0.55;
}

/* ---- 十神对照表：一行十天干，日主所在列点名 ---- */
.bz-tenstar th,
.bz-tenstar td {
  text-align: center;
  white-space: nowrap;
}

.bz-tenstar__self {
  color: var(--cinnabar);
}

/* ---- 分节小标题（如「近年流年」）：上方是表格或说明文字时须自行拉开间距 ---- */
.tbl-scroll + .cx-h2,
.cx-note + .cx-h2 {
  margin-top: 28px;
}

@media (max-width: 768px) {
  .bz-gz { font-size: 19px; }
  .bz-hide__row { flex-wrap: wrap; gap: 4px; }
  #bz_bars .cx-bar { grid-template-columns: 26px 44px 1fr 58px; }
}

@media (max-width: 480px) {
  /* 命盘表在手机上一列只有 ~68px 宽，藏干三行尽量压扁 */
  .bz-pillar td { padding: 7px 4px; }
  .bz-gz { font-size: 18px; min-width: 18px; }
  .bz-hide { gap: 3px; }
  .bz-hide__row { gap: 3px; }
  .bz-hide__row .gz { font-size: 15px; }
  .bz-hide__type { font-size: 10px; }
  .bz-ss { padding: 0 5px; font-size: 11px; }
}