/* ============================================================
   Clash代理 · components.css
   跨页面组件:tab / toc / FAQ / 术语卡 / 下载卡 / 文章卡 /
   callout / 表格 / 面包屑 / 下载引导 / dl-fab / 预览色板
   ============================================================ */

/* ============================================================
   Tab · 横向导轨(下载页平台切换等,配 tabs.js)
   容器加 data-tabs;按钮 role=tab + data-hash;面板 role=tabpanel
   ============================================================ */
.tab-rail{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:8px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.tab-rail [role="tab"]{
  appearance:none;
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;
  min-height:44px;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  color:var(--ink-muted);
  font-family:var(--font-display);
  font-size:14.5px;font-weight:600;
  cursor:pointer;
  transition:color .18s ease,background-color .18s ease,box-shadow .18s ease;
}
.tab-rail [role="tab"]:hover{color:var(--ink)}
.tab-rail [role="tab"].is-on{
  background:var(--slate);
  color:var(--white);
  box-shadow:0 8px 20px rgba(46,61,82,.28);
}
.tab-rail [role="tab"] svg{width:17px;height:17px;flex-shrink:0}
.tab-pane{margin-top:26px;min-width:0}
.tab-pane[hidden]{display:none}

/* ============================================================
   Tab · 匝道出口选择器(首页特性区,featuresLayout 专用)
   左列出口标志牌式竖排 tab,右侧纯白详情面板
   ============================================================ */
.ramp-select{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:30px;
  align-items:start;
}
.ramp-tabs{display:flex;flex-direction:column;gap:12px}
.ramp-tab{
  position:relative;
  display:flex;align-items:center;gap:12px;
  width:100%;
  min-height:44px;
  padding:16px 18px 16px 42px;
  text-align:left;
  background:var(--sign-solid);
  color:var(--txt-on-dark);
  border:1px solid transparent;
  border-radius:var(--r-md);
  font-family:var(--font-display);
  font-size:15.5px;font-weight:600;
  cursor:pointer;
  transition:transform .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease;
}
/* 左缘一小段匝道弧线 */
.ramp-tab::before{
  content:"";
  position:absolute;left:14px;top:50%;
  transform:translateY(-50%);
  width:16px;height:30px;
  border:2.5px solid transparent;
  border-left-color:var(--edge-line);
  border-radius:50%;
  opacity:.55;
  transition:border-color .18s ease,opacity .18s ease;
}
.ramp-tab:hover{transform:translateX(3px);color:var(--white)}
.ramp-tab.is-on{
  border-color:var(--accent-border);
  color:var(--white);
  box-shadow:0 0 0 1px var(--accent-glow-soft),0 0 22px var(--accent-glow);
}
.ramp-tab.is-on::before{
  border-left-color:var(--accent);
  opacity:1;
  filter:drop-shadow(0 0 6px var(--accent-glow));
}
/* 选中牌面连入右侧面板的引导弧线 */
.ramp-tab.is-on::after{
  content:"";
  position:absolute;right:-31px;top:50%;
  width:30px;height:14px;
  border-top:2px dashed var(--accent-border);
  border-top-left-radius:14px;
  border-top-right-radius:14px;
}
.ramp-panel{
  min-width:0;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  padding:34px;
}
.ramp-panel h3{font-size:20px;font-weight:800;margin-bottom:12px}
.ramp-panel p{font-size:15px;line-height:1.9;color:var(--ink-muted)}
.ramp-panel .mono-tag{margin-top:20px}

@media (max-width:940px){
  .ramp-select{grid-template-columns:1fr;gap:18px}
  .ramp-tabs{flex-direction:row;overflow-x:auto;padding-bottom:6px;gap:10px}
  .ramp-tab{flex:0 0 auto;width:auto;padding:12px 16px 12px 36px;font-size:14px}
  .ramp-tab:hover{transform:none}
  .ramp-tab.is-on::after{display:none}
  .ramp-panel{padding:24px}
}

/* ============================================================
   长页分类跳转导航(toc,纯锚点)
   ============================================================ */
.toc-tabs{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:8px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
}
.toc-tabs a{
  display:inline-flex;align-items:center;
  min-height:40px;
  padding:8px 18px;
  border-radius:var(--r-pill);
  color:var(--ink-muted);
  font-size:14px;font-weight:600;
  transition:color .18s ease,background-color .18s ease;
}
.toc-tabs a:hover{color:var(--ink);background:var(--bg)}
.toc-tabs a.is-on{background:var(--slate);color:var(--white)}

/* ============================================================
   FAQ 折叠项(原生 details/summary,无 JS)
   ============================================================ */
.faq-item{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  transition:border-color .18s ease;
}
.faq-item + .faq-item{margin-top:12px}
.faq-item[open]{border-color:var(--accent-border)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;
  cursor:pointer;
  font-weight:600;font-size:15.5px;
  list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  flex-shrink:0;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--bg-panel);
  color:var(--accent-dark);
  font-size:17px;font-weight:600;
  transition:transform .18s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{
  padding:0 22px 20px;
  font-size:14.5px;line-height:1.9;
  color:var(--ink-muted);
}
.faq-a code{overflow-wrap:anywhere}

/* ============================================================
   术语卡(术语表页)
   ============================================================ */
.term-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:16px;
}
.term-grid>*{min-width:0}
.term-card{
  position:relative;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  padding:22px 22px 22px 26px;
  transition:transform .18s ease,box-shadow .18s ease;
}
.term-card::before{
  content:"";
  position:absolute;left:-1px;top:18px;bottom:18px;
  width:3px;border-radius:var(--r-pill);
  background:var(--accent);
  opacity:.5;
  transition:opacity .18s ease;
}
.term-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft)}
.term-card:hover::before{opacity:1}
.term-head{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-bottom:10px;
}
.term-name{font-size:16.5px;font-weight:700}
.term-cat{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.06em;
  padding:3px 10px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-dark);
  max-width:100%;overflow:hidden;
}
.term-desc{font-size:14px;line-height:1.85;color:var(--ink-muted)}

/* ============================================================
   下载客户端卡片(下载页)
   版本槽 [data-cdnver] 默认为空且不可见,由 downloads.js 填充
   ============================================================ */
.dl-card{
  display:flex;flex-direction:column;gap:14px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-soft);
  padding:26px;
  min-width:0;
}
.dl-card.is-featured{
  border-color:var(--accent-border);
  box-shadow:0 0 0 1px var(--accent-glow-soft),var(--shadow-lift);
}
.dl-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.dl-head img{width:52px;height:52px;flex-shrink:0}
.dl-name{font-size:19px;font-weight:800}
.dl-ver,[data-cdnver]{
  font-family:var(--font-mono);
  font-size:12px;
  padding:4px 11px;
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  border:1px solid var(--border);
  color:var(--ink-muted);
}
[data-cdnver]:empty{display:none}
.dl-note{font-size:14px;line-height:1.8;color:var(--ink-muted)}
.dl-note code{overflow-wrap:anywhere}
.dl-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:auto}
.dl-actions .btn{height:46px;padding:0 24px;font-size:14.5px}
.dl-meta{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-muted);
}
.dl-meta span{
  max-width:100%;overflow:hidden;
  overflow-wrap:anywhere;
}

/* 徽章:首推 / 推荐 / 已停止维护 */
.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;
  border-radius:var(--r-pill);
  font-size:12px;font-weight:700;
  letter-spacing:.03em;
  white-space:nowrap;
  max-width:100%;overflow:hidden;
}
.badge-top{
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:var(--ink);
  box-shadow:0 4px 12px var(--accent-glow);
}
.badge-rec{
  background:var(--success-soft);
  color:var(--success);
  border:1px solid var(--success);
}
.badge-eol{
  background:var(--bg-panel);
  color:var(--ink-muted);
  border:1px solid var(--border);
}
.badge-warn{
  background:var(--warn-soft);
  color:var(--warn);
  border:1px solid var(--warn);
}

/* 等宽小标签(版本号/协议名等) */
.mono-tag{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 13px;
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  border:1px solid var(--border);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-muted);
  max-width:100%;overflow:hidden;
}
.mono-tag i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex-shrink:0}

/* 系统要求小表 / 数据表 */
.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r-md);
}
.data-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:14px;
  background:var(--bg);
}
.data-table th{
  text-align:left;
  padding:13px 18px;
  background:var(--bg-panel);
  color:var(--ink);
  font-weight:700;
  border-bottom:1px solid var(--border);
}
.data-table td{
  padding:12px 18px;
  border-bottom:1px solid var(--border);
  color:var(--ink-muted);
  line-height:1.7;
}
.data-table tr:last-child td{border-bottom:0}
.data-table code{overflow-wrap:anywhere}
/* 裸表格防御:写手输出不带 .table-wrap 的裸表时自兜底横滑 */
.prose > .data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
}

/* ============================================================
   博客文章卡(列表页/首页预览;JS 动态插入时直接带 reveal shown)
   ============================================================ */
.post-card{
  display:flex;flex-direction:column;gap:12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:26px;
  min-width:0;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.post-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-lift);
  border-color:var(--accent-border);
}
.post-meta{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--ink-muted);
}
.post-tag{
  padding:3px 11px;
  border-radius:var(--r-pill);
  background:var(--accent-soft);
  color:var(--accent-dark);
  font-weight:600;
  white-space:nowrap;
  max-width:100%;overflow:hidden;
}
.post-title{
  font-size:17.5px;font-weight:700;line-height:1.5;
  color:var(--ink);
}
.post-card:hover .post-title{color:var(--accent-dark)}
.post-sum{
  font-size:14px;line-height:1.85;
  color:var(--ink-muted);
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.post-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:20px;
}
.post-grid>*{min-width:0}

/* 博客标签筛选条 */
.tag-filter{display:flex;gap:8px;flex-wrap:wrap}
.tag-filter button{
  appearance:none;cursor:pointer;
  min-height:40px;
  padding:8px 18px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  color:var(--ink-muted);
  font-size:13.5px;font-weight:600;
  transition:color .18s ease,border-color .18s ease,background-color .18s ease;
  max-width:100%;overflow:hidden;
}
.tag-filter button:hover{color:var(--ink);border-color:var(--slate)}
.tag-filter button.is-on{
  background:var(--slate);
  border-color:var(--slate);
  color:var(--white);
}

/* 面包屑(博客文章页) */
.crumbs{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:1.4rem;
  font-size:13px;
  color:var(--ink-muted);
}
.crumbs a{color:var(--ink-muted);transition:color .18s ease}
.crumbs a:hover{color:var(--accent-dark)}
.crumbs .sep{color:var(--border);flex-shrink:0}
.crumbs .cur{
  color:var(--ink);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:60vw;
}

/* 延伸阅读 / 上一篇下一篇 */
.post-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:14px;
}
.post-nav>*{min-width:0}
.post-nav a{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 20px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-md);
  transition:border-color .18s ease,transform .18s ease;
}
.post-nav a:hover{border-color:var(--accent-border);transform:translateY(-2px)}
.post-nav .pn-dir{
  font-family:var(--font-mono);
  font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-muted);
}
.post-nav .pn-title{font-size:14.5px;font-weight:600;line-height:1.5}
.post-nav .pn-next{text-align:right;align-items:flex-end}

/* ============================================================
   Callout 引用块
   ============================================================ */
.callout{
  position:relative;
  display:flex;gap:14px;
  margin:1.4em 0;
  padding:18px 22px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-left:4px solid var(--accent);
  border-radius:var(--r-md);
  font-size:14.5px;line-height:1.85;
  color:var(--ink);
}
.callout svg{width:20px;height:20px;flex-shrink:0;margin-top:2px}
.callout .co-body{min-width:0}
.callout .co-title{font-weight:700;margin-bottom:4px;display:block}
.callout code{overflow-wrap:anywhere}
.callout-ok{border-left-color:var(--success);background:var(--success-soft)}
.callout-warn{border-left-color:var(--warn);background:var(--warn-soft)}
.callout-err{border-left-color:var(--error);background:var(--error-soft)}

/* ============================================================
   命令展示框(clone/命令行,配复制按钮)
   ============================================================ */
.cmd-box{
  display:flex;align-items:center;gap:14px;
  padding:16px 20px;
  background:var(--slate);
  border-radius:var(--r-md);
  color:var(--code-ink);
}
.cmd-box code{
  flex:1;min-width:0;
  background:none;border:0;padding:0;
  font-family:var(--font-mono);
  font-size:13.5px;
  color:inherit;
  overflow-x:auto;
  white-space:nowrap;
  overflow-wrap:normal;
}
.cmd-copy{
  appearance:none;cursor:pointer;flex-shrink:0;
  padding:8px 16px;
  min-height:36px;
  background:var(--glass);
  border:1px solid var(--glass-border);
  border-radius:var(--r-pill);
  color:var(--txt-on-dark);
  font-size:13px;font-weight:600;
  transition:background-color .18s ease,color .18s ease;
}
.cmd-copy:hover{background:var(--glass-strong);color:var(--white)}

/* ============================================================
   文末下载引导卡(博客文章页统一)
   ============================================================ */
.dl-invite{
  margin-top:56px;
  padding:36px;
  background:var(--bg-panel2);
  border-radius:var(--r-lg);
  color:var(--txt-on-dark);
  text-align:center;
  overflow-x:clip;
}
.dl-invite h3{
  font-size:22px;font-weight:800;
  color:var(--white);
  margin-bottom:10px;
}
.dl-invite p{
  max-width:520px;margin:0 auto;
  font-size:14.5px;line-height:1.85;
  color:var(--txt-on-dark-dim);
}
.dl-invite .cta-row{margin-top:24px}

/* ============================================================
   右下角常驻下载浮层 .dl-fab(全站常驻,文案「下载Clash」)
   ============================================================ */
.dl-fab{
  position:fixed;right:28px;bottom:28px;z-index:20;
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 24px;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--accent),var(--accent-dark));
  color:var(--ink);
  font-family:var(--font-display);
  font-size:15px;font-weight:700;
  box-shadow:var(--shadow-fab);
  transition:transform .18s ease,box-shadow .18s ease;
}
.dl-fab:hover{transform:translateY(-3px);box-shadow:var(--shadow-cta-hover)}
.dl-fab svg{width:17px;height:17px;flex-shrink:0}

/* ============================================================
   设计预览专用:色板 / 排版标尺(不进正式页面)
   ============================================================ */
.swatch-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:14px;
}
.swatch-grid>*{min-width:0}
.swatch{
  border:1px solid var(--border);
  border-radius:var(--r-md);
  overflow:hidden;
  background:var(--bg);
}
.swatch i{display:block;height:76px}
.swatch b{
  display:block;
  padding:10px 14px 3px;
  font-size:13px;font-weight:700;
}
.swatch code{
  display:block;
  margin:0 14px 12px;
  background:none;border:0;padding:0;
  font-size:11.5px;
  color:var(--ink-muted);
}
.type-specimen{display:flex;flex-direction:column;gap:20px}
.type-specimen>div{
  display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  padding-bottom:18px;
  border-bottom:1px dashed var(--border);
}
.type-specimen .t-label{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:11.5px;
  color:var(--ink-muted);
  min-width:140px;
}

/* ============================================================
   组件响应式
   ============================================================ */
@media (max-width:720px){
  .post-nav{grid-template-columns:1fr}
  .post-nav .pn-next{text-align:left;align-items:flex-start}
  .dl-invite{padding:26px 20px}
  .cmd-box{flex-direction:column;align-items:stretch}
  .cmd-box code{white-space:pre;overflow-x:auto}
}
@media (max-width:640px){
  .dl-fab{right:16px;bottom:16px;padding:12px 20px;font-size:14px}
  .dl-actions .btn{width:100%;justify-content:center}
  .ramp-panel h3{font-size:18px}
  .tilt-l,.tilt-r{transform:none}
}