/* ============================================================
   潜龙八字 · 皮肤 07「codex」· patch.css
   ------------------------------------------------------------
   职责：把「鎏金秘典」的工艺感落到组件上（不动版式，EL-5）。
   两类事：① 细节小巧思（本套 9 条）② 可视化增强（3 处）

   本套与 04「epic」都含金，所以补丁必须**强化二者的分野**：
     epic = 粗边 + 阴刻 + 铜钉（体量）｜codex = 细线 + 烫印 + 书脊纹（工艺）

   ⛔ 不含栅格 / 间距阶 / 模块秩序（归 css/layout-v3.css）。
   ⛔ 只消费 var(--*)；不新增令牌；无强制优先声明；无断点型媒体查询。
   ⛔ 类名取自真实样式表；注释内不写块注释的结束符号片段（硬教训 10）。
   ============================================================ */

/* ------------------------------------------------------------
   一 · 细节小巧思（9 条）
   ------------------------------------------------------------ */

/* 巧思 1：卡片 = 一块皮面，四边**只有 1px 金线**（对比 epic 的 2px 粗边）。
   「精装」的差别就在这 1px：粗边是鼎，细线是书。 */
[data-skin="codex"] .card{
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-md);
}

/* 巧思 2：卡片标题下压一条「烫金书口线」——
   标题与内容之间有一道极细金线，像书页的天头。 */
[data-skin="codex"] .card-title{
  border-bottom: 1px solid var(--gold);
}

/* 巧思 3：当前页签 = 书签丝带（一条窄的实心金，不是整块底色）。
   窄条比色块更像「夹在书里的那条带子」。 */
[data-skin="codex"] .tab.active{
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 0 -2px 0 var(--gold);
}

/* 巧思 4：主按钮 = 烫印（金线底 + 金字），不是金块。
   金一旦成面就廉价；成线 + 字才是烫印。 */
[data-skin="codex"] .primary-btn{
  background: transparent;
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px var(--gold);
}
[data-skin="codex"] .primary-btn:active{
  background: var(--gold-soft);
}

/* 巧思 5：表格不用斑马纹，用「纸页分隔线」——
   精装书的正文页没有斑马纹，只有一道道极细的横线。 */
[data-skin="codex"] .pillars-table th{
  background: transparent;
  color: var(--gold-text);
  border-bottom: 1px solid var(--gold);
}
[data-skin="codex"] .pillars-table td{
  border-bottom: 1px solid var(--line-thin);
}

/* 巧思 6：四柱干支的字距略开 —— 烫金字一定有字距（活字排版传统）。 */
[data-skin="codex"] .pillar .p-gan,
[data-skin="codex"] .pillar .p-zhi{
  letter-spacing: .04em;
  font-weight: 800;
}

/* 巧思 7：聚焦环 = 金细环（在墨黑皮面上，金环是唯一能被看见的交互标记）。 */
[data-skin="codex"] .tab:focus-visible,
[data-skin="codex"] .quick:focus-visible,
[data-skin="codex"] .tl-item:focus-visible,
[data-skin="codex"] .seg:focus-visible{
  outline: none;
  box-shadow: 0 0 0 1px var(--gold), 0 0 0 3px var(--gold-soft);
}

/* 巧思 8：滚动条 = 鎏金细轨（书口的三面烫金，就是这道细线）。 */
[data-skin="codex"] .tl-scroll::-webkit-scrollbar,
[data-skin="codex"] .detail-scroll::-webkit-scrollbar,
[data-skin="codex"] .ai-msgs::-webkit-scrollbar,
[data-skin="codex"] .rp-toc-side::-webkit-scrollbar{
  width: 8px; height: 8px;
}
[data-skin="codex"] .tl-scroll::-webkit-scrollbar-thumb,
[data-skin="codex"] .detail-scroll::-webkit-scrollbar-thumb,
[data-skin="codex"] .ai-msgs::-webkit-scrollbar-thumb,
[data-skin="codex"] .rp-toc-side::-webkit-scrollbar-thumb{
  background: var(--line-strong);
  border-radius: 0;
}
[data-skin="codex"] .tl-scroll::-webkit-scrollbar-track,
[data-skin="codex"] .detail-scroll::-webkit-scrollbar-track,
[data-skin="codex"] .ai-msgs::-webkit-scrollbar-track,
[data-skin="codex"] .rp-toc-side::-webkit-scrollbar-track{
  background: transparent;
}

/* 巧思 9：报告章序号 = 烫金编号（金字 + 金细框，像藏书编号）。
   注意**不用实底** —— 实底会变成 epic 的「铭文方牌」，那是另一套的语言。 */
[data-skin="codex"] #page-report .rp-chapno{
  background: transparent;
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px var(--gold);
  border-radius: 2px;
}

/* ------------------------------------------------------------
   二 · 可视化增强（3 处）
   ------------------------------------------------------------ */

/* 可视化 1：五行力量条 —— 段间留一道**金缝**（皮面接缝处的烫金）。
   与 epic 的「压槽」不同：这里缝是**亮**的，epic 是暗的。 */
[data-skin="codex"] .wx-bar{
  gap: 2px;
  background: transparent;
}
[data-skin="codex"] .wx-bar .seg{ border-radius: 0; }

/* 可视化 2：五行图例的色点加一圈极细金环 —— 像嵌进皮面的小金属片。 */
[data-skin="codex"] .wx-legend .wx-dot{
  border-radius: 999px;
  box-shadow: 0 0 0 1px var(--line-strong);
}

/* 可视化 3：十神档位条 —— 轨道走极细金线、填充走实金，形成「线/面」对比。
   ★ 轨道 ::before、填充 ::after（::after 在上）；顺序颠倒会让填充被盖住。 */
[data-skin="codex"] .sh-card::before{
  background: var(--line-thin);
  border-radius: 0;
}
[data-skin="codex"] .sh-card::after{
  border-radius: 0;
}