/* ============================================================
   birth.css  —  /fortune/birth/ 结果屏下面那三节
   ------------------------------------------------------------
   只有这一页加载。类名一律 .bir- 前缀，不碰 fortune/skin.css 和
   fortune/depth.css 里的任何共享类 —— 八字、塔罗、易经都吃那两张表，
   在共享表里改一条会连坐（塔罗那次已经栽过一回）。

   皮肤照 fortune 站的规矩：细线、留白、雕版刻度，一个投影都没有。
   朱红（--accent）只给「这一行是你」，赭石（--accent-soft）给刻度和
   偏差值，别的地方都是墨蓝和灰。零 web font，零图片。
   手机优先，390px 上先排对，宽屏再分栏。
   ============================================================ */

/* ---- A 段：六条链摊开 --------------------------------------
   每一块是一个数，里面是它的算式。算式用正文无衬线 + 等宽数字：
   结论是衬线，过程是无衬线，一眼分得出哪个是答案。 */
.bir-chain { display: grid; gap: 0; }

.bir-chain > div {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule);
}
.bir-chain > div:first-child { border-top: 0; padding-top: 0; }

/* 标题行：左边是这个数叫什么，右边是算出来的结果 */
.bir-chain dfn {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-3); font-style: normal;
  font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.bir-chain dfn b {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-1); letter-spacing: 0; text-transform: none;
  color: var(--ink); text-align: right;
}

/* 算式行。overflow-wrap 是必须的：「1 + 9 + 9 + 6 = 25 → 2 + 5 = 7」
   在 390px 上放不下，不许它把 body 撑横滚。 */
.bir-chain em {
  display: grid; gap: var(--sp-1); font-style: normal;
  font-size: var(--step--1); line-height: 1.7;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere;
}
.bir-chain em i {
  font-style: normal; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint);
}

/* 主数标记：描边不填色，跟着算式走一行，别单占一行 */
.bir-chain mark {
  background: none; color: var(--accent);
  border: 1px solid var(--accent); padding: 0 .45em;
  font-size: var(--step--1); letter-spacing: .12em;
  text-transform: uppercase; white-space: nowrap;
}

/* 每块底下那句话：讲这一条链自己的规矩，不是讲算式 */
.bir-chain small {
  max-width: var(--measure); font-size: var(--step--1);
  line-height: 1.6; color: var(--muted);
}

/* 宽屏把步骤名收进左栏，算式齐头 —— 390px 上不这么排，
   左栏一占 7rem 算式就只剩半屏，长的那几行会碎成四行。 */
@media (min-width: 620px) {
  .bir-chain em {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    align-items: baseline; gap: var(--sp-3);
  }
}

/* ---- B 段：两三堵墙 ----------------------------------------
   每一行是一个节气：叫什么、管哪一柱、落在哪一刻、离你多远，
   最后是「这堵墙两侧那一柱分别是谁」。 */
.bir-edge { display: grid; gap: 0; }

.bir-edge > div {
  display: grid; gap: var(--sp-2);
  padding: var(--sp-4) 0;
  border-top: 1px solid var(--rule);
}
.bir-edge > div:first-child { border-top: 0; padding-top: 0; }

.bir-edge dfn {
  display: grid; gap: var(--sp-1); font-style: normal;
  font-family: var(--font-display); font-size: var(--step-1);
}
.bir-edge dfn small {
  font-family: var(--font-body); font-size: var(--step--1);
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
}

/* 日期和钟点同一行基线对齐，钟点退到 --muted：
   读者先要日期，钟点是那句「差多少」的注脚。 */
.bir-edge b {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: var(--sp-2); font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.bir-edge b em {
  font-style: normal; font-size: var(--step--1); color: var(--muted);
}
/* 离你多远 —— 这一节真正要看的那个数，给赭石 */
.bir-edge b.gap { color: var(--accent-soft); letter-spacing: .03em; }

.bir-edge span {
  font-size: var(--step--1); line-height: 1.65; color: var(--muted);
}
.bir-edge span i {
  font-style: normal; color: var(--ink);
  border-bottom: 1px solid var(--accent-soft);
}

@media (min-width: 620px) {
  .bir-edge > div {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: var(--sp-5); align-items: baseline;
  }
  /* 说明句一律自己占一整行。不写这条，两句话会各自去抢第 2、3 列，
     跟上面的日期挤在一起 —— 网格自动排布只认「有没有空格子」。 */
  .bir-edge span { grid-column: 1 / -1; }
}

/* ---- C 段：普查 --------------------------------------------
   两张计数表。列要对齐就只能是**一个**网格 —— 每行自己开一个网格的话
   auto 列各算各的宽，两行之间对不上（quiz/reaction 那次栽的就是这个）。
   所以表头和 JS 填的那堆行全部 display:contents 摊平，格子直接挂在
   .bir-tally 这一个网格上。 */
.bir-tally {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
}
.bir-tally .hd,
.bir-tally .rows,
.bir-tally .rows > div { display: contents; }

.bir-tally dfn, .bir-tally b, .bir-tally em {
  padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px dotted var(--rule);
}
.bir-tally em { padding-right: 0; }

.bir-tally .hd dfn, .bir-tally .hd b, .bir-tally .hd em {
  align-self: end; font-style: normal; font-weight: 400;
  font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
  border-bottom: 1px solid var(--rule);
}

.bir-tally .rows dfn {
  display: grid; gap: var(--sp-1); align-content: start; font-style: normal;
}
.bir-tally .rows dfn small { font-size: var(--step--1); color: var(--muted); }
.bir-tally .rows b {
  font-family: var(--font-display); font-weight: 400; font-size: var(--step-1);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
.bir-tally .rows em {
  font-style: normal; font-size: var(--step--1); color: var(--muted);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}

/* 你自己那一行。不留左边槽位放竖线 —— 留了整张表就得跟着右移，
   而这一行随生日跳来跳去，版面不能跟着抖。换成整行改朱红、
   点线底改实线，同样一眼找得到。 */
.bir-tally .rows > div.on dfn,
.bir-tally .rows > div.on b,
.bir-tally .rows > div.on em {
  color: var(--accent); border-bottom-style: solid; border-bottom-color: var(--accent);
}
.bir-tally .rows > div.on dfn small {
  color: var(--accent); letter-spacing: .16em; text-transform: uppercase;
}

/* 一行当一个格子，三列向父网格借轨道。
   为什么非得这么写：上面那种摊平写法里，「底线齐」和「基线齐」只能挑一个。
   摊平之后 dfn / b / em 是三个独立格子，默认拉伸到行高，底线才齐；一旦为了
   对齐数字写 align-items:baseline，格子就不拉伸了，左栏两行、右栏一行的那种行
   底线会断成高低两截（votes 表每一行都是两行标题，四行全断）。
   子网格把整行收成一个格子：底线画在行上，只有一条；行内部再按基线对齐，
   数字也齐。老浏览器不认 subgrid 就整块跳过，退回上面的摊平版 ——
   底线是齐的，只有数字基线差一点点，不会塌。 */
@supports (grid-template-columns: subgrid) {
  .bir-tally .hd,
  .bir-tally .rows > div {
    display: grid; grid-column: 1 / -1;
    grid-template-columns: subgrid; align-items: baseline;
    border-bottom: 1px dotted var(--rule);
  }
  .bir-tally .hd { border-bottom: 1px solid var(--rule); }
  .bir-tally .rows > div.on { border-bottom: 1px solid var(--accent); }
  /* 底线归行所有，格子上那条一律撤掉，否则一行画两条 */
  .bir-tally dfn, .bir-tally b, .bir-tally em,
  .bir-tally .hd dfn, .bir-tally .hd b, .bir-tally .hd em,
  .bir-tally .rows > div.on dfn,
  .bir-tally .rows > div.on b,
  .bir-tally .rows > div.on em { border-bottom: 0; }
}

/* 图例摆在数字上面 —— 说明必须在读到数字之前出现，不然要回头重读。 */
.bir-legend, .bir-window {
  max-width: var(--measure); font-size: var(--step--1);
  line-height: 1.6; color: var(--muted);
}
.bir-window b { font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 生命灵数 12 个格子。奇数（朝外）压一层底色，主数号码给赭石，
   你自己那个走朱红描边 —— 三种状态互不干扰，可以叠在同一格上。 */
.bir-life {
  display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(3.5rem, 1fr));
}
.bir-life > div {
  display: grid; gap: var(--sp-1); justify-items: center;
  padding: var(--sp-3) var(--sp-1);
  border: 1px solid var(--rule); margin: -.5px;
}
.bir-life b {
  font-family: var(--font-display); font-weight: 400; font-size: var(--step-1);
  font-variant-numeric: tabular-nums;
}
.bir-life em {
  font-style: normal; font-size: var(--step--1); color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.bir-life .odd { background: var(--sink); }
.bir-life .master b { color: var(--accent-soft); }
.bir-life .on { border-color: var(--accent); position: relative; z-index: 1; }
.bir-life .on b { color: var(--accent); }