/* ============================================================
   八字页专属组件。只有这一页用得上，不进 fortune/depth.css ——
   共享皮肤里已经有五个页面在用，多塞三组只有一页会命中的规则，
   下一个改皮肤的人得先搞清楚哪几条跟他无关。
   跟 tarot.css 同一个做法：站级皮肤 + 工具级补丁。

   表格骨架（.spread）复用 depth.css 里 .luck/.sys 那一套，
   那边的选择器已经带上 .spread，这里只写它跟那两张表不一样的地方。
   ============================================================ */

/* ---- 摊开的字表 ---------------------------------------------
   汉字列用显示字体放大一号，跟四柱那八个字是同一种看法。 */
.spread .gz {
  font-family: var(--font-display), "SimSun", serif;
  font-size: var(--step-2); line-height: 1.1;
}
.spread .gz small {
  display: block; font-family: var(--font-body);
  font-size: var(--step--1); color: var(--muted); letter-spacing: .02em;
}
/* 十神那一列是短语不是读数，不能跟着 depth.css 的 nowrap 拉宽整张表 */
.spread td:last-child { white-space: normal; min-width: 11rem; }
.spread td:last-child small {
  display: block; font-family: var(--font-display), "SimSun", serif;
  font-size: var(--step--1); color: var(--accent-soft); letter-spacing: .06em;
}
.spread td:last-child em { font-style: italic; color: var(--accent); }
/* 藏干：压一档灰。不是次要信息，是「你在上面四根柱子上看不见它」 */
.spread tr[data-hid] .gz, .spread tr[data-hid] td { color: var(--muted); }
.spread tr[data-hid] .gz { font-size: var(--step-1); }
/* 每根柱子头一行加一道实线，四组一眼分得开 */
.spread tr[data-first] th, .spread tr[data-first] td { border-top: 1px solid var(--rule); }

/* ---- 藏干重数：在 .bars 上多一列「摊开前是几个」 --------------
   左边那个小数字是上一节读者自己数得出来的，放在条子前面，
   让两个数在同一行上正面对上。 */
.recount li { grid-template-columns: 5.5rem 2rem 1fr 2.5rem; }
.recount .was {
  font-variant-numeric: tabular-nums; text-align: right;
  font-size: var(--step--1); color: var(--faint);
}
.recount li[data-master] .was { color: var(--muted); }

/* ---- 十神卡片 ------------------------------------------------ */
.gods { display: grid; gap: 0; }
.god { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.god:first-child { border-top: 1px solid var(--rule); }
.god header { display: flex; align-items: baseline; gap: var(--sp-2); }
.god header b { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }
.god .cn {
  font-family: var(--font-display), "SimSun", serif;
  font-size: var(--step-1); color: var(--accent);
}
.god .n {
  margin-left: auto; font-variant-numeric: tabular-nums;
  font-size: var(--step--1); color: var(--muted);
}
/* 式子那一行和判词那一行必须看得出不是一回事 —— 上面是能验的，
   下面是抄的。靠颜色和字号分，不靠读者自己猜。 */
.god .rel {
  margin: var(--sp-2) 0 var(--sp-3); font-size: var(--step--1);
  letter-spacing: .04em; color: var(--accent-soft);
}
.god p:last-child { margin: 0; max-width: var(--measure); color: var(--ink); }

/* ---- 四柱各主什么 -------------------------------------------- */
.quad-wrap { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.quad { padding: var(--sp-4) 0; border-bottom: 1px solid var(--rule); }
.quad header { display: flex; align-items: baseline; gap: var(--sp-3); flex-wrap: wrap; }
.quad h3 { margin: 0; font-family: var(--font-display); font-size: var(--step-1); font-weight: 400; }
.quad header span { font-size: var(--step--1); color: var(--muted); }
.quad .face { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; }
.quad .face .glyph { font-size: var(--step-3); }
.quad .face .glyph:nth-of-type(2) { color: var(--accent); }
.quad .face .rom { font-size: var(--step--1); color: var(--muted); line-height: 1.4; }
.quad .ny { display: flex; gap: var(--sp-2); margin: 0 0 var(--sp-3); align-items: baseline; }
.quad .ny dt {
  font-size: var(--step--1); letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.quad .ny dd { margin: 0; font-size: var(--step-0); }
.quad .ny .cn { font-family: var(--font-display), "SimSun", serif; color: var(--accent); }
.quad p { margin: 0; max-width: var(--measure); }
.quad .flag, .quad .miss { color: var(--accent); margin-bottom: var(--sp-2); }
.quad[data-empty] .miss { color: var(--muted); }

/* ---- 手机上这张表必须整张看得见 -------------------------------
   .scroll-x 只保证 body 不横滚，不保证内容看得见 —— 2026-09-19 实测
   390px 上表头停在 ELEMENT，最右边那列「RELATION TO YOU」整个在屏幕外，
   而那一列正是这一节存在的理由。我们的量全是 TikTok 手机流，
   等用户自己想到往左划＝这一节白做。
   已经先砍掉重复的一列（见 bazi.js），剩下四列再收三处宽度：
   表头字距、单元格右留白、藏干注脚允许折行。字号一概不动。 */
@media (max-width: 560px) {
  .spread thead th { white-space: normal; letter-spacing: .04em; }
  .spread th, .spread td { padding-right: var(--sp-2); }
  .spread .gz small { white-space: normal; }
  .spread td:last-child { min-width: 7rem; }
  /* 纳音那一行：dt 是定宽短语，dd 是长词组，并排时 dt 被挤成两行，
     「SOUND / ELEMENT」断在词中间，四张卡还断得不一样。改成上下两行。 */
  .quad .ny { display: grid; gap: 0; }
}

/* ---- 首屏速览卡 ---------------------------------------------
   参考「测测」的结果页：一个大字符当视觉锤、一句判词、三个关键词、
   一句话，然后才是长内容。调色板不跟它走 —— 那是暖米色手绘，
   我们是冷灰制图纸，五个站本来就该看着不一样。
   整块沉一层（--sink）做成一个色域，把它从正文里摘出来。 */
.snap {
  margin: var(--sp-5) 0;
  padding: var(--sp-5) var(--sp-4) var(--sp-4);
  background: var(--sink);
  border-top: 2px solid var(--accent);
  border-bottom: 1px solid var(--rule);
  display: grid; gap: var(--sp-4);
}

/* 「这份盘是谁的」+ 换成自己的入口。压到最小一行：它是免责声明不是标题，
   但必须在第一眼里 —— 不然示例生日会被当成对访客本人的判词。 */
.snap-for {
  margin: 0; font-size: var(--step--1); color: var(--muted);
}
.snap-for > b { font-weight: 500; color: var(--ink); }
/* 这个链接原来没给颜色，浏览器默认样式直接透出来 —— 一条 #0000EE 的
   蓝字带下划线压在朱红和墨蓝的版面上，2026-09-21 在 390px 截图里一眼
   就看得见。站内其它链接都各自写过颜色，只有这条是后补的，漏了。 */
.snap-for a { color: var(--accent); text-underline-offset: 3px; }
/* 上面那个 use your own 跳过来时，标题不要正好贴在视口顶边上 —— 贴着看
   像被裁掉了半截。这一页没有吸顶导航，留一口气就够。 */
.entry-block { scroll-margin-top: var(--sp-4); }

/* 判词那两行。测测的做法是标题只有四到八个字、副标题一行，
   然后立刻上大图 —— 这两行就是那四到八个字，不要往里加解释。 */
.snap-name {
  margin: 0; font-size: var(--step--1); color: var(--muted);
  letter-spacing: .06em; text-transform: uppercase;
}
.snap-label {
  margin: var(--sp-1) 0 0; font-size: var(--step-2); line-height: 1.1;
  text-wrap: balance;
}

/* ---- 八字方阵：这张卡的视觉锤 --------------------------------
   这八个格子的内容下面 .pillars 那张表里全都有，这里一个数都不另算，
   只是把它画成一眼能看的东西 —— 用户说「全是字、没有冲击力」，
   缺的就是这一块。测测每个功能首屏正中都有一个又大又密的图形
   （吉祥物 / 五格图腾方阵 / 整张命盘），「专业」是靠它说的。

   五行配色是这门学问自己的约定（木青 火赤 土黄 金白 水黑），
   不是我们挑的品牌色，所以按 data-el 写在这里一处，JS 不碰颜色。
   饱和度压过一档：原色摆在冷灰制图纸上会跳成儿童玩具。 */
.snap-plate {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2); margin: 0;
}
.snap-plate > .gzl {
  font-style: normal; font-size: var(--step--1);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); text-align: center; line-height: 1.6;
}
.snap-plate > .gzl-you { color: var(--accent); font-weight: 600; }
.snap-plate > .gzc {
  aspect-ratio: 1; display: grid; place-items: center;
  font-family: var(--font-display), "SimSun", serif;
  font-size: clamp(1.6rem, 8vw, 2.4rem); font-weight: 400;
  color: var(--paper); background: var(--_el);
  border-radius: var(--radius-s);
}
.snap-plate > .gzc[data-el="0"] { --_el: #3d6b4f; }
.snap-plate > .gzc[data-el="1"] { --_el: #b4231f; }
.snap-plate > .gzc[data-el="2"] { --_el: #9a7430; }
.snap-plate > .gzc[data-el="3"] { --_el: #67748a; }
.snap-plate > .gzc[data-el="4"] { --_el: #2d5578; }
/* 日干是整页的基准，方阵上必须一眼认出来。两层描边：
   里面一圈同卡片底色拉开距离，外面一圈墨线。 */
.snap-plate > .gzc-you { box-shadow: 0 0 0 2px var(--sink), 0 0 0 4px var(--ink); }
/* 没填出生时间就没有时柱。画成虚线空格，不画成「零」—— 那是两回事。 */
.snap-plate > .gzc-off {
  color: var(--faint); background: none;
  border: 1px dashed var(--rule);
}

/* 关键词粒。和谐/磨合两栏也用它 —— 三处同一个形状，写一份。
   不叫 .pip：skin.css:176 的 .pip 是星盘上那个 position:absolute 的标记点，
   带着 --_r 半径和 transform 角度。复用那个名字的话这三个词会脱离卡片、
   飞到表单上叠成一团 —— 而所有数值断言照样全过，只有截图能看见。 */
.snap-keys { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.snap-keys > .snap-key {
  font-size: var(--step--1); font-weight: 500; letter-spacing: .02em;
  padding: .3em .7em; background: var(--raise);
  border: 1px solid var(--rule); border-radius: var(--radius-s);
}

.snap-say { margin: 0; color: var(--muted); max-width: 42ch; }

.snap-pair > div { display: grid; gap: var(--sp-2); }
.snap-h {
  margin: 0; font-family: var(--font-body);
  font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-soft);
}
.snap-h-neg { color: var(--muted); }

/* .snap-row / .snap-today / .snap-gz / .snap-score 跟着速览卡里那块
   「Today」一起删了（2026-09-22）—— 日柱、五行、五格分数现在全在
   第一屏那条色带上。 */

.snap-pair {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4);
  border-top: 1px solid var(--rule); padding-top: var(--sp-4);
}
.snap > .fineprint { margin: 0; }

@media (min-width: 760px) {
  .snap { padding: var(--sp-5); }
  /* 桌面上四列铺满会把每个字撑到 200px 见方，像标语牌不像命盘。
     方阵限宽靠左，右边留白 —— 跟下面几节的 --measure 是一个道理。 */
  .snap-plate { max-width: 30rem; }
}

@media (min-width: 760px) {
  .gods, .quad-wrap { grid-template-columns: 1fr 1fr; column-gap: var(--sp-5); }
  .god:nth-child(2) { border-top: 1px solid var(--rule); }
  .quad-wrap { border-top: 0; }
  .quad:nth-child(-n+2) { border-top: 1px solid var(--rule); }
}