/* ============================================================
   Clash开源网 · components.css
   跨页面组件:首屏仓库面板 / tab / toc / FAQ / 术语卡 / 下载卡 /
   文章卡 / callout / 徽章 / 引导卡 / dl-fab / 预览辅助
   ============================================================ */

/* ============ 首屏仓库面板(index 专用,视觉基准已拍板) ============ */
.stage{padding-top:16px}
.repo{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:0 28px 22px;
}

/* 仓库顶部 tab 条(窗口 chrome,纯装饰) */
.rtabs{
  display:flex;align-items:flex-end;gap:4px;
  margin:0 -28px 14px;
  padding:8px 24px 0;
  border-bottom:1px solid var(--border);
  background:var(--bg-panel);
}
.rtab{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  padding:7px 12px 9px;
  border-bottom:2px solid transparent;
  white-space:nowrap;
}
.rtab svg{display:block;flex-shrink:0}
.rtab.on{color:var(--text);border-bottom-color:var(--accent)}
.rtab .cnt{
  font-size:11px;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  padding:0 7px;line-height:16px;
}

.repo-head{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;min-width:0}
.crumb{
  font-family:var(--font-display);
  font-size:clamp(84px,10.5vw,148px);
  line-height:1;font-weight:700;letter-spacing:-.02em;
  color:var(--text);
  min-width:0;max-width:100%;
  white-space:normal;overflow-wrap:anywhere;
}
.crumb .hl{color:var(--accent)}
.caret{
  display:inline-block;
  width:.44em;height:.82em;
  background:var(--accent);
  margin-left:.09em;vertical-align:-.04em;
  animation:blink 1.1s steps(1) infinite;
}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}
.pub{
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  padding:3px 10px;margin-bottom:14px;white-space:nowrap;
}
.acts{display:flex;gap:10px;margin-left:auto;margin-bottom:12px;flex-wrap:wrap}
.act{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-mono);font-size:13px;color:var(--text);
  border:1px solid var(--border);border-radius:var(--r);
  padding:6px 12px;
  background:var(--bg-panel2);
  white-space:nowrap;
}
.act.star{border-color:var(--accent);color:var(--ok)}
.act svg{display:block;flex-shrink:0}
.act .n{font-size:12px;color:var(--muted);border-left:1px solid var(--border);padding-left:8px}
.act.star .n{color:var(--ok);border-left-color:var(--accent-dark)}

.repo-desc{
  margin-top:8px;
  font-size:14.5px;line-height:1.6;color:var(--muted);
  max-width:980px;
}
.repo-desc strong{color:var(--accent);font-weight:600}

.topics{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.topics a{
  font-family:var(--font-mono);font-size:12px;color:var(--ok);
  border:1px solid var(--border);border-radius:999px;
  padding:3px 12px;
  max-width:100%;overflow:hidden;white-space:nowrap;
  transition:border-color .15s;
}
.topics a:hover{border-color:var(--accent)}

/* ---- 平台文件列表 ---- */
.flist{
  margin-top:14px;
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
.flist-head{
  display:flex;align-items:center;gap:9px;
  background:var(--bg-panel2);
  padding:8px 16px;
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  border-bottom:1px solid var(--border);
}
.flist-head svg{flex-shrink:0}
.flist-head b{color:var(--text);font-weight:600}
.flist-head .rt{margin-left:auto;font-size:12px;white-space:nowrap}
.frow{
  display:grid;
  grid-template-columns:190px 1fr 130px 96px;
  align-items:center;gap:14px;
  padding:8px 16px;
  border-top:1px solid var(--border);
  transition:background .12s;
}
.frow>*{min-width:0}
.frow:first-of-type{border-top:0}
.frow:hover{background:var(--bg-panel2)}
.fname{
  display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:14px;color:var(--text);
  white-space:nowrap;
}
.ficon{color:var(--muted);flex-shrink:0;transition:color .12s}
.frow:hover .ficon{color:var(--accent)}
.fdesc{font-size:13px;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.fver{font-family:var(--font-mono);font-size:13px;color:var(--ok);text-align:right;white-space:nowrap}
.fver.na{color:var(--muted)}
.ftime{font-family:var(--font-mono);font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}

/* ---- 首屏按钮行 ---- */
.cta{display:flex;align-items:center;gap:12px;margin-top:15px;flex-wrap:wrap}
.cta-note{font-family:var(--font-mono);font-size:12px;color:var(--muted);margin-left:auto}

/* ---- 贡献热力图(深绿格拼 2027,纯装饰 aria-hidden) ---- */
.heat{margin-top:16px}
.heat-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  margin-bottom:6px;flex-wrap:wrap;
}
.legend{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.legend i{display:inline-block;width:11px;height:11px;border-radius:2px;flex-shrink:0}
.lg1{background:var(--heat1)}
.lg2{background:var(--heat2)}
.lg3{background:var(--heat3)}
.lg4{background:var(--heat4)}
.heat-months{
  display:flex;justify-content:space-between;
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  margin-bottom:5px;padding:0 2px;
}
.hm{display:flex;gap:3px}
.hc{
  flex:1;min-width:0;
  display:flex;flex-direction:column;gap:3px;
  animation:hmIn .22s ease-out both;
}
.hc i{display:block;width:100%;aspect-ratio:1/1;border-radius:2px;background:var(--heat1)}
.hc i.t2{background:var(--heat2)}
.hc i.t3{background:var(--heat3)}
.hc i.t4{background:var(--heat4)}
@keyframes hmIn{from{opacity:0}to{opacity:1}}
.hm .hc:nth-child(1),.hm .hc:nth-child(2){animation-delay:0s}
.hm .hc:nth-child(3),.hm .hc:nth-child(4){animation-delay:.03s}
.hm .hc:nth-child(5),.hm .hc:nth-child(6){animation-delay:.06s}
.hm .hc:nth-child(7),.hm .hc:nth-child(8){animation-delay:.09s}
.hm .hc:nth-child(9),.hm .hc:nth-child(10){animation-delay:.12s}
.hm .hc:nth-child(11),.hm .hc:nth-child(12){animation-delay:.15s}
.hm .hc:nth-child(13),.hm .hc:nth-child(14){animation-delay:.18s}
.hm .hc:nth-child(15),.hm .hc:nth-child(16){animation-delay:.21s}
.hm .hc:nth-child(17),.hm .hc:nth-child(18){animation-delay:.24s}
.hm .hc:nth-child(19),.hm .hc:nth-child(20){animation-delay:.27s}
.hm .hc:nth-child(21),.hm .hc:nth-child(22){animation-delay:.3s}
.hm .hc:nth-child(23),.hm .hc:nth-child(24){animation-delay:.33s}
.hm .hc:nth-child(25),.hm .hc:nth-child(26){animation-delay:.36s}
.hm .hc:nth-child(27),.hm .hc:nth-child(28){animation-delay:.39s}
.hm .hc:nth-child(29),.hm .hc:nth-child(30){animation-delay:.42s}
.hm .hc:nth-child(31),.hm .hc:nth-child(32){animation-delay:.45s}
.hm .hc:nth-child(33),.hm .hc:nth-child(34){animation-delay:.48s}
.hm .hc:nth-child(35),.hm .hc:nth-child(36){animation-delay:.51s}
.hm .hc:nth-child(37),.hm .hc:nth-child(38){animation-delay:.54s}
.hm .hc:nth-child(39),.hm .hc:nth-child(40){animation-delay:.57s}
.hm .hc:nth-child(41),.hm .hc:nth-child(42){animation-delay:.6s}
.hm .hc:nth-child(43),.hm .hc:nth-child(44){animation-delay:.63s}
.hm .hc:nth-child(45),.hm .hc:nth-child(46){animation-delay:.66s}
.hm .hc:nth-child(47),.hm .hc:nth-child(48){animation-delay:.69s}
.hm .hc:nth-child(49),.hm .hc:nth-child(50){animation-delay:.72s}
.hm .hc:nth-child(51),.hm .hc:nth-child(52){animation-delay:.75s}
.hm .hc:nth-child(53){animation-delay:.78s}

/* ---- 区块边缘标题(mono 路径 + 小 h2) ---- */
.peek{margin-top:28px;border-top:1px solid var(--border);padding-top:22px;padding-bottom:0}
.peek-inner{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.peek-path{font-family:var(--font-mono);font-size:14px;color:var(--ok)}
.peek h2{font-size:20px;font-weight:600;color:var(--text)}

/* 首屏窄屏适配 */
@media (max-width:1100px){
  .frow{grid-template-columns:160px 1fr 110px 88px}
}
@media (max-width:720px){
  .repo{padding-left:16px;padding-right:16px}
  .rtabs{margin-left:-16px;margin-right:-16px;padding-left:12px;padding-right:12px}
  .crumb{font-size:clamp(48px,16vw,84px)}
  .acts{margin-left:0}
  .frow{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .fdesc,.ftime{display:none}
  .cta-note{margin-left:0;width:100%}
  .heat-months span:nth-child(even){display:none}
}

/* ============ 通用 tab 组件(tabs.js 契约) ============ */
.tabbar{
  display:flex;gap:4px;
  overflow-x:auto;
  border-bottom:1px solid var(--border);
}
.tabbar [role="tab"]{
  appearance:none;background:none;border:none;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font-family:var(--font-mono);font-size:14px;
  padding:10px 16px;
  cursor:pointer;
  white-space:nowrap;flex-shrink:0;
  transition:color .15s;
}
.tabbar [role="tab"]:hover{color:var(--text)}
.tabbar [role="tab"].on{color:var(--text);border-bottom-color:var(--accent)}
[role="tabpanel"][hidden]{display:none}
.tabpanel{padding-top:22px;padding-bottom:0}

/* ---- 目录树式特性浏览器(首页特性区:docs/ 下的 .md 文件行) ---- */
.doctree{
  display:grid;
  grid-template-columns:300px minmax(0,1fr);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
.doctree-list{
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
}
.doctree-list [role="tab"]{
  appearance:none;background:none;border:none;
  display:flex;align-items:center;gap:9px;
  width:100%;text-align:left;
  border-top:1px solid var(--border);
  border-left:2px solid transparent;
  color:var(--muted);
  font-family:var(--font-mono);font-size:14px;
  padding:12px 16px;
  cursor:pointer;min-width:0;
  transition:color .15s,background .15s;
}
.doctree-list [role="tab"]:first-child{border-top:0}
.doctree-list [role="tab"] svg{flex-shrink:0}
.doctree-list [role="tab"]:hover{color:var(--text)}
.doctree-list [role="tab"].on{
  color:var(--text);
  background:var(--bg-panel2);
  border-left-color:var(--accent);   /* 选中行左缘 2px 贡献绿指示条 */
}
.doctree-pane{padding:22px 26px;min-width:0}
.doctree-pane h3{font-family:var(--font-mono);font-size:15px;color:var(--ok);margin-bottom:10px}
.doctree-pane p{font-size:14.5px;line-height:1.8;color:var(--muted)}
.doctree-pane pre{margin-top:14px}
@media (max-width:820px){
  .doctree{grid-template-columns:1fr}
  .doctree-list{
    flex-direction:row;overflow-x:auto;
    border-right:0;border-bottom:1px solid var(--border);
  }
  .doctree-list [role="tab"]{
    width:auto;flex-shrink:0;
    border-top:0;border-left:0;
    border-bottom:2px solid transparent;
  }
  .doctree-list [role="tab"].on{border-bottom-color:var(--accent)}
  .doctree-pane{padding:18px}
}

/* ============ 长页分类跳转导航(toc) ============ */
.toc-tabs{
  display:flex;gap:8px;
  overflow-x:auto;
  padding-bottom:6px;
}
.toc-tabs a{
  flex-shrink:0;
  font-family:var(--font-mono);font-size:13px;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  padding:6px 14px;
  white-space:nowrap;
  transition:color .15s,border-color .15s;
}
.toc-tabs a:hover{color:var(--ok);border-color:var(--accent)}

/* ============ FAQ 折叠项 ============ */
.faq-item{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
}
.faq-item+.faq-item{margin-top:10px}
.faq-item summary{
  cursor:pointer;
  display:flex;align-items:baseline;gap:10px;
  padding:14px 18px;
  font-size:15px;font-weight:600;color:var(--text);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::before{
  content:"Q";
  font-family:var(--font-mono);font-size:13px;
  color:var(--ok);flex-shrink:0;
}
.faq-item summary::after{
  content:"+";
  margin-left:auto;flex-shrink:0;
  font-family:var(--font-mono);color:var(--muted);
}
.faq-item[open] summary::after{content:"−"}
.faq-item[open] summary{border-bottom:1px solid var(--border)}
.faq-body{
  padding:14px 18px;
  font-size:14px;line-height:1.8;color:var(--muted);
}
.faq-body code{color:var(--ok)}

/* ============ 术语卡 ============ */
.term-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:16px 18px;
  min-width:0;
}
.term-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.term-name{font-family:var(--font-mono);font-size:15px;font-weight:700;color:var(--ok)}
.term-cat{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  padding:1px 9px;
  max-width:100%;overflow:hidden;white-space:nowrap;
}
.term-desc{font-size:13.5px;line-height:1.75;color:var(--muted)}

/* ============ 徽章 / 事实胶囊 ============ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  border-radius:999px;padding:2px 10px;
  white-space:nowrap;max-width:100%;overflow:hidden;
  flex-shrink:0;
}
.badge-top{background:var(--accent);color:var(--on-accent)}
.badge-rec{border:1px solid var(--accent);color:var(--ok)}
.badge-eol{border:1px solid var(--border);color:var(--muted)}
.badge-warn{border:1px solid var(--warn);color:var(--warn)}

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;
  padding:3px 12px;
  white-space:nowrap;max-width:100%;overflow:hidden;
}
.chip .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);flex-shrink:0}
.chip-ok{color:var(--ok)}

/* ============ 下载客户端卡片 ============ */
.dl-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px 20px;
  min-width:0;
}
.dl-card.first{border-color:var(--accent-dark)}
.dl-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;min-width:0}
.dl-head img{flex-shrink:0}
.dl-name{font-size:16.5px;font-weight:700;color:var(--text)}
.dl-ver{font-family:var(--font-mono);font-size:13px;color:var(--ok);white-space:nowrap}
.dl-ver:empty{display:none}   /* 数据为空时不留任何可见占位,严禁「v—」 */
.dl-note{font-size:13.5px;line-height:1.7;color:var(--muted)}
.dl-files{display:flex;flex-direction:column}
.dl-files a{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  font-family:var(--font-mono);font-size:13px;color:var(--text);
  padding-top:8px;padding-bottom:8px;
  border-top:1px solid var(--border);
  min-width:0;
  transition:color .15s;
}
.dl-files a:hover{color:var(--ok)}
.dl-files .fn{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.dl-files .fmt{color:var(--muted);flex-shrink:0;font-size:12px}
.dl-acts{display:flex;gap:10px;flex-wrap:wrap}

/* ============ 博客文章卡 ============ */
.post-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:18px 20px;
  min-width:0;
  transition:border-color .15s;
}
.post-card:hover{border-color:var(--accent)}
.post-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:12px;color:var(--muted);
}
.post-tag{
  color:var(--ok);
  border:1px solid var(--border);border-radius:999px;
  padding:1px 10px;
  white-space:nowrap;max-width:100%;overflow:hidden;  /* 运行期脏数据防御 */
}
.post-title{font-size:16.5px;font-weight:700;line-height:1.45;color:var(--text)}
.post-card:hover .post-title{color:var(--ok)}
.post-sum{font-size:13.5px;line-height:1.75;color:var(--muted)}
.post-more{
  margin-top:auto;
  font-family:var(--font-mono);font-size:12.5px;color:var(--ok);
}

/* ============ callout 引用块 ============ */
.callout{
  display:block;
  background:var(--bg-panel2);
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  padding:14px 18px;
  font-size:14px;line-height:1.8;color:var(--muted);
}
.callout strong,.callout b{color:var(--text)}
.callout code{color:var(--ok)}
.callout-warn{border-left-color:var(--warn)}
.callout-err{border-left-color:var(--err)}

/* ============ 文末下载引导卡 ============ */
.guide-card{
  background:var(--bg-panel);
  border:1px solid var(--accent-dark);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  padding-top:22px;padding-bottom:22px;
  padding-left:24px;padding-right:24px;
}
.guide-card h2{font-size:18px;margin-bottom:8px;color:var(--text)}
.guide-card p{font-size:14px;line-height:1.75;color:var(--muted);margin-bottom:16px}
.guide-acts{display:flex;gap:12px;flex-wrap:wrap}

/* ============ 右下角常驻下载浮层 ============ */
.dl-fab{
  position:fixed;right:24px;bottom:24px;z-index:50;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--on-accent);
  font-size:14px;font-weight:600;
  padding:11px 18px;
  border-radius:var(--r);
  transition:background .15s;
}
.dl-fab:hover{background:var(--accent-dark)}
.dl-fab svg{display:block;flex-shrink:0}
@media (max-width:640px){
  .dl-fab{right:16px;bottom:16px;padding:10px 15px;font-size:13px}
}

/* ============ 博客文章页零件 ============ */
.bc{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:20px;
  font-family:var(--font-mono);font-size:12.5px;color:var(--muted);
}
.bc a:hover{color:var(--ok)}
.bc .sep{color:var(--border)}
.post-nav{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin-top:28px;
}
.post-nav a{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  padding:14px 16px;
  font-size:13.5px;color:var(--muted);
  min-width:0;
  transition:border-color .15s,color .15s;
}
.post-nav a:hover{border-color:var(--accent);color:var(--text)}
.post-nav .dir{
  display:block;
  font-family:var(--font-mono);font-size:11px;color:var(--ok);
  margin-bottom:6px;
}
@media (max-width:560px){
  .post-nav{grid-template-columns:1fr}
}

/* ============ 设计预览辅助(design-preview.html 用) ============ */
.sw-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:12px;
}
.sw-grid>*{min-width:0}
.swatch{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r);
  overflow:hidden;
}
.swatch i{display:block;height:64px}
.swatch b{
  display:block;
  font-family:var(--font-mono);font-size:12px;font-weight:400;
  color:var(--muted);
  padding:8px 10px;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.sw-bg{background:var(--bg)}
.sw-panel{background:var(--bg-panel)}
.sw-panel2{background:var(--bg-panel2)}
.sw-border{background:var(--border)}
.sw-accent{background:var(--accent)}
.sw-accent-dark{background:var(--accent-dark)}
.sw-text{background:var(--text)}
.sw-muted{background:var(--muted)}
.sw-ok{background:var(--ok)}
.sw-warn{background:var(--warn)}
.sw-err{background:var(--err)}
.sw-h1{background:var(--heat1)}
.sw-h2{background:var(--heat2)}
.sw-h3{background:var(--heat3)}
.sw-h4{background:var(--heat4)}

.type-spec{display:flex;flex-direction:column;gap:18px}
.type-row{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:14px}
.type-row .lbl{font-family:var(--font-mono);font-size:12px;color:var(--muted);flex-shrink:0;min-width:170px}

@media (prefers-reduced-motion:reduce){
  .hc{animation:none}
  .caret{animation:none;opacity:1}
}