/* ============================================================
   潜龙八字 · 可读性机制层（readability.css）  UIUX-v2 · 260921
   ------------------------------------------------------------
   定位：**机制层**，不是风格层。它只解决「看不清 / 点不中 / 分不清层级」，
         不提供任何配色主张 —— 因此 4 套风格族全部共用它，也全部依赖它。
   加载序：必须在 app.css / shell.css 之后（覆盖组件层），
           在风格族 patch.css **之前**（风格族可再压它）。

   它修四件事（每条都附实测依据，不是感觉）：

   ① ★ 五行色不再落文字
      实测（light 皮肤，五行色作文字前景 对 --surface-2）：
        木 4.41:1  火 4.18:1  土 4.33:1  **金 1.95:1**  水 4.55:1
      ⇒ 5 项里 4 项 < 4.5:1；金（明黄）几乎不可见。
      ⇒ 与 `260917-T-095-UIUX` §5.2 规则③ 直接冲突（该规则早已写明，是渲染层没遵守）。
      修法：`js/app.js` 已改为输出 `data-wx` ＋ `--gz` 钩子 ⇒ 本文件：
        ・文字一律 `--ink`（对底 13.66:1）
        ・五行色相改由**色条 / 底纹 / 色点**承担（色块用色不受文字级对比度约束）
      这同时是一次**可视化升级**：色条比淡色小字更容易被眼睛抓住。

   ② 字号下限 12px
      实测：组件层声明体 <12px 共 98 处（最小 8px），集中在 `.tl-item` 系列与 `.grade`。
      ⇒ 全部提到 ≥12px（徽标类允许 10.5px，见下方逐条）。

   ③ 可点击区域 ≥44×44px
      实测：11 个控件里只有 3 个达标（`.iconbtn` 34、`.seg` ≈31、`.mini-btn` ≈26、
      `.sample-chip` ≈40、`.mine-row` ≈42、桌面侧栏项 40、折叠摘要无最小高度）。
      ⇒ 统一补到 44px；**视觉尺寸尽量不动**，用伪元素外扩命中盒（不会推挤布局）。

   ④ 框体与表头底色对比
      现状 `--surface` 对 `--bg` 仅约 1.06:1，分区完全靠 1px 细线；
      表头 `--surface-2` 也偏淡。⇒ 加深一档 + 提高线对比，分区才「看得出来」。

   ⛔ 本文件**只消费 var(--*)**；唯二豁免色值 #fff / #000（项目铁律）。
   ⛔ 注释内禁写「星号紧跟斜杠」的片段（会提前终止注释，硬教训 10）。
   ⛔ 不新增断点：骨架差异只用 #viewportStage[data-shell=...]（不用 @media 断点）。
   ============================================================ */

/* ============================================================
   0 · 令牌内的「可读性刻度」（只改值，不新增令牌名）
   —— 新增令牌名会破 69 项契约，故一律复用既有名字。
   ============================================================ */
:root,
#viewportStage{
  /* 正文最小字号（组件层与风格族都引用它，避免各写各的） */
  --fs-min: 12px;
  --fs-min-2: 10.5px;   /* 仅徽标 / 角标可用 */
  /* 命中盒下限 */
  --hit: 44px;
  /* 行高：中文长文与数据行各一档 */
  --lh-read: 1.85;
  --lh-data: 1.45;
}

/* ============================================================
   1 · ★ 五行编码：文字用墨，色相用「条 / 纹」（核心修复）
   ------------------------------------------------------------
   钩子由 js/app.js::gzAttr() 输出：
     <div class="gz" data-wx="金" style="--gz:var(--wx-metal)">酉</div>
   `--gz` 只用于**非文字**用途，因此不受 4.5:1 约束。
   ============================================================ */

/* 1.1 干支大字：墨色文字 + 底下一道五行色条 */
.gz{ color: var(--ink); }
.gz[data-wx]{ position: relative; }
.gz[data-wx]::after{
  content: "";
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: -3px;
  width: 58%; height: 2.5px;
  border-radius: 2px;
  background: var(--gz);
}
/* 小尺寸干支（时间轴卡）：色条更短更细，避免抢字 */
.tl-item .gz[data-wx]::after{ bottom: -2px; height: 2px; width: 62%; }
/* 表格里的干支大字：色条略长，读向更稳 */
.pillars-table .gz[data-wx]::after{ bottom: -4px; width: 64%; height: 3px; }

/* 1.2 藏干小字（11px 级）：墨色文字 + 五行淡底纹（比色条更省地方） */
.zg-item[data-wx]{
  color: var(--ink-2);
  padding: 0 3px;
  border-radius: 4px;
  /* 兜底（不支持 color-mix 时退回中性底），随后一行用混色叠五行相 */
  background: var(--surface-3);
  background: color-mix(in srgb, var(--gz) 18%, var(--surface));
}

/* 1.3 岁运引动神煞的干支：同 1.1
   —— 注意：js/app.js 已改输出 `--gz` 而非内联 `color`，所以这里**不需要 !important**
      （旧写法是内联 color，类选择器压不过它，只能用 !important —— 这正是本次要先改 JS 的原因）。 */
.ssf-gz{ color: var(--ink); }

/* 1.4 五行力量条：加高 + 段间留白（让「力量占比」一眼可比） */
.wx-bar{ height: 18px; border-radius: var(--r-pill); overflow: hidden; }
.wx-bar .seg{ border-radius: 0; }
.wx-bar .seg:first-child{ border-radius: var(--r-pill) 0 0 var(--r-pill); }
.wx-bar .seg:last-child{ border-radius: 0 var(--r-pill) var(--r-pill) 0; }
.wx-legend .wx-dot{ box-shadow: 0 0 0 1px var(--line-strong) inset; }
.wx-legend .wx-item b{ color: var(--ink); font-variant-numeric: tabular-nums; }

/* 1.5 十神力量：五档 → 可扫读的档位条（纯 CSS，不改 DOM）
   —— .sh-lvl 现有 lv-weak / lv-mid / lv-strong 三档类名，直接翻成条长。
   ⚠ 绘制顺序陷阱（260921 实测纠正）：`::before` 是首个子元素、`::after` 是最后一个，
     两者同位置时 **`::after` 画在 `::before` 之上**。
     初版把「全宽灰轨」放在 `::after`、「填充」放在 `::before` ⇒ 填充被轨盖住、条永远不显。
     故此处**轨道＝`::before`、填充＝`::after`**（后者在上）。改这一处前请先确认这个顺序。 */
.sh-card{ position: relative; padding-bottom: 16px; }
.sh-card::before{
  content: "";
  position: absolute; left: 10px; right: 10px; bottom: 6px;
  height: 3px; border-radius: 2px;
  background: var(--surface-3);
}
.sh-card::after{
  content: "";
  position: absolute; left: 10px; bottom: 6px;
  height: 3px; border-radius: 2px;
  background: var(--brand);
  width: 0;
}
.sh-card:has(.lv-weak)::after{ width: 22%; }
.sh-card:has(.lv-mid)::after{ width: 46%; }
.sh-card:has(.lv-strong)::after{ width: 74%; }

/* ============================================================
   2 · 字号下限 12px（实测 98 处 <12px 里，本层先修最影响阅读的几族）
   ============================================================ */

/* 2.1 时间轴小卡（原来 8–10.5px，是全站最难读的一处） */
.tl-item .y{ font-size: var(--fs-min); }
.tl-item .ss{ font-size: var(--fs-min); color: var(--ink-2); }
.tl-item .age{ font-size: var(--fs-min); color: var(--ink-3); }
.tl-item .now-badge{ font-size: var(--fs-min-2); padding: 2px 5px; }
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .y{ font-size: var(--fs-min); }
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .ss{ font-size: var(--fs-min); }
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .age{ font-size: var(--fs-min); }
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .age .rel-tag{ font-size: var(--fs-min); }
.tl-card[data-stack="xingyun"] [data-pane="liunian"] .tl-scroll .tl-item .ly-sig{ font-size: var(--fs-min); }
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item .y,
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item .ss,
.tl-card[data-stack="xingyun"] [data-pane="liuyue"] .tl-scroll .tl-item .age,
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item .y,
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item .ss,
.tl-card[data-stack="xingyun"] [data-pane="xiaoyun"] .tl-scroll .tl-item .age{ font-size: var(--fs-min); }

/* 2.2 口径脚注与各级说明（原 10.5px → 12px；脚注是「流派差异透出」的落点，必须读得清） */
.tl-foot{ font-size: var(--fs-min); color: var(--ink-2); line-height: 1.7; }
.card-title .sub{ font-size: var(--fs-min); color: var(--ink-3); }
.qz-table .sub-cell{ font-size: var(--fs-min); }
.pillars-table th{ font-size: var(--fs-min); }
.pillars-table .col-year-tag{ font-size: var(--fs-min); }
.pillars-table .gz-sub{ font-size: var(--fs-min); }
.detail-line{ font-size: var(--fs-min); }
.form-hint{ font-size: var(--fs-min); }
.sample-note{ font-size: var(--fs-min); }
.basis>summary{ font-size: var(--fs-min); }
.dr-note,.sf-note,.sf-k{ font-size: var(--fs-min); }
.record-empty{ font-size: var(--fs-base); }
.disclaimer{ font-size: var(--fs-min); }
.about-text{ font-size: var(--fs-md); line-height: var(--lh-read); max-width: 34em; }

/* 2.3 徽标 / 角标：允许 10.5px（它们是短标签，不是阅读文本） */
.grade,.ss-chip,.rel-tag,.pattern-special-chip,.pattern-chg-pill{ font-size: var(--fs-min); }
.sample-gtag,.ss-head,.sf-k{ font-size: var(--fs-min); }

/* ============================================================
   3 · 可点击区域 ≥44×44px
   ------------------------------------------------------------
   原则：**视觉尺寸尽量不动，用伪元素把命中盒外扩**（不推挤布局、不改变观感）。
   ============================================================ */
.iconbtn{ position: relative; }
.iconbtn::after,
.mini-btn::after,
.sample-chip::after,
.mine-row::after,
.record-card::after,
.dt-btn::after,
.hamburger::after,
.ql-tip-x::after,
.dr-close::after{ content: ""; position: absolute; inset: -6px; border-radius: inherit; }
.iconbtn,.mini-btn,.dt-btn,.sample-chip,.hamburger,.ql-tip-x,.dr-close{ position: relative; }

/* 需要真实高度的控件（外扩够不到时） */
.segmented .seg{ min-height: var(--hit); display: inline-flex; align-items: center; justify-content: center; }
.segmented.big .seg{ min-height: var(--hit); }
.xy-tab{ min-height: var(--hit); display: inline-flex; align-items: center; justify-content: center; }
.mine-row{ min-height: var(--hit); }
.record-card{ min-height: var(--hit); }
.basis>summary{ min-height: var(--hit); display: flex; align-items: center; }
.cf>.cf-head{ min-height: var(--hit); }
.primary-btn{ min-height: var(--hit); }
.field input,.field select{ min-height: 40px; }
.tl-item{ min-height: var(--hit); }
.sample-chip{ min-height: var(--hit); }

/* 桌面/宽屏侧栏项：40px → 44px（shell.css 的令牌值，本层只改值） */
#viewportStage[data-shell="desk"],
#viewportStage[data-shell="wide"]{ --sb-item-h: 44px; }
.sb-toggle{ min-height: 36px; }

/* ============================================================
   4 · 框体与表头底色：把「分区」从"只有一根细线"提到"看得出层次"
   ============================================================ */
.card{ border-color: var(--line-strong); }
.card-title{ border-bottom: 1px solid var(--line-strong); padding-bottom: 9px; }
.pillars-table th{ background: var(--surface-3); color: var(--ink-2); font-weight: 800; }
.pillars-table .row-name{ background: var(--surface-3); color: var(--ink-2); }
.pillars-table th.col-day{ background: var(--brand); color: #fff; }
.pillars-table td{ border-color: var(--line); }
.qz-table .sub-cell{ color: var(--ink-2); }
.tl-head{ border-bottom: 1px solid var(--line-strong); }
.tl-item{ background: var(--surface); border-color: var(--line); }
.tl-item:hover{ background: var(--surface-2); }

/* 数据表数值：等宽数字（列对齐，扫读更快） */
.pillars-table td,.qz-table td,.rp-table td,.stat-pill .v,.wx-legend b,.tl-item .y b{
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   5 · 焦点与对比（键盘可达 + 深色底也要看得见）
   ============================================================ */
:focus-visible{ outline-width: 2px; outline-style: solid; outline-color: var(--brand); outline-offset: 2px; }
[data-skin="dark"] :focus-visible,
[data-skin="dai"] :focus-visible{ outline-color: var(--gold); }
.tab:focus-visible,.quick:focus-visible,.record-card:focus-visible,
.mine-row:focus-visible,.tl-item:focus-visible,.seg:focus-visible{ outline-offset: -3px; }

/* ============================================================
   6 · 减少动效：本层新增的过渡一并降级
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .tl-item,.wx-bar .seg,.sh-card::before{ transition: none !important; }
}