/* ==========================================================================
   clash.fyi 设计系统 · 组件层
   跨页面组件:Hero 版画 / 端子板 tab / toc / FAQ / 术语卡 / 客户端卡 /
   文章卡 / callout / 代码票签 / 表格 / 徽章 / dl-fab / 文末引导卡 / 色板
   ========================================================================== */

/* ================= Hero 版画(首页首屏,已拍板视觉) ================= */

.hero{
  display:grid;
  grid-template-columns:minmax(400px,470px) 1fr;
  align-items:center;
  gap:16px;
  padding-top:12px;
  padding-bottom:8px;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  min-height:0;
}
.hero > *{min-width:0;}
.hero-copy{padding-bottom:24px;}
.kicker{
  font-family:var(--ft-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--flame);
  margin-bottom:18px;
}
.hero-copy h1{
  font-family:var(--ft-display);
  font-weight:900;
  font-size:clamp(52px,5.3vw,78px);
  line-height:1.06;
  letter-spacing:-1.5px;
  color:var(--ink);
  margin-bottom:22px;
}
.hero-copy h1 .mark{
  display:inline-block;
  background:var(--volt);
  color:var(--ink);
  border:var(--rule-thick);
  border-radius:12px;
  padding:0 14px 4px;
  transform:rotate(-1.2deg);
}
.lead{
  font-size:16.5px;
  line-height:1.8;
  max-width:44ch;
  color:var(--ink);
  margin-bottom:30px;
}
.lead strong{
  font-weight:800;
  border-bottom:4px solid var(--volt);
  padding-bottom:1px;
}
.cta{
  display:flex;
  gap:16px;
  margin-bottom:28px;
  flex-wrap:wrap;
}

/* 关键词胶囊行 */
.chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.chips li{min-width:0;}
.chips a{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--ft-mono);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  border:2px solid var(--ink);
  border-radius:var(--rad-pill);
  padding:6px 15px;
  background:var(--card);
}
.chips a:hover{background:var(--ink);color:var(--volt);}

/* —— 首屏装置:猫尾电缆接线图(内联 SVG) —— */
.hero-scene{
  min-width:0;
  margin-left:-28px;
  align-self:center;
}
.scene{
  display:block;
  width:100%;
  height:auto;
  max-height:calc(100vh - 176px);
}
.cable{fill:none;stroke:var(--ink);stroke-linecap:round;}
.trunk{stroke-width:9;}
.branch{stroke-width:3.5;}
.f-ink{fill:var(--ink);}
.f-acc{fill:var(--volt);}
.jbox{fill:var(--card);stroke:var(--ink);stroke-width:3.5;}
.jbox-dash{fill:none;stroke:var(--flame);stroke-width:1.5;stroke-dasharray:5 6;}
.jb-a{font:600 12px var(--ft-mono);fill:var(--ink);text-anchor:middle;letter-spacing:1.5px;}
.jb-b{font:700 17px var(--ft-mono);fill:var(--ink);text-anchor:middle;}
.sig{font:500 13px var(--ft-mono);fill:var(--ink);letter-spacing:1px;}
.socket-body{fill:var(--card);stroke:var(--ink);stroke-width:3;}
.socket:hover .socket-body,
.socket:focus-visible .socket-body{fill:var(--volt);}
.plat-name{font:800 19px var(--ft-display);fill:var(--ink);letter-spacing:.2px;}
.plat-sub{font:500 12px var(--ft-mono);fill:var(--ink);opacity:.72;}
.arrow{fill:none;stroke:var(--ink);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.prong{
  fill:var(--volt);
  stroke:var(--ink);
  stroke-width:1.5;
  animation:breath 2.8s ease-in-out infinite;
}
.p2 .prong{animation-delay:.45s;}
.p3 .prong{animation-delay:.9s;}
.p4 .prong{animation-delay:1.35s;}
.p5 .prong{animation-delay:1.8s;}
@keyframes breath{
  0%,100%{opacity:1;}
  50%{opacity:.3;}
}

/* —— 首屏底部墨色检修带 —— */
.peek{
  display:flex;
  align-items:center;
  gap:20px;
  height:46px;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  background:var(--ink);
  border-top:var(--rule-thick);
  color:var(--paper);
  font-family:var(--ft-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:1px;
}
.peek span{white-space:nowrap;}
.peek-line{
  flex:1;
  min-width:24px;
  border-top:3px dashed var(--paper);
  opacity:.5;
}
.peek-tag{
  border:2px solid var(--paper);
  border-radius:6px;
  padding:2px 10px;
  color:var(--volt);
}

/* ================= 端子板 tab(特性区/下载页平台切换) ================= */

.term-board{margin-top:34px;}

/* 干线电缆 + 接线端子 */
.term-rail{
  position:relative;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding-left:8px;
  padding-right:8px;
  margin-bottom:26px;
}
.term-rail::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:11px;
  height:6px;
  background:var(--ink);
  border-radius:3px;
}
.term-node{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:0 6px;
  min-width:44px;
  min-height:44px;
  font-family:var(--ft-body);
}
.term-pin{
  width:28px;
  height:28px;
  border-radius:50%;
  border:4px solid var(--ink);
  background:var(--paper);
  flex-shrink:0;
}
.term-node:hover .term-pin{background:var(--card-2);}
.term-node[aria-selected="true"] .term-pin{background:var(--volt);}
.term-no{
  font-family:var(--ft-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:1px;
  color:var(--ink-soft);
}
.term-node[aria-selected="true"] .term-no{color:var(--flame);}
.term-label{
  font-weight:700;
  font-size:14.5px;
  line-height:1.35;
  color:var(--ink);
  text-align:center;
}
.term-node[aria-selected="true"] .term-label{color:var(--flame);}

/* 纸白票签面板:左上角等宽编号像检修工单 */
.term-panel{
  position:relative;
  background:var(--panel);
  border:var(--rule-thick);
  border-radius:var(--rad-lg);
  padding:26px 28px 28px;
}
.term-panel[hidden]{display:none;}
.term-ticket{
  display:inline-block;
  font-family:var(--ft-mono);
  font-size:13px;
  font-weight:700;
  letter-spacing:1px;
  background:var(--card);
  border:var(--rule);
  border-radius:6px;
  padding:2px 12px;
  margin-bottom:14px;
}
.term-panel h3{margin-bottom:10px;}
.term-panel p{
  font-size:15px;
  line-height:1.9;
  max-width:72ch;
}

@media (max-width:720px){
  .term-rail{
    flex-direction:column;
    align-items:stretch;
    gap:2px;
    padding-left:2px;
    padding-right:2px;
  }
  .term-rail::before{
    left:15px;
    right:auto;
    top:0;
    bottom:0;
    width:6px;
    height:auto;
  }
  .term-node{
    flex-direction:row;
    justify-content:flex-start;
    gap:14px;
    padding-top:10px;
    padding-bottom:10px;
    text-align:left;
  }
  .term-label{text-align:left;}
}

/* ================= 长页分类跳转导航(toc) ================= */

.toc-tabs{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding-top:6px;
  padding-bottom:12px;
  -webkit-overflow-scrolling:touch;
}
.toc-tabs a{
  flex-shrink:0;
  font-family:var(--ft-mono);
  font-size:13px;
  font-weight:600;
  border:var(--rule);
  border-radius:var(--rad-pill);
  padding:8px 18px;
  background:var(--card);
  white-space:nowrap;
}
.toc-tabs a:hover{background:var(--volt);}

/* ================= FAQ 折叠项 ================= */

.faq-item{
  background:var(--card);
  border:var(--rule);
  border-radius:var(--rad-md);
  margin-bottom:14px;
  overflow:hidden;
}
.faq-item summary{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 20px;
  font-weight:700;
  font-size:15.5px;
  cursor:pointer;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-key{
  flex-shrink:0;
  width:26px;
  height:26px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:var(--rule);
  border-radius:8px;
  background:var(--volt);
  font-family:var(--ft-mono);
  font-size:14px;
  font-weight:700;
}
.faq-item summary::after{
  content:"+";
  margin-left:auto;
  flex-shrink:0;
  font-family:var(--ft-mono);
  font-size:20px;
  font-weight:700;
}
.faq-item[open] summary::after{content:"−";}
.faq-item[open] summary{
  background:var(--panel);
  border-bottom:1px dashed var(--ink-25);
}
.faq-a{
  padding:16px 20px 20px;
  font-size:15px;
  line-height:1.9;
}

/* ================= 术语卡 ================= */

.gloss-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:16px;
}
.gloss-grid > *{min-width:0;}
.gloss-card{
  background:var(--card);
  border:var(--rule);
  border-radius:var(--rad-md);
  padding:18px 20px;
}
.gloss-cat{
  display:inline-block;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--ft-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:1px;
  color:var(--flame);
  border:2px solid var(--flame);
  border-radius:var(--rad-pill);
  padding:2px 10px;
  margin-bottom:10px;
}
.gloss-term{
  font-size:17px;
  font-weight:800;
  margin-bottom:8px;
}
.gloss-card p{
  font-size:14px;
  line-height:1.8;
}

/* ================= 下载客户端卡片 ================= */

.client-stack{
  display:grid;
  gap:18px;
}
.client-stack > *{min-width:0;}
.client-card{
  background:var(--card);
  border:var(--rule-thick);
  border-radius:var(--rad-lg);
  padding:22px 24px;
}
.client-head{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
.client-ic{
  width:52px;
  height:52px;
  flex-shrink:0;
}
.client-name{
  font-size:20px;
  font-weight:900;
  font-family:var(--ft-display);
}
.client-meta{
  font-family:var(--ft-mono);
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:12px;
  overflow-wrap:anywhere;
}
.client-note{
  font-size:14.5px;
  line-height:1.85;
  margin-bottom:16px;
  max-width:76ch;
}
.client-dl{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* 徽章:首推 / 推荐 / 已停止维护(内容可能来自数据,自带宽度防御) */
.tag{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--ft-mono);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.5px;
  border:2px solid var(--ink);
  border-radius:6px;
  padding:3px 10px;
}
.tag-top{background:var(--volt);}
.tag-rec{background:var(--card-2);}
.tag-eol{background:var(--ink);color:var(--paper);}

/* 等宽小票签(版本号/事实徽记) */
.stamp{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--ft-mono);
  font-size:12px;
  font-weight:600;
  border:var(--rule);
  border-radius:6px;
  padding:3px 10px;
  background:var(--card);
}

/* ================= 博客文章卡 ================= */

.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:18px;
}
.post-grid > *{min-width:0;}
.post-card{
  display:flex;
  flex-direction:column;
  gap:10px;
  background:var(--card);
  border:var(--rule);
  border-radius:var(--rad-lg);
  padding:20px 22px;
  transition:transform .18s ease,background .18s ease;
}
.post-card:hover{
  transform:translateY(-3px);
  background:var(--panel);
}
.post-head{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.post-date{
  font-family:var(--ft-mono);
  font-size:12px;
  color:var(--ink-soft);
  flex-shrink:0;
}
.post-tag{
  display:inline-flex;
  align-items:center;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--ft-mono);
  font-size:11px;
  font-weight:600;
  letter-spacing:.5px;
  color:var(--flame);
  border:2px solid var(--flame);
  border-radius:var(--rad-pill);
  padding:1px 10px;
}
.post-card h3{
  font-size:16.5px;
  line-height:1.5;
}
.post-card p{
  font-size:13.5px;
  line-height:1.75;
  color:var(--ink-soft);
}
.post-more{
  margin-top:auto;
  font-family:var(--ft-mono);
  font-size:12.5px;
  font-weight:700;
  color:var(--flame);
}

/* 文章面包屑(与页头留呼吸间距) */
.crumbs{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  font-family:var(--ft-mono);
  font-size:12.5px;
  margin-top:24px;
  margin-bottom:20px;
}
.crumbs a{color:var(--flame);}
.crumbs a:hover{text-decoration:underline;text-underline-offset:4px;}
.crumbs .sep{color:var(--ink-soft);}

/* 上一篇/下一篇 */
.post-nav{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
  margin-top:26px;
}
.post-nav > *{min-width:0;}
.post-nav a{
  display:block;
  background:var(--card);
  border:var(--rule);
  border-radius:var(--rad-md);
  padding:14px 18px;
  font-size:14px;
  line-height:1.55;
}
.post-nav a:hover{background:var(--volt);}
.post-nav .nav-dir{
  display:block;
  font-family:var(--ft-mono);
  font-size:11px;
  letter-spacing:1px;
  color:var(--ink-soft);
  margin-bottom:6px;
}
@media (max-width:560px){
  .post-nav{grid-template-columns:1fr;}
}

/* ================= callout 引用块 ================= */

.callout{
  background:var(--panel);
  border:var(--rule);
  border-left:8px solid var(--flame);
  border-radius:var(--rad-md);
  padding:16px 20px;
  margin-top:20px;
  margin-bottom:20px;
  font-size:14.5px;
  line-height:1.85;
}
.callout.ok{border-left-color:var(--ok);}
.callout.warn{border-left-color:var(--warn);}
.callout.err{border-left-color:var(--err);}
.callout-t{
  display:block;
  font-weight:800;
  margin-bottom:6px;
}

/* ================= 代码票签 ================= */

.code-slip{
  background:var(--ink);
  color:var(--paper);
  border:var(--rule);
  border-radius:var(--rad-md);
  padding:16px 18px;
  overflow-x:auto;
  font-family:var(--ft-mono);
  font-size:13px;
  line-height:1.7;
  margin-top:18px;
  margin-bottom:18px;
}
.code-slip code{font-family:inherit;background:none;}

/* 行内代码 */
p code,li code,td code{
  font-family:var(--ft-mono);
  font-size:.9em;
  background:var(--card-2);
  border:1px solid var(--ink-25);
  border-radius:5px;
  padding:1px 6px;
  overflow-wrap:anywhere;
}

/* ================= 表格 ================= */

.sheet-wrap{
  overflow-x:auto;
  border:var(--rule);
  border-radius:var(--rad-md);
  background:var(--card);
  margin-top:18px;
  margin-bottom:18px;
}
.sheet{
  width:100%;
  min-width:540px;
  font-size:14px;
}
.sheet th{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ft-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:1px;
  text-align:left;
  padding:10px 14px;
  white-space:nowrap;
}
.sheet td{
  padding:10px 14px;
  border-top:1px dashed var(--ink-25);
  vertical-align:top;
}
.sheet tbody tr:nth-child(even) td{background:var(--panel);}

/* ================= 右下角常驻下载浮层 ================= */
/* 本站抽签 dlFab: null —— 仅博客文章页放置,其余页面严禁出现 */

.dl-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:var(--volt);
  color:var(--ink);
  border:var(--rule-thick);
  border-radius:var(--rad-pill);
  padding:12px 20px;
  font-family:var(--ft-display);
  font-size:14.5px;
  font-weight:800;
}
.dl-fab:hover{background:var(--volt-deep);}
.dl-fab svg{flex-shrink:0;}
.dl-fab.demo{position:static;}

/* ================= 文末下载引导卡 ================= */

.dl-guide{
  background:var(--panel);
  border:var(--rule-thick);
  border-radius:var(--rad-lg);
  padding:26px 28px;
  margin-top:40px;
}
.dl-guide h2{margin-bottom:10px;}
.dl-guide p{
  font-size:14.5px;
  line-height:1.85;
  max-width:70ch;
}
.dl-guide .cta{
  margin-top:18px;
  margin-bottom:0;
}

/* ================= 色板(design-preview 演示用) ================= */

.swatch-row{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:14px;
}
.swatch-row > *{min-width:0;}
.swatch{
  background:var(--card);
  border:var(--rule);
  border-radius:var(--rad-md);
  overflow:hidden;
}
.swatch .chip{
  height:60px;
  border-bottom:var(--rule);
}
.swatch .meta{
  font-family:var(--ft-mono);
  font-size:11.5px;
  line-height:1.5;
  padding:8px 10px;
  overflow-wrap:anywhere;
}
.sw-paper .chip{background:var(--paper);}
.sw-card .chip{background:var(--card);}
.sw-panel .chip{background:var(--panel);}
.sw-card2 .chip{background:var(--card-2);}
.sw-ink .chip{background:var(--ink);}
.sw-inksoft .chip{background:var(--ink-soft);}
.sw-flame .chip{background:var(--flame);}
.sw-flametint .chip{background:var(--flame-tint);}
.sw-volt .chip{background:var(--volt);}
.sw-voltdeep .chip{background:var(--volt-deep);}
.sw-ok .chip{background:var(--ok);}
.sw-warn .chip{background:var(--warn);}
.sw-err .chip{background:var(--err);}

/* ================= Hero 响应式(与拍板稿一致) ================= */

@media (max-width:1080px){
  .hero{
    grid-template-columns:1fr;
    padding-top:24px;
  }
  .hero-scene{margin-left:0;}
  .scene{max-height:none;}
}

/* 检修带在窄屏允许折行,避免单行 nowrap 撑出横向滚动 */
@media (max-width:920px){
  .peek{
    flex-wrap:wrap;
    height:auto;
    gap:10px;
    padding-top:11px;
    padding-bottom:11px;
  }
}