/* ==========================================================================
   Clash镜像站 · 「日光镜廊」—— components.css
   跨页面组件:展签 tab / 分类跳转导航 / FAQ 折叠 / 术语卡 / 下载卡 /
   文章卡 / callout / 表格 / 徽章 / 文末下载引导卡 / dl-fab
   全部直角 1px 细描边,细银线分区,无投影无发光。
   ========================================================================== */

/* ==========================================================================
   「双联展签」Tab(featuresLayout;通用 tab 同款)
   左翼:铭牌目录(等宽小编号 + 名称,当前项左缘湖水绿状态圆点)
   右翼:详情展板。中间一条与 Hero 同款的垂直细银缝。
   ========================================================================== */

.plaque-tabs{
  display:grid;
  grid-template-columns:minmax(0,300px) 1px minmax(0,1fr);
  border:1px solid var(--border);
  background:var(--bg-panel);
}
.plaque-tabs>*{min-width:0;}
.plaque-seam{
  background:linear-gradient(180deg,var(--seam-edge),var(--seam-core) 14%,var(--seam-core) 86%,var(--seam-edge));
}
.plaque-list{
  display:flex;
  flex-direction:column;
}
.plaque-tab{
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  text-align:left;
  background:none;
  border:none;
  border-bottom:1px solid var(--hairline);
  padding:15px 18px 15px 22px;
  cursor:pointer;
  position:relative;
  color:var(--text-muted);
  min-height:44px;
}
.plaque-tab:last-child{border-bottom:none;}
.plaque-tab:hover{color:var(--text);background:var(--bg-panel2);}
.plaque-no{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.08em;
  flex-shrink:0;
}
.plaque-name{
  font-family:var(--font-display);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.03em;
}
.plaque-dot{
  position:absolute;
  left:8px;
  top:50%;
  margin-top:-3.5px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--accent);
  flex-shrink:0;
  opacity:0;
}
.plaque-tab[aria-selected="true"]{
  color:var(--text);
  background:var(--bg-panel2);
}
.plaque-tab[aria-selected="true"] .plaque-dot{opacity:1;}

.plaque-panels{padding:26px 30px;}
.plaque-panel[hidden]{display:none;}
.plaque-panel-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
}
.plaque-panel-body{
  font-size:14.5px;
  color:var(--text);
  line-height:1.8;
}
.plaque-panel-fact{
  margin-top:18px;
  padding-top:12px;
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
  letter-spacing:.04em;
  overflow-wrap:anywhere;
}

@media (max-width:820px){
  .plaque-tabs{grid-template-columns:1fr;}
  .plaque-seam{display:none;}
  .plaque-list{
    flex-direction:row;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-bottom:1px solid var(--border);
  }
  .plaque-tab{
    border-bottom:none;
    border-right:1px solid var(--hairline);
    white-space:nowrap;
    padding:13px 16px 13px 20px;
  }
  .plaque-panels{padding:20px var(--gutter);}
}

/* —— 通用横向 tab(下载页平台切换等) —— */
.rail-tabs{
  display:flex;
  flex-wrap:wrap;
  border:1px solid var(--border);
  background:var(--bg-panel);
}
.rail-tab{
  display:flex;
  align-items:center;
  gap:8px;
  background:none;
  border:none;
  border-right:1px solid var(--hairline);
  padding:12px 22px;
  min-height:44px;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  letter-spacing:.03em;
  color:var(--text-muted);
  cursor:pointer;
  position:relative;
}
.rail-tab:hover{color:var(--text);}
.rail-tab[aria-selected="true"]{
  color:var(--text);
  background:var(--bg-panel2);
}
.rail-tab[aria-selected="true"]::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  border-bottom:2px solid var(--accent-dark);
}
.rail-panel[hidden]{display:none;}
.rail-panel{padding-top:26px;}
@media (max-width:640px){
  .rail-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .rail-tab{white-space:nowrap;flex-shrink:0;}
}

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

.toc-rail{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  border:1px solid var(--border);
  background:var(--bg-panel);
  margin-bottom:34px;
}
.toc-rail a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  min-height:44px;
  font-size:13.5px;
  color:var(--text-muted);
  border-right:1px solid var(--hairline);
}
.toc-rail a:hover{color:var(--text);background:var(--bg-panel2);}
.toc-idx{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.08em;
  flex-shrink:0;
}
@media (max-width:640px){
  .toc-rail{
    flex-wrap:nowrap;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .toc-rail a{white-space:nowrap;flex-shrink:0;}
}

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

.faq-set{border:1px solid var(--border);background:var(--bg-panel);}
.faq-item{border-bottom:1px solid var(--hairline);}
.faq-item:last-child{border-bottom:none;}
.faq-q{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 20px;
  cursor:pointer;
  list-style:none;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--text);
  min-height:44px;
}
.faq-q::-webkit-details-marker{display:none;}
.faq-q::before{
  content:"+";
  font-family:var(--font-mono);
  font-size:15px;
  color:var(--text-muted);
  flex-shrink:0;
  width:16px;
  text-align:center;
}
.faq-item[open] .faq-q::before{content:"−";}
.faq-item[open] .faq-q{background:var(--bg-panel2);}
.faq-a{
  padding:14px 20px 18px 48px;
  font-size:14px;
  color:var(--text);
  line-height:1.8;
  border-top:1px solid var(--hairline);
}
.faq-a p+p{margin-top:10px;}
@media (max-width:640px){
  .faq-a{padding-left:20px;}
}

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

.term-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px 20px;
  min-width:0;
}
.term-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  padding-bottom:10px;
  border-bottom:1px solid var(--hairline);
  margin-bottom:10px;
}
.term-name{
  font-family:var(--font-display);
  font-size:15.5px;
  font-weight:700;
}
.term-code{
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  letter-spacing:.06em;
  margin-left:auto;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.term-desc{
  font-size:13.5px;
  color:var(--text);
  line-height:1.75;
}

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

.dl-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  min-width:0;
}
.dl-card+.dl-card{margin-top:16px;}
.dl-head{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  padding-bottom:12px;
  border-bottom:1px solid var(--hairline);
  margin-bottom:14px;
}
.dl-appicon{
  width:48px;
  height:48px;
  flex-shrink:0;
}
.dl-name{
  font-family:var(--font-display);
  font-size:17px;
  font-weight:700;
}
.dl-ver{
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text-muted);
}
.dl-ver:empty{display:none;}
.dl-desc{
  font-size:13.5px;
  color:var(--text-muted);
  line-height:1.75;
  margin-bottom:14px;
}
.dl-files{list-style:none;}
.dl-file{
  display:flex;
  align-items:center;
  gap:12px;
  padding-top:9px;
  padding-bottom:9px;
  border-bottom:1px solid var(--hairline);
}
.dl-file:last-child{border-bottom:none;}
.dl-file-name{
  font-family:var(--font-mono);
  font-size:12.5px;
  flex:1;
  min-width:0;
  overflow-wrap:anywhere;
}
.dl-file-meta{
  font-size:11.5px;
  color:var(--text-muted);
  white-space:nowrap;
  flex-shrink:0;
}
.dl-get{
  display:inline-block;
  flex-shrink:0;
  font-size:12.5px;
  font-weight:600;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  padding:6px 16px;
  white-space:nowrap;
}
.dl-get:hover{border-color:var(--text-muted);}
@media (max-width:560px){
  .dl-file{flex-wrap:wrap;}
  .dl-get{margin-left:auto;}
}

/* —— 徽章 —— */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.1em;
  text-transform:uppercase;
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:2px 9px;
  line-height:1.6;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  flex-shrink:0;
}
.badge-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--text-muted);
}
.badge--top{
  color:var(--accent-dark);
  border-color:var(--accent);
  background:var(--bg-panel);
}
.badge--top .badge-dot{background:var(--accent);}
.badge--rec{
  color:var(--text);
  background:var(--bg-panel2);
}
.badge--rec .badge-dot{background:var(--text);}
.badge--eol{
  color:var(--warn);
  border-color:var(--warn);
  background:var(--bg-panel);
}
.badge--eol .badge-dot{background:var(--warn);}

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

.post-card{
  display:block;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 22px;
  min-width:0;
}
.post-card:hover{border-color:var(--text-muted);}
.post-meta{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  letter-spacing:.05em;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.post-tag{
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  background:var(--bg);
  padding:1px 9px;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.post-title{
  font-family:var(--font-display);
  font-size:16px;
  font-weight:700;
  line-height:1.5;
  margin-bottom:8px;
}
.post-sum{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.75;
}
.post-more{
  display:inline-block;
  margin-top:12px;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text);
  border-bottom:1px solid var(--border);
}

/* 标签筛选条(博客列表页) */
.tag-rail{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:26px;
}
.tag-pill{
  font-size:12.5px;
  color:var(--text-muted);
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:6px 16px;
  min-height:34px;
  cursor:pointer;
  max-width:100%;
  overflow:hidden;
  white-space:nowrap;
}
.tag-pill:hover{color:var(--text);}
.tag-pill[aria-pressed="true"]{
  color:var(--text);
  background:var(--bg-panel2);
  border-color:var(--text-muted);
}

/* ==========================================================================
   正文排版(教程/深文档/博客文章)
   ========================================================================== */

.prose{max-width:780px;}
.prose h2{
  margin-top:44px;
  margin-bottom:16px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.prose h3{margin-top:28px;margin-bottom:10px;}
.prose p{margin-bottom:14px;line-height:1.85;}
.prose ul,.prose ol{
  margin-bottom:14px;
  padding-left:22px;
  line-height:1.85;
}
.prose li{margin-bottom:6px;}
.prose li::marker{color:var(--text-muted);}
.prose pre{margin-bottom:16px;}
.prose blockquote{
  border-left:2px solid var(--border);
  padding-left:16px;
  color:var(--text-muted);
  margin-bottom:14px;
}
.prose a{
  border-bottom:1px solid var(--border);
}
.prose a:hover{border-bottom-color:var(--text);}

/* 步骤序号(自定义 counter,不用默认 ol 数字) */
.steps{
  list-style:none;
  counter-reset:step;
  padding-left:0;
}
.steps>li{
  counter-increment:step;
  position:relative;
  padding-left:46px;
  padding-bottom:22px;
  margin-bottom:0;
}
.steps>li::before{
  content:counter(step,decimal-leading-zero);
  position:absolute;
  left:0;
  top:1px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg-panel);
  flex-shrink:0;
}
.steps>li::after{
  content:"";
  position:absolute;
  left:15px;
  top:36px;
  bottom:2px;
  border-left:1px solid var(--hairline);
}
.steps>li:last-child::after{display:none;}

/* ==========================================================================
   Callout 引用块
   ========================================================================== */

.callout{
  display:flex;
  gap:12px;
  border:1px solid var(--border);
  border-left:2px solid var(--text-muted);
  background:var(--bg-panel);
  padding:14px 18px;
  margin-bottom:16px;
  font-size:13.5px;
  line-height:1.8;
}
.callout>*{min-width:0;}
.callout-tip{border-left-color:var(--ok);}
.callout-warn{border-left-color:var(--warn);}
.callout-danger{border-left-color:var(--error);}
.callout-label{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--text-muted);
  flex-shrink:0;
  padding-top:3px;
}
@media (max-width:560px){
  .callout{flex-direction:column;gap:6px;}
}

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

.table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  margin-bottom:18px;
}
.data-table{
  width:100%;
  min-width:560px;
  border-collapse:collapse;
  font-size:13px;
  background:var(--bg-panel);
}
.data-table th{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--text-muted);
  text-align:left;
  font-weight:500;
  padding:10px 14px;
  border-bottom:1px solid var(--border);
  background:var(--bg-panel2);
  white-space:nowrap;
}
.data-table td{
  padding:10px 14px;
  border-bottom:1px solid var(--hairline);
  vertical-align:top;
}
.data-table tr:last-child td{border-bottom:none;}
.data-table code{font-size:12px;}

/* 裸表格防御:写手可能输出不带 .table-wrap 的裸 table */
.prose>.data-table{
  display:block;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  max-width:100%;
  min-width:0;
  border:1px solid var(--border);
}

/* ==========================================================================
   文末下载引导卡(博客文章页)
   ========================================================================== */

.endcard{
  border:1px solid var(--border);
  background:var(--bg-panel);
  padding:26px 28px;
  margin-top:44px;
  position:relative;
  overflow-x:clip;
}
.endcard::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:1px;
  margin-left:-0.5px;
  background:linear-gradient(180deg,var(--seam-edge),var(--seam-core) 30%,var(--seam-core) 70%,var(--seam-edge));
  opacity:.5;
  pointer-events:none;
}
.endcard-title{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:700;
  margin-bottom:8px;
  text-align:center;
  position:relative;
}
.endcard-desc{
  font-size:13.5px;
  color:var(--text-muted);
  text-align:center;
  max-width:520px;
  margin:0 auto 18px;
  position:relative;
}
.endcard-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  position:relative;
}

/* ==========================================================================
   面包屑(博客文章页)
   ========================================================================== */

.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:12.5px;
  color:var(--text-muted);
  margin-top:22px;
  margin-bottom:22px;
}
.crumbs a{color:var(--text-muted);border-bottom:1px solid var(--hairline);}
.crumbs a:hover{color:var(--text);}
.crumbs-sep{color:var(--border);flex-shrink:0;}
.crumbs-now{
  color:var(--text);
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

/* ==========================================================================
   .dl-fab 右下角常驻下载引导(博客文章页使用;主页面本站不放)
   ========================================================================== */

.dl-fab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:80;
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--accent);
  color:var(--on-accent);
  border:1px solid var(--accent-dark);
  border-radius:var(--radius);
  font-family:var(--font-display);
  font-size:13.5px;
  font-weight:600;
  letter-spacing:.05em;
  padding:11px 20px;
  min-height:44px;
}
.dl-fab:hover{background:var(--accent-dark);}
.dl-fab svg{
  width:14px;
  height:14px;
  flex-shrink:0;
  display:block;
}
@media (max-width:640px){
  .dl-fab{right:12px;bottom:12px;padding:10px 16px;}
}