/* 技能与使用指南页（skills.html）专用样式
   全部限定在 body[data-tp="skills"] 下，不动其他页面。 */

body[data-tp="skills"] .toc{
  margin:18px 0 8px;padding:16px 18px;background:#fff;border:1px solid var(--bd);
  border-radius:14px;box-shadow:var(--shadow-s);
}
body[data-tp="skills"] .toc b{display:block;font-size:13px;color:var(--ink);margin-bottom:8px}
body[data-tp="skills"] .toc a{
  display:inline-block;margin:4px 14px 4px 0;font-size:13px;color:var(--accent2);
  text-decoration:none;border-bottom:1px solid rgba(222,91,51,.28)
}

body[data-tp="skills"] .grp{margin-top:38px}
body[data-tp="skills"] .grp>h3{
  font-size:15px;color:var(--ink);margin:0 0 4px;display:flex;align-items:center;gap:8px
}
body[data-tp="skills"] .grp>h3::before{
  content:"";width:9px;height:9px;background:var(--red);flex:0 0 9px
}
body[data-tp="skills"] .grp>.note{font-size:12.5px;color:var(--mid);margin:0 0 12px}

body[data-tp="skills"] table.sk{
  width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--bd);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow-s)
}
body[data-tp="skills"] table.sk th,
body[data-tp="skills"] table.sk td{
  text-align:left;padding:10px 12px;font-size:12.5px;line-height:1.7;
  border-bottom:1px solid #F1EDE4;vertical-align:top
}
body[data-tp="skills"] table.sk th{background:#FBF9F4;color:var(--ink);font-weight:600;font-size:12px}
body[data-tp="skills"] table.sk tr:last-child td{border-bottom:none}
body[data-tp="skills"] table.sk td:first-child{color:var(--ink);width:19%}
body[data-tp="skills"] table.sk td:nth-child(2){color:var(--mid);width:50%}
body[data-tp="skills"] table.sk td:last-child{width:31%;white-space:normal}

body[data-tp="skills"] .st{font-size:11.5px;padding:1px 7px;border-radius:999px;display:inline-block}
body[data-tp="skills"] .st.ok{background:#E8F3EA;color:#2E6B3D}
body[data-tp="skills"] .st.wait{background:#FBF1E2;color:#8A5A18}
body[data-tp="skills"] .st.need{background:#F1EDE4;color:#6B6459}

body[data-tp="skills"] .step{margin:10px 0;padding:14px 16px;background:#fff;border:1px solid var(--bd);border-radius:12px}
body[data-tp="skills"] .step b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:4px}
body[data-tp="skills"] .step p{font-size:12.5px;color:var(--mid);line-height:1.85;margin:0}
body[data-tp="skills"] .step code{
  background:#F6F2EA;border:1px solid #EDE7DA;border-radius:5px;padding:1px 5px;font-size:12px
}

body[data-tp="skills"] .say{margin:8px 0 0;padding:0;list-style:none}
body[data-tp="skills"] .say li{
  padding:7px 0;border-bottom:1px dashed #EFE9DD;font-size:12.5px;color:var(--ink2)
}
body[data-tp="skills"] .say li:last-child{border-bottom:none}
body[data-tp="skills"] .say li i{color:var(--mid);font-style:normal;font-size:12px;margin-left:8px}

body[data-tp="skills"] .warn{
  margin-top:16px;padding:14px 16px;border-radius:12px;background:#FDF6F4;
  border:1px solid #F0D9D1;font-size:12.5px;color:#7A4436;line-height:1.85
}
body[data-tp="skills"] .warn b{color:#8A3B26}

/* 窄屏：表格变卡片式，避免横向挤压 */
@media (max-width:767px){
  body[data-tp="skills"] table.sk,
  body[data-tp="skills"] table.sk thead,
  body[data-tp="skills"] table.sk tbody,
  body[data-tp="skills"] table.sk tr,
  body[data-tp="skills"] table.sk td{display:block;width:100%}
  body[data-tp="skills"] table.sk thead{display:none}
  body[data-tp="skills"] table.sk tr{
    border-bottom:1px solid #F1EDE4;padding:10px 12px
  }
  body[data-tp="skills"] table.sk td{border:none;padding:2px 0;white-space:normal}
  body[data-tp="skills"] table.sk td:first-child{font-size:13.5px;font-weight:600}
}

/* 2K / 4K：跟着视口放大（只影响本页） */
@media (min-width:1600px){
  body[data-tp="skills"] table.sk th,
  body[data-tp="skills"] table.sk td{font-size:13.5px;padding:12px 14px}
  body[data-tp="skills"] .step p,
  body[data-tp="skills"] .say li{font-size:13.5px}
  body[data-tp="skills"] .grp>h3{font-size:16.5px}
}
@media (min-width:1920px){
  body[data-tp="skills"] .sect{max-width:min(2200px, 62vw);padding:72px 36px}
  body[data-tp="skills"] .sect .lede{font-size:calc(10px + 0.28vw);max-width:60em;padding-left:0}
  body[data-tp="skills"] .sect>.subh{font-size:calc(16px + 0.45vw)}
  body[data-tp="skills"] table.sk th,
  body[data-tp="skills"] table.sk td{font-size:calc(9px + 0.24vw);padding:calc(8px + 0.35vw) calc(10px + 0.4vw)}
  body[data-tp="skills"] .grp>h3{font-size:calc(13px + 0.34vw)}
  body[data-tp="skills"] .grp>.note,
  body[data-tp="skills"] .step p,
  body[data-tp="skills"] .say li{font-size:calc(9px + 0.24vw)}
  body[data-tp="skills"] .step b,
  body[data-tp="skills"] .toc b{font-size:calc(12px + 0.22vw)}
  body[data-tp="skills"] .toc a{font-size:calc(9px + 0.24vw)}
  body[data-tp="skills"] .st{font-size:calc(8px + 0.2vw)}
  body[data-tp="skills"] .warn{font-size:calc(9px + 0.24vw)}
}


/* 分级徽标 A/B/C/D（只在本页） */
body[data-tp="skills"] .lv{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:6px;font-size:12px;font-weight:700;margin-right:6px;
  color:#fff;vertical-align:middle;
}
body[data-tp="skills"] .lv.a{background:#5B7C63}
body[data-tp="skills"] .lv.b{background:#B08020}
body[data-tp="skills"] .lv.c{background:#C2542B}
body[data-tp="skills"] .lv.d{background:#7A2A22}
@media (min-width:1920px){
  body[data-tp="skills"] .lv{width:calc(22px + 0.2vw);height:calc(22px + 0.2vw);font-size:calc(12px + 0.1vw)}
}


/* 分级规则标题与其它小标题同一套（红方块 + 间距） */
body[data-tp="skills"] h3#rules{
  display:flex;align-items:center;gap:8px;font-size:15px;color:var(--ink);
}
body[data-tp="skills"] h3#rules::before{
  content:"";width:9px;height:9px;background:var(--red);flex:0 0 9px;
}
@media (min-width:1920px){
  body[data-tp="skills"] h3#rules{font-size:calc(13px + 0.34vw)}
}


/* 看家模式「怎么用」四步（2026-10-27）
   **必须按浅色主题写**：这一页是白底卡片，之前误用了深色主题的米白字，
   在浅底上等于隐身（用户看到的就是"渲染错误"）。 */
body[data-tp="skills"] .howto{
  margin:16px 0 4px;padding:16px 18px;background:#fff;border:1px solid var(--bd);
  border-radius:12px;box-shadow:var(--shadow-s);
}
body[data-tp="skills"] .howto h4{
  margin:0 0 10px;font-size:14px;font-weight:600;color:var(--ink);letter-spacing:.02em
}
body[data-tp="skills"] .howto ol{
  margin:0;padding-left:20px;color:var(--ink);font-size:12.5px;line-height:1.9
}
body[data-tp="skills"] .howto ol li{margin-bottom:8px}
body[data-tp="skills"] .howto ol li b{color:var(--ink);font-weight:600}
body[data-tp="skills"] .howto .note{
  margin:10px 0 0;font-size:12px;line-height:1.8;color:var(--mid)
}
body[data-tp="skills"] .howto .note b{color:var(--red)}

/* 段落里的 <b> 必须保持行内：.step b 是块级（用于步骤标题），
   但它连正文里的「小蝶」「C 级」也一起变成了块，导致一句话被拆成三行（2026-10-27 修） */
body[data-tp="skills"] .step p b{display:inline;margin-bottom:0}

/* 卡片内脚注行（2026-10-27）：原来「需要先开…」「另外两条硬规则…」是浮在卡片外的裸文字，
   既挤在两块卡片之间、又像漏出来的备注。改成表格最后一行，和卡片是一个整体；
   分组间距同时从 30 拉到 38。 */
body[data-tp="skills"] table.sk tfoot td{
  background:rgba(16,20,24,.035);
  border-top:1px solid var(--bd);
  color:var(--mid);
  font-size:12px;line-height:1.75;
  padding:12px 12px;
}
body[data-tp="skills"] table.sk tfoot td b{color:var(--ink);font-weight:600}


/* ── 分页（2026-10-28）：技能页太长，一次只显示一页 ── */
.pg { display: none; }
.pg.on { display: block; }

/* 当前页：软底 + 小圆点，不再是整块橙底（那样太重） */
.toc a.on {
  background: #FCEBE3;
  color: #C8471F;
  box-shadow: inset 0 0 0 1px rgba(200, 71, 31, .30);
}
.toc a.on::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 7px;
}

.pager {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 8px;
  padding-top: 14px;
  border-top: 1px solid var(--line, #E6E1D6);
}
.pager .cnt {
  font-size: 13px;
  color: var(--sub, #7A756B);
  margin-right: auto;
}
.pager button {
  font: inherit;
  font-size: 13.5px;
  padding: 8px 16px;
  border-radius: 10px;
  border: 1px solid var(--line, #E6E1D6);
  background: #fff;
  color: var(--ink, #23201C);
  cursor: pointer;
}
.pager button:disabled {
  opacity: .4;
  cursor: default;
}
.pager button:hover:not(:disabled) {
  border-color: var(--acc, #DE5B33);
  color: var(--acc, #DE5B33);
}


/* ── 目录：改成干净的胶囊条（2026-10-28 用户反馈"选中太丑"）── */
body[data-tp="skills"] .toc{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;
  padding:12px 14px;background:#fff;border:1px solid var(--bd);
  border-radius:14px;box-shadow:none;margin:16px 0 6px;
}
body[data-tp="skills"] .toc .toc-cap{
  display:inline-block;margin:0 6px 0 0;padding:0;font-size:12px;
  color:var(--mid);font-weight:500;letter-spacing:.02em;
}
body[data-tp="skills"] .toc a{
  display:inline-flex;align-items:center;margin:0;padding:6px 12px;
  font-size:12.5px;line-height:1.2;color:#5C574E;text-decoration:none;
  background:#F7F4EC;border:0;border-radius:999px;
  transition:background .14s,color .14s,box-shadow .14s;
}
body[data-tp="skills"] .toc a:hover{background:#F1ECE0;color:var(--ink)}
body[data-tp="skills"] .toc a.on{
  background:#FCEBE3;color:#C8471F;font-weight:600;
  box-shadow:inset 0 0 0 1px rgba(200,71,31,.30);
}
body[data-tp="skills"] .toc a.toc-sub{
  font-size:12px;padding:4px 9px;color:#8A8478;background:transparent;
  box-shadow:inset 0 0 0 1px #E7E1D5;
}
body[data-tp="skills"] .toc a.toc-sub:hover{background:#F7F4EC;color:var(--ink)}


/* 分页之后不要再给 .sect 做滚动淡入：一次只显示一页，高度一直在变，
   淡入的判断会失准（实测会整页透明）。这一页直接常显。 */
body[data-tp="skills"] .sect.rv{
  opacity:1 !important;transform:none !important;
}


/* 2026-10-28：分页翻页的渐显。
   技能页一页一个块（.pg），块里的内容不是 .sect/.card，全站的 IntersectionObserver
   根本抓不到它们，所以之前翻页是硬切。这里给"当前页"的每个直接子元素加一段入场动画，
   并按顺序错开，手感和其它页面"一块一块浮上来"一致。
   系统开了"减少动态效果"就不播。 */
@keyframes skPageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
body[data-tp="skills"] .pg.on > * {
  animation: skPageIn .45s cubic-bezier(.2,.7,.3,1) both;
}
body[data-tp="skills"] .pg.on > *:nth-child(2)  { animation-delay: .04s; }
body[data-tp="skills"] .pg.on > *:nth-child(3)  { animation-delay: .08s; }
body[data-tp="skills"] .pg.on > *:nth-child(4)  { animation-delay: .12s; }
body[data-tp="skills"] .pg.on > *:nth-child(5)  { animation-delay: .16s; }
body[data-tp="skills"] .pg.on > *:nth-child(6)  { animation-delay: .20s; }
body[data-tp="skills"] .pg.on > *:nth-child(7)  { animation-delay: .24s; }
body[data-tp="skills"] .pg.on > *:nth-child(8)  { animation-delay: .28s; }
body[data-tp="skills"] .pg.on > *:nth-child(n+9){ animation-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  body[data-tp="skills"] .pg.on > * { animation: none; }
}