/* ============================================================
   潜龙八字 · 皮肤 06「ink」· patch.css
   ------------------------------------------------------------
   职责：在**不动版式**（EL-5）的前提下，把「水墨寒山」的质感落到组件上。
   只做两类事：
     ① 细节小巧思（本套 9 条）
     ② 可视化增强（本套 3 处）

   ⛔ 本文件不含栅格 / 间距阶 / 模块秩序 —— 那些归 css/layout-v3.css。
   ⛔ 只消费 var(--*)；不新增令牌；不使用强制优先声明；不含断点型媒体查询。
   ⛔ 类名必须取自真实样式表（引擎侧不会出现本文件没有的类）。
   ⛔ 注释内不写块注释的结束符号片段（硬教训 10）。
   ============================================================ */

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

/* 巧思 1：印章落款。
   全站唯一的有彩色是赭石，所以「当前页」的标记做成落款印的样子：
   一枚实心赭石小方块，不用描边 —— 描边会像按钮，实心才像印。 */
[data-skin="ink"] .tab.active{
  background: var(--brand);
  color: var(--surface);
}

/* 巧思 2：卡片「托裱」——宣纸装裱的一道极细内侧白边。
   水墨的卡片不该有硬框，只该有「裱上去」的一圈细白。 */
[data-skin="ink"] .card{
  box-shadow: inset 0 0 0 1px var(--surface), var(--shadow-sm);
}

/* 巧思 3：主按钮不用渐变（水墨里没有渐变光）。
   改用「墨底 + 极细描边 + 落款色字」，按下时墨色加深 —— 像按在宣纸上。 */
[data-skin="ink"] .primary-btn{
  background: var(--ink);
  color: var(--surface);
  box-shadow: none;
}
[data-skin="ink"] .primary-btn:active{ background: var(--brand-deep); }

/* 巧思 4：表头不做底色块，改「一道压痕线」。
   水墨体系里表头是一片墨的右上角，靠线的重量分级，不靠色块。 */
[data-skin="ink"] .pillars-table th{
  background: transparent;
  border-bottom: 1px solid var(--line-strong);
  font-weight: 700;
}

/* 巧思 5：四柱干支的「落墨」。
   字重加大 + 行高收紧 —— 像一笔写下的字，不是排版出来的字。 */
[data-skin="ink"] .pillar .p-gan,
[data-skin="ink"] .pillar .p-zhi{
  font-weight: 800;
  line-height: 1.05;
}

/* 巧思 6：占位符 = 淡墨（不是灰）。
   输入框空着的时候应该有「淡淡的墨痕」，不是一个提示色。 */
[data-skin="ink"] .field input::placeholder,
[data-skin="ink"] .ai-input input::placeholder{
  color: var(--ink-3);
  opacity: .72;
}

/* 巧思 7：聚焦环 = 赭石细环（唯一有彩色落到交互态上，替代系统蓝）。
   用 box-shadow 而非 outline，才能跟着圆角走。 */
[data-skin="ink"] .tab:focus-visible,
[data-skin="ink"] .quick:focus-visible,
[data-skin="ink"] .tl-item:focus-visible,
[data-skin="ink"] .seg:focus-visible{
  outline: none;
  box-shadow: 0 0 0 2px var(--brand-soft), 0 0 0 3px var(--brand);
}

/* 巧思 8：滚动条 = 一条淡墨（不是系统灰条）。
   这是最容易被忽略的「最后一公里」——系统滚动条一出现，整套水墨就出戏。 */
[data-skin="ink"] .tl-scroll::-webkit-scrollbar,
[data-skin="ink"] .detail-scroll::-webkit-scrollbar,
[data-skin="ink"] .ai-msgs::-webkit-scrollbar,
[data-skin="ink"] .rp-toc-side::-webkit-scrollbar{
  width: 8px; height: 8px;
}
[data-skin="ink"] .tl-scroll::-webkit-scrollbar-thumb,
[data-skin="ink"] .detail-scroll::-webkit-scrollbar-thumb,
[data-skin="ink"] .ai-msgs::-webkit-scrollbar-thumb,
[data-skin="ink"] .rp-toc-side::-webkit-scrollbar-thumb{
  background: var(--line-strong);
  border-radius: 0;
}
[data-skin="ink"] .tl-scroll::-webkit-scrollbar-track,
[data-skin="ink"] .detail-scroll::-webkit-scrollbar-track,
[data-skin="ink"] .ai-msgs::-webkit-scrollbar-track,
[data-skin="ink"] .rp-toc-side::-webkit-scrollbar-track{
  background: transparent;
}

/* 巧思 9：报告章序号 = 落款印（赭石实底 + 纸白字）。
   报告面 16,958 字，唯一被允许出现有彩色的地方就是章序号 —— 保持「少而重」。 */
[data-skin="ink"] #page-report .rp-chapno{
  background: var(--brand);
  color: var(--surface);
  border-radius: 2px;
}

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

/* 可视化 1：五行力量条 —— 段与段之间留一道纸白缝。
   水墨画里色块不直接相接，中间一定有留白；这道缝同时提升可读性（分段更清楚）。 */
[data-skin="ink"] .wx-bar{
  gap: 3px;
  background: transparent;
}
[data-skin="ink"] .wx-bar .seg{ border-radius: 0; }

/* 可视化 2：五行图例的色点改成「墨点」——方点，不是圆点。
   方点与直角主张一致，且在小尺寸下比方点更「实」。 */
[data-skin="ink"] .wx-legend .wx-dot{
  border-radius: 0;
  width: 9px; height: 9px;
}

/* 可视化 3：十神档位条 —— 轨道用极淡墨、填充用重墨，形成「一浓一淡」的水墨对比。
   ★ 绘制顺序：轨道 ::before、填充 ::after（::after 画在 ::before 之上）
     —— 反过来会让填充永远被盖住（本项目已踩过的坑）。 */
[data-skin="ink"] .sh-card::before{
  background: var(--line-thin);
  border-radius: 0;
}
[data-skin="ink"] .sh-card::after{
  border-radius: 0;
}