/* ============================================================
   潜龙八字 · 皮肤 08「slate」· patch.css
   ------------------------------------------------------------
   职责：把「苍岩石绿」的矿物感落到组件上（不动版式，EL-5）。
   两类事：① 细节小巧思（本套 9 条）② 可视化增强（3 处）

   本套的补丁必须**强化与 03「qing」的分野**：
     qing = 釉光 + 圆角 6px + 柔影 + 留白从容（净）
     slate = 硬边 0px + 硬影 + 高密度 + 铁锈色带（糙）

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

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

/* 巧思 1：卡片 = 一块岩片，靠**硬影**立起来（不是柔雾）。
   岩石之间没有渐变过渡，只有明确的投影。 */
[data-skin="slate"] .card{
  border: 1px solid var(--line);
  box-shadow: var(--shadow-md);
}

/* 巧思 2：卡片标题下压一条「地层线」——苔绿极细线，标记层位。 */
[data-skin="slate"] .card-title{
  border-bottom: 1px solid var(--brand);
}

/* 巧思 3：当前页签 = 苔绿实条（本套信息密度最高，靠实色块才能一眼定位）。 */
[data-skin="slate"] .tab.active{
  background: var(--brand);
  color: var(--surface);
}

/* 巧思 4：主按钮 = 苔绿实底 + 硬影（按下时位移 1px，模拟「压实」）。
   位移比变色更像物理反馈 —— 与岩石的「重」一致。 */
[data-skin="slate"] .primary-btn{
  background: var(--brand);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}
[data-skin="slate"] .primary-btn:active{
  transform: translateY(1px);
  box-shadow: none;
}

/* 巧思 5：表头 = 岩层分界线（底色块 + 苔绿下边线）。
   高密度场景下必须给表头明确的分界，否则扫读会串行。 */
[data-skin="slate"] .pillars-table th{
  background: var(--surface-2);
  border-bottom: 1px solid var(--brand);
}

/* 巧思 6：四柱干支字重 800 + 收紧行高 —— 矿物标本牌上的凿刻感靠字重。 */
[data-skin="slate"] .pillar .p-gan,
[data-skin="slate"] .pillar .p-zhi{
  font-weight: 800;
  line-height: 1.02;
}

/* 巧思 7：聚焦环 = 苔绿硬环（方角跟着零圆角走）。 */
[data-skin="slate"] .tab:focus-visible,
[data-skin="slate"] .quick:focus-visible,
[data-skin="slate"] .tl-item:focus-visible,
[data-skin="slate"] .seg:focus-visible{
  outline: none;
  box-shadow: inset 0 0 0 2px var(--brand);
}

/* 巧思 8：滚动条 = 岩灰色硬条（无圆角，与石材一致）。 */
[data-skin="slate"] .tl-scroll::-webkit-scrollbar,
[data-skin="slate"] .detail-scroll::-webkit-scrollbar,
[data-skin="slate"] .ai-msgs::-webkit-scrollbar,
[data-skin="slate"] .rp-toc-side::-webkit-scrollbar{
  width: 10px; height: 10px;
}
[data-skin="slate"] .tl-scroll::-webkit-scrollbar-thumb,
[data-skin="slate"] .detail-scroll::-webkit-scrollbar-thumb,
[data-skin="slate"] .ai-msgs::-webkit-scrollbar-thumb,
[data-skin="slate"] .rp-toc-side::-webkit-scrollbar-thumb{
  background: var(--line-strong);
  border-radius: 0;
}
[data-skin="slate"] .tl-scroll::-webkit-scrollbar-track,
[data-skin="slate"] .detail-scroll::-webkit-scrollbar-track,
[data-skin="slate"] .ai-msgs::-webkit-scrollbar-track,
[data-skin="slate"] .rp-toc-side::-webkit-scrollbar-track{
  background: var(--surface-2);
}

/* 巧思 9：报告章序号 = 岩芯编号牌（实底 + 白字 + 零圆角）。 */
[data-skin="slate"] #page-report .rp-chapno{
  background: var(--brand);
  color: var(--surface);
  border-radius: 0;
}

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

/* 可视化 1：五行力量条 —— 段间**零缝隙**（本套是唯一不留缝的一套）。
   不留缝正是「整块岩石」的表达：色带直接相接，像矿物的色环。
   这是与另外八套最容易被忽略的差异点。 */
[data-skin="slate"] .wx-bar{
  gap: 0;
  background: transparent;
}
[data-skin="slate"] .wx-bar .seg{ border-radius: 0; }

/* 可视化 2：五行图例的色点 = 方形矿粒（硬边，与零圆角一致）。 */
[data-skin="slate"] .wx-legend .wx-dot{
  border-radius: 0;
  width: 10px; height: 10px;
}

/* 可视化 3：十神档位条 —— 轨道走深灰岩、填充走苔绿，两者都是**实色硬块**。
   ★ 轨道 ::before、填充 ::after（::after 在上）；顺序颠倒会让填充被盖住。 */
[data-skin="slate"] .sh-card::before{
  background: var(--surface-3);
  border-radius: 0;
}
[data-skin="slate"] .sh-card::after{
  border-radius: 0;
}