/* XZ 网线线序与网线能力速查 —— 前端样式
   由 staging/cable-pinout/cable-pinout.fragment.html 自动拆分生成，
   **不要直接改这个文件**。改样式请改片段，然后跑: python tools\build_cable_pinout_page.py
   设计令牌对齐站内样式基准（public-ip-check / .xzip），见 docs/tool-style-baseline.md
   线序图里的橙/绿/蓝/棕是**线缆本色**（数据色），不是 UI 令牌。 */

  /* ══════════ 令牌：与基准页 .xzip 逐值一致（全站只有一个蓝 #2f6bff） ══════════ */
  .xznc{
    --xznc-ink:#0f172a; --xznc-ink2:#64748b; --xznc-ink3:#94a3b8; --xznc-ink4:#b9c2cf;
    --xznc-line:#e6eaf2; --xznc-divider:#eef2f7; --xznc-soft:#f1f5f9;
    --xznc-brand:#2f6bff; --xznc-off:#94a3b8;
    --xznc-ok:#16a34a; --xznc-warn:#f59e0b; --xznc-warn-ink:#d97706;
    --xznc-bad:#dc2626; --xznc-idle:#cbd5e1;

    box-sizing:border-box;
    max-width:min(760px,100%);      /* ④ 居中限宽 */
    margin:8px auto 4px;
    font-family:inherit;            /* ③ 不覆盖站点字体 */
    color:var(--xznc-ink); font-size:15px; line-height:1.7;
  }
  .xznc,.xznc *,.xznc *::before,.xznc *::after{box-sizing:border-box}   /* ① 盒模型复位 */

  /* ══════════ 外层卡片 ══════════ */
  .xznc .xz-card{
    border:1px solid var(--xznc-line); border-radius:20px; padding:26px 22px;
    background:linear-gradient(180deg,#fbfcff,#fff);
  }
  .xznc h3{margin:0 0 6px; font-size:20px; font-weight:600; line-height:1.4; font-family:inherit}
  /* ② 干掉主题的装饰字符：Sakurairo 给 h3→"#"、h4→">"、h5→"~"，h3~h6 必须全列 */
  .xznc h1::before,.xznc h1::after,
  .xznc h2::before,.xznc h2::after,
  .xznc h3::before,.xznc h3::after,
  .xznc h4::before,.xznc h4::after,
  .xznc h5::before,.xznc h5::after,
  .xznc h6::before,.xznc h6::after{content:none !important; display:none !important}
  /* 兜底：主题把 .entry-content p 设成 16px/30px，控件里的段落自己说了算 */
  .xznc p{margin:0; font-size:13.5px; line-height:1.75; color:var(--xznc-ink2)}
  .xznc .xz-sub{margin:0 auto 18px; max-width:600px; font-size:14px; line-height:1.85; color:var(--xznc-ink2)}

  /* ══════════ 分段标题 ══════════ */
  .xznc .xznc-sec{margin:24px 0 0; padding-top:20px; border-top:1px solid var(--xznc-divider)}
  .xznc .xznc-sec-t{
    display:flex; align-items:center; gap:9px; margin:0 0 5px;
    font-size:15.5px; font-weight:600; color:var(--xznc-ink); line-height:1.5;
  }
  .xznc .xznc-sec-t i{
    width:22px; height:22px; flex:0 0 22px; border-radius:7px; background:var(--xznc-brand);
    color:#fff; font-size:12.5px; font-weight:600; font-style:normal; line-height:22px; text-align:center;
  }
  .xznc .xznc-sec-d{margin:0 0 13px; font-size:13px; color:var(--xznc-ink2); line-height:1.75}
  .xznc .xznc-sec-d b{color:var(--xznc-ink); font-weight:600}

  /* ══════════ 分段控件（线序切换 / 速率切换） ══════════ */
  .xznc .xznc-seg{display:flex; flex-wrap:wrap; gap:8px}
  .xznc .xznc-seg button{
    appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer;
    font-size:13.5px; line-height:1.4; padding:7px 15px; border-radius:999px; color:var(--xznc-ink2);
    background:var(--xznc-soft); border:1px solid var(--xznc-line); transition:.16s;
  }
  .xznc .xznc-seg button:hover{border-color:#cbd5e1; color:var(--xznc-ink)}
  .xznc .xznc-seg button.is-on{
    color:#fff; font-weight:600; border-color:transparent; background:var(--xznc-brand);
    box-shadow:0 8px 18px -12px var(--xznc-brand);
  }

  /* ══════════ 八芯线序图 ══════════ */
  .xznc .xznc-rowlabel{
    display:flex; align-items:center; gap:8px; margin:16px 0 8px;
    font-size:12.5px; color:var(--xznc-ink3);
  }
  .xznc .xznc-rowlabel b{color:var(--xznc-ink2); font-weight:600}
  .xznc .xznc-pins{display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:7px}
  .xznc .xznc-pin{
    appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    padding:9px 4px 8px; border:1px solid var(--xznc-line); border-radius:12px; background:#fff;
    transition:border-color .16s, transform .16s, box-shadow .16s, opacity .16s;
  }
  .xznc .xznc-pin:hover{border-color:#cbd5e1; transform:translateY(-1px)}
  .xznc .xznc-pin.is-on{border-color:var(--xznc-brand); box-shadow:0 0 0 2px rgba(47,107,255,.16)}
  .xznc .xznc-pin.is-dim{opacity:.35}
  .xznc .xznc-pin-n{
    font-size:11.5px; font-weight:600; color:var(--xznc-ink2);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  .xznc .xznc-wire{
    width:100%; height:26px; border-radius:6px; background:var(--xznc-wc,#cbd5e1);
    border:1px solid rgba(15,23,42,.08);
  }
  .xznc .xznc-wire.tip{background:repeating-linear-gradient(45deg,#fff 0 5px,var(--xznc-wc) 5px 10px)}
  .xznc .xznc-pin-c{font-size:12.5px; font-weight:600; color:var(--xznc-ink); line-height:1.25}
  .xznc .xznc-pin-p{font-size:11px; color:var(--xznc-ink3); line-height:1.2}

  /* ══════════ 线对图例（可点，与引脚联动高亮） ══════════ */
  .xznc .xznc-pairs{display:flex; flex-wrap:wrap; gap:8px; margin:14px 0 0}
  .xznc .xznc-pair{
    appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer;
    font-size:13px; color:var(--xznc-ink2);
    display:inline-flex; align-items:center; gap:7px; padding:6px 13px;
    border:1px solid var(--xznc-line); border-radius:999px; background:#fff; transition:.16s;
  }
  .xznc .xznc-pair i{width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--xznc-wc,#cbd5e1)}
  .xznc .xznc-pair:hover{border-color:#cbd5e1}
  .xznc .xznc-pair.is-on{border-color:var(--xznc-brand); color:var(--xznc-ink); font-weight:600}

  /* ══════════ 结论框（线序 / 速率共用） ══════════ */
  .xznc .xznc-out{
    margin-top:14px; padding:14px 16px; border:1px solid var(--xznc-line);
    border-radius:16px; background:#fff;
  }
  .xznc .xznc-out-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
  .xznc .xznc-out-k{margin:0; font-size:12.5px; color:var(--xznc-ink2)}
  .xznc .xznc-seq{
    margin:7px 0 0; font-size:14px; font-weight:600; color:var(--xznc-ink); line-height:1.95;
    word-break:break-word;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  }
  .xznc .xznc-out-d{margin:9px 0 0; font-size:13px; color:var(--xznc-ink2); line-height:1.75}
  .xznc .xznc-out-d b{color:var(--xznc-ink); font-weight:600}
  .xznc .xznc-copy{
    appearance:none; -webkit-appearance:none; font-family:inherit; cursor:pointer;
    font-size:12.5px; line-height:1.4; padding:5px 12px; border-radius:999px; color:var(--xznc-ink2);
    border:1px solid var(--xznc-line); background:var(--xznc-soft); transition:.16s;
  }
  .xznc .xznc-copy:hover{border-color:#cbd5e1}
  .xznc .xznc-copy.is-done{color:var(--xznc-ok); border-color:#bbf7d0; background:#f0fdf4}

  /* ══════════ 速率 → 线材结果 ══════════ */
  .xznc .xznc-res{display:grid; gap:8px; margin-top:13px}
  .xznc .xznc-res-i{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    border:1px solid var(--xznc-line); border-radius:12px; padding:10px 13px; background:#fff;
  }
  .xznc .xznc-res-i.no{background:var(--xznc-soft); border-style:dashed}
  .xznc .xznc-res-i.best{border-color:#bfd3ff; background:#f7f9ff}
  .xznc .xznc-res-n{font-size:13.5px; font-weight:600; color:var(--xznc-ink); line-height:1.5}
  .xznc .xznc-res-n span{margin-left:6px; font-size:12px; font-weight:400; color:var(--xznc-ink3)}
  .xznc .xznc-res-v{font-size:13.5px; font-weight:600; color:var(--xznc-ink); white-space:nowrap}
  .xznc .xznc-res-v small{display:block; font-size:11.5px; font-weight:400; color:var(--xznc-ink3); white-space:nowrap}
  .xznc .xznc-res-i.no .xznc-res-v{color:var(--xznc-ink3); font-weight:400}
  .xznc .xznc-verdict{
    margin:13px 0 0; padding:11px 14px; font-size:13.5px; line-height:1.8; color:var(--xznc-ink2);
    border-left:3px solid var(--xznc-brand); border-radius:0 12px 12px 0; background:#f7f9ff;
  }
  .xznc .xznc-verdict b{color:var(--xznc-ink); font-weight:600}

  /* ══════════ 速查表格 ══════════ */
  .xznc .xznc-scroll{overflow-x:auto; margin-top:4px; -webkit-overflow-scrolling:touch}
  .xznc table.xznc-tbl{
    width:100%; min-width:520px; border-collapse:separate; border-spacing:0;
    margin:0; font-size:13px; background:none; border:0;
  }
  .xznc table.xznc-tbl th,.xznc table.xznc-tbl td{
    padding:9px 11px; text-align:left; vertical-align:top; line-height:1.65;
    border:0; border-bottom:1px solid var(--xznc-divider); background:none;
  }
  /* 主题有 .entry-content th{color:white}，表头颜色必须显式写死 */
  .xznc table.xznc-tbl th{
    font-size:12px; font-weight:600; color:var(--xznc-ink2); white-space:nowrap;
    border:0; border-bottom:1px solid var(--xznc-line);
  }
  .xznc table.xznc-tbl td{color:var(--xznc-ink2)}
  .xznc table.xznc-tbl td:first-child{color:var(--xznc-ink); font-weight:600; white-space:nowrap}
  .xznc table.xznc-tbl tr:last-child td{border-bottom:0}
  .xznc table.xznc-tbl .xznc-num{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12.5px; white-space:nowrap;
  }
  .xznc table.xznc-tbl .xznc-yes{color:var(--xznc-ok); font-weight:600}

  /* ══════════ 折叠区（水晶头压线步骤） ══════════ */
  .xznc details.xz-fold{
    display:block !important; width:100% !important;
    border:1px solid var(--xznc-line); border-radius:16px; padding:15px 19px;
    background:linear-gradient(180deg,#fbfcff,#fff); margin:0 0 11px;
  }
  .xznc details.xz-fold > summary{
    display:block !important; width:auto !important; float:none !important;
    text-align:left !important; list-style:none !important;
    cursor:pointer; font-size:14.5px; font-weight:600; color:var(--xznc-ink);
    position:relative; padding:0 30px 0 0; margin:0;
  }
  .xznc details.xz-fold > summary::-webkit-details-marker{display:none !important}
  .xznc details.xz-fold > summary::marker{content:none !important}
  .xznc details.xz-fold > summary::after{
    content:"+" !important; position:absolute; right:0; top:50%; transform:translateY(-50%);
    font-size:19px; font-weight:400; color:var(--xznc-ink3); line-height:1;
  }
  .xznc details.xz-fold[open] > summary::after{content:"−" !important}
  .xznc details.xz-fold > p{margin:12px 0 0; font-size:13.5px; color:var(--xznc-ink2); line-height:1.8}

  /* ══════════ 脚注 ══════════ */
  .xznc .xz-note{margin:14px auto 0; font-size:12px; color:var(--xznc-ink3); line-height:1.8; text-align:center}

  /* ══════════ 响应式：唯一断点 640px ══════════ */
  @media (max-width:640px){
    .xznc .xz-card{padding:20px 15px}
    .xznc .xz-sub{max-width:none}
    .xznc .xznc-pins{grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px}
    .xznc .xznc-res-i{flex-direction:column; align-items:flex-start; gap:3px}
    .xznc .xznc-res-v{white-space:normal}
    .xznc .xznc-res-v small{display:inline; margin-left:6px}
    /* 窄屏不横滚：表格改成一张张「卡片」，列名用 data-l 前置 */
    .xznc .xznc-scroll{overflow-x:visible}
    .xznc table.xznc-tbl{min-width:0; font-size:13px}
    .xznc table.xznc-tbl thead{display:none}
    .xznc table.xznc-tbl tbody,.xznc table.xznc-tbl tr,.xznc table.xznc-tbl td{display:block; width:auto}
    .xznc table.xznc-tbl tr{
      border:1px solid var(--xznc-line); border-radius:12px; padding:9px 11px; margin:0 0 8px; background:#fff;
    }
    .xznc table.xznc-tbl td{border:0; padding:2px 0; font-size:12.5px; line-height:1.7}
    .xznc table.xznc-tbl td:first-child{font-size:14px; margin-bottom:3px; padding-bottom:4px; white-space:normal}
    .xznc table.xznc-tbl td:not(:first-child)::before{
      content:attr(data-l) "：" !important; color:var(--xznc-ink3); font-size:11.5px;
    }
    .xznc table.xznc-tbl tr:last-child{margin-bottom:0}
  }