/* ============================================================
   fortune / depth.css  —  深度页专用（四个深度页共用这一份）
   ------------------------------------------------------------
   落地页是分屏的，一屏一件事；深度页反过来 —— 整页滚动、内容密、
   像一页历书。所以这里没有 .screen，也不引 screens.js。

   不塞进 skin.css 的原因：落地页用不到这些类，塞进去等于让
   每个落地访客白下载一段样式，而落地率是整条漏斗最贵的一段。
   配色和字体全部继承 skin.css，不重新定义任何 token。
   ============================================================ */

/* 面包屑：细线一条，唯一固定在顶部的东西 */
.top {
  border-bottom: 1px solid var(--rule);
  padding: var(--sp-3) var(--sp-5);
}
.top a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  color: var(--muted); text-decoration: none;
  font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.top a:hover { color: var(--accent); }

.doc {
  max-width: 62rem; margin-inline: auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-7);
  display: grid; gap: var(--sp-7);
}
.head { display: grid; gap: var(--sp-4); justify-items: start; }
.lede { max-width: var(--measure); font-size: var(--step-1); color: var(--muted); }
.block { display: grid; gap: var(--sp-4); }

/* 性别是大运方向的输入，不是装饰 —— 阳年男顺行、阴年男逆行，
   换一个这张表整个反过来。所以它和生日放在同一张表单里。 */
.chips { display: flex; flex-wrap: wrap; gap: 0; }
.chip {
  font: inherit; font-size: var(--step--1);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); background: transparent;
  border: 1px solid var(--rule); margin-left: -1px;
  padding: var(--sp-2) var(--sp-4);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.chip:first-child { margin-left: 0; }
.chip:hover { color: var(--ink); background: var(--raise); }
.chip.on { color: var(--accent-ink); background: var(--ink); border-color: var(--ink); }

/* ---- 四柱：四根竖栏，天干在上地支在下 ----------------------
   汉字用大字号衬线打出来 —— 这一页的主角就是这八个字，
   英文读音降到注脚。栏与栏之间只有一条细线，没有卡片没有投影。 */
.pillars {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--rule); background: var(--raise);
}
.pillar {
  display: grid; gap: var(--sp-2); justify-items: center; text-align: center;
  padding: var(--sp-4) var(--sp-2);
  border-left: 1px solid var(--rule);
}
.pillar:first-child { border-left: 0; }
.pillar[data-empty] { color: var(--faint); }
.pillar dt {
  font-size: var(--step--1); letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
/* dl 里合法的写法是 div 包一组 dt+dd，所以两个汉字和两行注脚都在 dd 里，
   dd 自己再排一层网格 —— 不用 display:contents，读屏器对它的支持还不齐。 */
.pillar dd {
  margin: 0; display: grid; gap: var(--sp-2); justify-items: center;
}
/* 汉字：系统自带的衬线，零字体请求。Georgia 没有汉字，浏览器会逐字回退到
   栈里第一个有这个字的字体，所以补一个 SimSun 兜 Windows。 */
.glyph {
  font-family: var(--font-display), "SimSun", serif;
  font-size: var(--step-4); line-height: 1.05;
}
.glyph.stem { color: var(--ink); }
.glyph.branch { color: var(--accent); }
.pillar small { font-size: var(--step--1); color: var(--muted); line-height: 1.35; }
.pillar .el {
  font-size: var(--step--1); letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-soft);
}
@media (max-width: 560px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillar:nth-child(3) { border-left: 0; }
  .pillar:nth-child(n+3) { border-top: 1px solid var(--rule); }
}

/* ---- 五行分布：五行五条，长度就是个数占总字数的比例 ----------
   条长由 JS 写进 --_w。数出来几个就是几个，不加权、不补位。 */
.bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.bars li {
  display: grid; align-items: center; gap: var(--sp-3);
  grid-template-columns: 5.5rem 1fr 2.5rem;
  padding: var(--sp-3) 0; border-bottom: 1px dotted var(--rule);
}
.bars dfn {
  font-style: normal; font-size: var(--step--1);
  letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.bars .track { height: 6px; background: var(--sink); }
.bars .track i { display: block; height: 100%; width: var(--_w); background: var(--accent-soft); }
/* 日主那一行是这张表的基准，用朱红标出来 —— 它不是「最多的那个」 */
.bars li[data-master] dfn { color: var(--accent); }
.bars li[data-master] .track i { background: var(--accent); }
.bars b {
  font-family: var(--font-display); font-size: var(--step-1);
  font-variant-numeric: tabular-nums; text-align: right;
}
.bars li[data-zero] b { color: var(--faint); }

/* 结论段：这一页唯一用正文字号说话的地方，其余都是表 */
.reading { max-width: var(--measure); font-size: var(--step-1); }
.reading em { font-style: italic; color: var(--accent); }
.reading b { font-weight: 400; border-bottom: 1px solid var(--accent-soft); }

/* ---- 大运表 / 五系表：两张表同一套骨架 ----------------------
   窄屏放不下四列，让表自己横滚，不让整个 body 横滚 —— 后者是真 bug。
   横滚本身用 engine.css 的 .scroll-x，这里不再重写一遍：同一条规则
   写两处，改的时候只会改到一处。 */
.luck, .sys { width: 100%; border-collapse: collapse; }
.luck th, .luck td, .sys th, .sys td {
  text-align: left; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--rule); white-space: nowrap;
}
.luck thead th, .sys thead th {
  font-family: var(--font-body); font-weight: 400;
  font-size: var(--step--1); letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted);
}
.luck tbody th, .sys tbody th { font-weight: 400; font-variant-numeric: tabular-nums; }
.luck .gz {
  font-family: var(--font-display), "SimSun", serif;
  font-size: var(--step-2);
}
.luck .gz i { font-style: normal; color: var(--accent); }
.luck .rom, .sys .rom { font-size: var(--step--1); color: var(--muted); }
.luck tbody tr, .sys tbody tr { transition: background var(--dur) var(--ease); }
.luck tbody tr:hover, .sys tbody tr:hover { background: var(--raise); }

/* 五系表的读数列：这一列才是人来看的东西，比表头大一号。
   「在数什么」和「多久转一圈」两列刻意压小 —— 它们是论据不是结论。 */
.sys .val { font-family: var(--font-display); font-size: var(--step-1); }
.sys .val i { font-style: normal; color: var(--accent); font-size: var(--step--1); }
.sys .val small {
  display: block; font-family: var(--font-body);
  font-size: var(--step--1); color: var(--muted); letter-spacing: .02em;
}
/* 星座在重合日换掉了：整页论点的证据，得看得见 */
.sys .moved, .luck .moved { color: var(--accent); }
/* 「在数什么」那两列是长句，不是读数，不能跟着上面 nowrap 拉出一屏宽 */
.sys td.rom { white-space: normal; min-width: 14rem; }

/* 当前这一步：第一列左侧一道朱红。用 border 而不是绝对定位的伪元素 ——
   表在 .scroll-x 里，负偏移的伪元素会被 overflow 裁掉，等于标记不见了。
   每一行都先占一条透明边，所以标中的那行不会横向抖一下。 */
.luck th:first-child, .luck td:first-child {
  border-left: 2px solid transparent; padding-left: var(--sp-2);
}
.luck tbody tr[data-now] th { color: var(--accent); }
.luck tbody tr[data-now] th:first-child { border-left-color: var(--accent); }

/* ---- 那一个数 ------------------------------------------------
   整页只有这一个数字放到这么大。它不是装饰：底下三条全是它的余数，
   先让人记住它长什么样，后面「同一个数」那句话才有着落。 */
.oneno {
  display: grid; gap: var(--sp-2); justify-items: center; text-align: center;
  padding: var(--sp-5) 0 var(--sp-4);
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.oneno b {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(3.2rem, 1.2rem + 8vw, 6.5rem); line-height: .9;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--accent);
}
.oneno span {
  font-size: var(--step--1); letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted);
}

/* ---- 三刀 ----------------------------------------------------
   同一个数除三次。三条并排，中间靠竖线分开而不是靠间距 ——
   要读起来像一个东西被切了三次，不像三件事。 */
.cuts {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cuts li {
  display: grid; gap: var(--sp-2); align-content: start;
  padding: var(--sp-4) var(--sp-4);
  border-left: 1px solid var(--rule);
}
.cuts li:first-child { border-left: 0; padding-left: 0; }
/* 标签装的是式子不是小标题，所以不走大写字距那一套 —— 大写会把
   "(J + 9) mod 10" 拉散成一串符号，读者照着按计算器就按不出来。 */
.cuts dfn {
  font-style: normal; font-size: var(--step--1); line-height: 1.4;
  letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--muted);
}
.cuts b {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--step-3); line-height: 1; font-variant-numeric: tabular-nums;
}
.cuts span { font-family: var(--font-display); font-size: var(--step-1); color: var(--accent); }

/* ---- 两种写法 ------------------------------------------------
   三行对照，中间那行是唯一变了的东西，其余两行原地不动。 */
.spell { margin: 0; display: grid; gap: 0; }
.spell > div {
  display: grid; grid-template-columns: 14rem 1fr; gap: var(--sp-3) var(--sp-4);
  align-items: baseline;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--rule);
}
.spell dt {
  font-size: var(--step--1); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.spell dd { margin: 0; display: grid; gap: var(--sp-1); }
.spell dd b { font-family: var(--font-display); font-weight: 400; font-size: var(--step-1); }
.spell dd span { font-size: var(--step--1); color: var(--accent); letter-spacing: .04em; }

/* ---- 方法：把步骤本身摆出来，这是这一页可信度的来源 ---------- */
.method { margin: 0; padding-left: 1.4em; display: grid; gap: var(--sp-2); }
.method li { font-size: var(--step--1); color: var(--muted); line-height: 1.65; }
.method b { color: var(--ink); font-weight: 400; }

@media (max-width: 560px) {
  .bars li { grid-template-columns: 4.5rem 1fr 2.2rem; }
  .doc { padding: var(--sp-5) var(--sp-4) var(--sp-6); gap: var(--sp-6); }
  /* 三刀并排在手机上会挤成三条竖着掉字的窄柱，改成上下三段，
     竖线换成横线 —— 分隔的意思保住了，读法换了。 */
  .cuts { grid-template-columns: 1fr; }
  .cuts li { border-left: 0; border-top: 1px solid var(--rule); padding: var(--sp-4) 0; }
  .cuts li:first-child { border-top: 0; padding-top: 0; }
  .spell > div { grid-template-columns: 1fr; gap: var(--sp-2); }
}