/* ============================================================
   潜龙八字 · 皮肤 03「qing」· patch.css
   ------------------------------------------------------------
   职责：把「青瓷天青」的釉面感落到组件上（不动版式，EL-5）。
   两类事：① 细节小巧思（本套 9 条）② 可视化增强（3 处）

   本套与 08「slate 苍岩石绿」都浅、都带绿，补丁必须**强化分野**：
     slate = 硬边 0px + 硬影 + 高密度 + 苔绿实块（糙·断面）
     qing  = 小圆角 + 柔影 + 留白从容 + 靛青细线（净·釉面）

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

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

/* 巧思 1：卡片 = 一片釉面，只留**一圈细口沿**（1px --line）+ 淡影。
   釉面的特征是「边清而影淡」：边界必须干净，体积感却很轻 ——
   所以既不用粗边（那是 slate），也不用重影（那是 dawn）。 */
[data-skin="qing"] .card{
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* 巧思 2：卡片标题下压一条**靛青细线** —— 瓷器的口沿线。 */
[data-skin="qing"] .card-title{
  border-bottom: 1px solid var(--brand-soft);
}

/* 巧思 3：当前页签 = 靛青细框 + 靛青字（**不填实底**）。
   青瓷是「净」的，实色块会显闷；用一圈细框 + 主色字，像瓷器上一道刻痕。 */
[data-skin="qing"] .tab.active{
  background: var(--brand-soft);
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
}

/* 巧思 4：主按钮 = 靛青实底 + 极淡影（釉面按钮不该有重投影）。
   按下时加深，不做位移 —— 瓷器是硬的，位移会显得「软」。 */
[data-skin="qing"] .primary-btn{
  background: var(--brand);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}
[data-skin="qing"] .primary-btn:active{
  background: var(--brand-deep);
  box-shadow: none;
}

/* 巧思 5：表头 = 无底色 + **靛青下边线**（青瓷的净，首先体现在「不铺底」）。 */
[data-skin="qing"] .pillars-table th{
  background: transparent;
  border-bottom: 1px solid var(--brand);
}

/* 巧思 6：四柱干支字重 800、行高 1.08，且**不加字距** ——
   瓷器上的字是刻的，刻字不会拉开间距（拉开字距是印刷品的语言，属于 07）。 */
[data-skin="qing"] .pillar .p-gan,
[data-skin="qing"] .pillar .p-zhi{
  font-weight: 800;
  line-height: 1.08;
}

/* 巧思 7：聚焦环 = 靛青柔环 + 一圈釉白。双层环正是「釉下有一层白胎」的暗示，
   同时双层能保证在任何底色上都看得见（单环在 --surface 上会偏淡）。 */
[data-skin="qing"] .tab:focus-visible,
[data-skin="qing"] .quick:focus-visible,
[data-skin="qing"] .tl-item:focus-visible,
[data-skin="qing"] .seg:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--brand-glow);
}

/* 巧思 8：滚动条 = 细青条 + **透明轨道**（青瓷的净不容轨道色块）。 */
[data-skin="qing"] .tl-scroll::-webkit-scrollbar,
[data-skin="qing"] .detail-scroll::-webkit-scrollbar,
[data-skin="qing"] .ai-msgs::-webkit-scrollbar,
[data-skin="qing"] .rp-toc-side::-webkit-scrollbar{
  width: 8px; height: 8px;
}
[data-skin="qing"] .tl-scroll::-webkit-scrollbar-thumb,
[data-skin="qing"] .detail-scroll::-webkit-scrollbar-thumb,
[data-skin="qing"] .ai-msgs::-webkit-scrollbar-thumb,
[data-skin="qing"] .rp-toc-side::-webkit-scrollbar-thumb{
  background: var(--line-strong);
  border-radius: 4px;
}
[data-skin="qing"] .tl-scroll::-webkit-scrollbar-track,
[data-skin="qing"] .detail-scroll::-webkit-scrollbar-track,
[data-skin="qing"] .ai-msgs::-webkit-scrollbar-track,
[data-skin="qing"] .rp-toc-side::-webkit-scrollbar-track{
  background: transparent;
}

/* 巧思 9：报告章序号 = 靛青细框圆牌（金字实底属于 01 与 09，本套只描边）。 */
[data-skin="qing"] #page-report .rp-chapno{
  background: transparent;
  color: var(--brand);
  box-shadow: inset 0 0 0 1px var(--brand);
  border-radius: 4px;
}

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

/* 可视化 1：五行力量条 —— 段间留 3px **釉白缝**（区分更清楚，且不破坏净度）。
   ★ 缝色用 --surface（近白釉面），不是 --bg：底是冷青的，用底作缝会显脏。 */
[data-skin="qing"] .wx-bar{
  gap: 3px;
  background: transparent;
}
[data-skin="qing"] .wx-bar .seg{ border-radius: 2px; }

/* 可视化 2：五行图例的色点 = 小圆点 + **釉白内圈**（像釉里的一颗气泡）。 */
[data-skin="qing"] .wx-legend .wx-dot{
  border-radius: 999px;
  width: 9px; height: 9px;
  box-shadow: inset 0 0 0 1px var(--surface);
}

/* 可视化 3：十神档位条 —— 轨道走极淡青、填充走靛青，两端小圆角。
   ★ 绘制顺序：轨道 ::before、填充 ::after（::after 画在 ::before 之上）
     —— 反过来会让填充永远被盖住（本项目已踩过的坑）。 */
[data-skin="qing"] .sh-card::before{
  background: var(--surface-3);
  border-radius: 4px;
}
[data-skin="qing"] .sh-card::after{
  border-radius: 4px;
}