/* ============================================================
   Clash新手指南 · 「组装式图解说明书」设计系统 —— 组件层
   ============================================================ */

/* ============ Hero 分屏(首页首屏,与拍板稿一致) ============ */
.hero{
  display:grid;
  grid-template-columns:53% 47%;
  min-height:calc(100vh - var(--head-h) - 56px);
  position:relative;
  overflow-x:clip;
}

/* 左半屏:装订孔边 + 警示胶带条 + 纯排版 */
.hero-left{
  position:relative;
  border-right:var(--line) solid var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:34px 44px 34px 104px;
  overflow:hidden;
}
.binding{
  position:absolute;left:0;top:0;bottom:0;width:36px;
  border-right:var(--line) solid var(--ink);
  background:var(--panel);
}
.binding svg{width:100%;height:100%;}

.sec-label{
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
  letter-spacing:.14em;margin-bottom:12px;
}
.tape{width:220px;max-width:100%;height:16px;border:var(--line) solid var(--ink);margin-bottom:22px;}
.tape svg{width:100%;height:100%;}

.hero-title{font-family:var(--font-display);line-height:1.12;max-width:600px;}
.hero-title .brand-line{
  display:block;font-size:clamp(48px,4.6vw,66px);font-weight:900;letter-spacing:.01em;
}
.hero-title .kw-line{
  display:inline-block;font-size:clamp(18px,1.6vw,23px);font-weight:900;
  margin-top:14px;padding:5px 14px;
  background:var(--panel);border:var(--line) solid var(--ink);
}
.hero-sub{margin-top:16px;font-size:20px;font-weight:900;letter-spacing:.06em;}
.hero-desc{margin-top:10px;font-size:15px;line-height:1.8;color:var(--ink-soft);max-width:500px;}
.hero-desc strong{color:var(--ink);font-weight:900;}

.hero-cta{display:flex;gap:14px;margin-top:24px;flex-wrap:wrap;}

.hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.hero-chips li{
  display:inline-flex;align-items:center;gap:8px;
  border:var(--line) solid var(--ink);background:var(--panel);
  padding:5px 12px;font-size:13px;font-weight:700;
  max-width:100%;overflow:hidden;
}
.hero-chips code{
  font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);
  background:none;border:none;padding:0 8px 0 0;
  border-right:var(--line) solid var(--ink);
  overflow-wrap:normal;flex-shrink:0;
}
.hero-facts{
  margin-top:20px;padding-top:12px;max-width:520px;
  border-top:var(--line) dashed var(--ink);
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
  letter-spacing:.04em;line-height:1.7;
}
.hero-facts b{color:var(--ink);font-weight:700;}

/* 右半屏:图解 */
.hero-right{
  padding:28px 56px 24px 40px;
  display:flex;flex-direction:column;justify-content:center;gap:16px;
  background:var(--paper);
  min-width:0;
}
.fig-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  border-bottom:var(--line) solid var(--ink);padding-bottom:8px;
}
.fig-head .fig-no{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;color:var(--ink-soft);flex-shrink:0;}
.fig-head .fig-title{font-family:var(--font-display);font-weight:900;font-size:15px;}
.fig-wrap{border:var(--line) solid var(--ink);background:var(--panel);padding:8px 10px;}
.fig-wrap svg{width:100%;height:auto;}
.fig-note{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);text-align:right;}

/* 零件清单(五平台) */
.parts{border:var(--line) solid var(--ink);background:var(--panel);}
.parts-head{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  border-bottom:var(--line) solid var(--ink);
  padding:6px 12px;
}
.parts-head .p-title{font-family:var(--font-display);font-weight:900;font-size:13px;}
.parts-head .p-code{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.1em;flex-shrink:0;}
.parts-row{display:grid;grid-template-columns:repeat(5,1fr);}
.parts-row li{
  display:flex;flex-direction:column;align-items:center;gap:5px;
  padding:10px 6px 9px;
  border-right:var(--line) solid var(--ink);
  min-width:0;
}
.parts-row li:last-child{border-right:none;}
.parts-row .p-name{font-size:12px;font-weight:700;}
.parts-row .p-id{font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);}
.parts-row svg{width:26px;height:26px;flex-shrink:0;}

/* 下一区块露头 */
.next-peek{
  height:56px;overflow:hidden;
  border-top:var(--line) solid var(--ink);
  background:var(--panel-2);
  display:flex;align-items:flex-start;gap:16px;
  padding:12px 64px 0;
}
.next-peek .peek-arr{width:26px;height:26px;margin-top:6px;flex-shrink:0;}
.next-peek .peek-txt{font-family:var(--font-display);font-weight:900;font-size:18px;padding-top:8px;white-space:nowrap;}
.next-peek .peek-mono{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);padding-top:14px;}

/* ============ 装配工序表(首页特性区 / 内页分区) ============ */
.steps{display:flex;flex-direction:column;}
.step{
  display:grid;grid-template-columns:150px 1fr;gap:26px;
  border:var(--line) solid var(--ink);background:var(--panel);
  padding:24px 26px;min-width:0;
}
.step>*{min-width:0;}
.step-side{display:flex;flex-direction:column;gap:12px;align-items:flex-start;flex-shrink:0;}
.step-no{
  font-family:var(--font-display);font-weight:900;
  font-size:clamp(54px,6vw,84px);line-height:1;
  color:var(--accent);
  -webkit-text-stroke:var(--line) var(--ink);
  letter-spacing:.02em;
}
.step-fig svg{width:64px;height:64px;}
.step-title{font-size:22px;font-weight:900;margin-bottom:8px;}
.step-list li{position:relative;padding-left:18px;font-size:15px;line-height:1.85;margin-top:5px;margin-bottom:5px;}
.step-list li::before{content:"";position:absolute;left:0;top:12px;width:7px;height:7px;background:var(--ink);}
.step-part{
  display:inline-block;margin-top:12px;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;
  border:var(--line) solid var(--ink);background:var(--panel-2);
  padding:3px 9px;
}
/* 工序间橙色虚线箭头(竖向串联) */
.step-joint{display:flex;justify-content:center;padding-top:6px;padding-bottom:6px;}
.step-joint svg{width:26px;height:36px;}

/* ============ Tab 切换(下载页平台货架等) ============ */
.tab-rail{
  display:flex;
  border:var(--line) solid var(--ink);background:var(--panel);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.tab-rail [role="tab"]{
  flex-shrink:0;
  font-family:var(--font-display);font-weight:700;font-size:15px;
  color:var(--ink-soft);
  padding:11px 20px;
  border-right:var(--line) solid var(--ink);
  cursor:pointer;white-space:nowrap;
}
.tab-rail [role="tab"]:hover{background:var(--panel-2);color:var(--ink);}
.tab-rail [role="tab"][aria-selected="true"]{
  background:var(--accent);color:var(--ink);font-weight:900;
}
.tab-rail .tab-code{
  font-family:var(--font-mono);font-size:10px;display:block;letter-spacing:.08em;
}
.tab-pane{
  border:var(--line) solid var(--ink);border-top:none;
  background:var(--panel);padding:22px;min-width:0;
}
.tab-pane[hidden]{display:none;}

/* ============ 长页分类跳转导航(toc) ============ */
.toc-tabs{
  display:flex;
  border:var(--line) solid var(--ink);background:var(--panel);
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:22px;margin-bottom:22px;
}
.toc-tabs a{
  flex-shrink:0;padding:11px 18px;
  font-size:14px;font-weight:700;color:var(--ink-soft);
  border-right:var(--line) solid var(--ink);white-space:nowrap;
}
.toc-tabs a:hover{color:var(--ink);background:var(--panel-2);}
.toc-tabs .toc-no{font-family:var(--font-mono);font-size:11px;color:var(--accent-deep);margin-right:6px;}

/* ============ FAQ 折叠项 ============ */
.faq-item{border:var(--line) solid var(--ink);background:var(--panel);margin-bottom:14px;}
.faq-item summary{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:15px 18px;
  font-family:var(--font-display);font-weight:900;font-size:16px;
  cursor:pointer;list-style:none;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{background:var(--panel-2);}
.faq-mark{font-family:var(--font-mono);font-weight:700;color:var(--accent-deep);flex-shrink:0;}
.faq-mark::before{content:"[+]";}
.faq-item[open] .faq-mark::before{content:"[-]";}
.faq-a{
  border-top:var(--line) dashed var(--ink);
  padding:12px 18px 16px;
}
.faq-a p{font-size:14px;line-height:1.85;color:var(--ink-soft);margin-top:6px;margin-bottom:6px;}
.faq-a code{background:var(--panel-2);}

/* ============ 术语卡 ============ */
.term-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.term-grid>*{min-width:0;}
.term-card{border:var(--line) solid var(--ink);background:var(--panel);padding:16px 18px;min-width:0;}
.term-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border-bottom:var(--line) solid var(--ink);padding-bottom:8px;margin-bottom:10px;
}
.term-head h3{font-size:16px;font-weight:900;}
.term-code{
  font-family:var(--font-mono);font-size:10px;color:var(--ink-soft);letter-spacing:.08em;
  background:none;border:none;padding:0;flex-shrink:0;
}
.term-card p{font-size:14px;line-height:1.85;color:var(--ink-soft);}

/* ============ 下载客户端卡片 ============ */
.dl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;}
.dl-grid>*{min-width:0;}
.dl-card{
  border:var(--line) solid var(--ink);background:var(--panel);
  padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0;
}
.dl-card-head{display:flex;align-items:center;gap:14px;}
.dl-card-head img{width:52px;height:52px;flex-shrink:0;}
.dl-id{min-width:0;}
.dl-name{font-size:18px;font-weight:900;}
.dl-meta{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.04em;}
.dl-desc{font-size:14px;line-height:1.8;color:var(--ink-soft);}
.dl-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;}
/* 版本号槽位:默认 hidden 不可见,downloads.js 取到非空 latest 才填充显示 */
.dl-ver{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);}
.dl-ver[hidden]{display:none;}

/* 徽章(渲染动态文本必须自带宽度防御) */
.badge{
  display:inline-flex;align-items:center;
  font-family:var(--font-display);font-weight:900;font-size:12px;
  padding:3px 10px;
  border:var(--line) solid var(--ink);
  white-space:nowrap;max-width:100%;overflow:hidden;
  flex-shrink:0;
}
.badge-prime{background:var(--accent);color:var(--ink);}
.badge-rec{background:var(--panel-2);color:var(--ink);}
.badge-eol{background:var(--paper);color:var(--ink-soft);border-style:dashed;}

/* ============ 博客文章卡 ============ */
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.post-grid>*{min-width:0;}
.post-card{
  border:var(--line) solid var(--ink);background:var(--panel);
  padding:18px 20px;display:flex;flex-direction:column;gap:10px;min-width:0;
}
.post-card:hover{background:var(--panel-2);}
.post-meta{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);flex-wrap:wrap;}
.post-tag{
  font-family:var(--font-display);font-weight:700;font-size:11px;
  border:1px solid var(--ink);background:var(--panel-2);
  padding:2px 8px;
  white-space:nowrap;max-width:100%;overflow:hidden;
}
.post-title{font-size:17px;font-weight:900;line-height:1.4;}
.post-title a:hover{border-bottom:3px solid var(--accent);}
.post-sum{font-size:14px;line-height:1.8;color:var(--ink-soft);}
.post-more{margin-top:auto;font-family:var(--font-mono);font-size:12px;font-weight:700;color:var(--accent-deep);}

/* ============ 注意事项 / 引用块 .callout ============ */
.callout{
  display:flex;gap:14px;align-items:flex-start;
  border:var(--line) solid var(--ink);background:var(--panel);
  padding:14px 16px;margin-top:18px;margin-bottom:18px;
}
.callout-tri{flex-shrink:0;width:26px;}
.callout-tri svg{width:26px;height:24px;}
.callout-body{min-width:0;}
.callout-title{display:block;font-family:var(--font-display);font-weight:900;font-size:14px;}
.callout-body p{margin-top:4px;margin-bottom:0;font-size:14px;line-height:1.8;color:var(--ink-soft);}
.callout-ok .callout-tri polygon{fill:var(--ok);}
.callout-err .callout-tri polygon{fill:var(--err);}

/* ============ 面包屑(博客文章页) ============ */
.crumbs{
  display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;
  font-family:var(--font-mono);font-size:12px;color:var(--ink-soft);
  margin-top:22px;
}
.crumbs a:hover{color:var(--ink);border-bottom:2px solid var(--accent);}
.crumbs .sep{color:var(--accent-deep);}

/* ============ 数据表格 ============ */
.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;
  margin-top:16px;margin-bottom:16px;
}
.data-table{
  width:100%;min-width:520px;
  background:var(--panel);font-size:14px;
}
.data-table th,.data-table td{border:var(--line) solid var(--ink);padding:10px 14px;text-align:left;}
.data-table th{background:var(--panel-2);font-family:var(--font-display);font-weight:900;}
.data-table td{color:var(--ink-soft);}
.data-table code{background:var(--paper);}
/* 防御:写手输出不带 .table-wrap 的裸表格时,移动端自横滑不撑破 */
.prose > .data-table{
  display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;
  max-width:100%;min-width:0;
}

/* ============ 文末下载引导卡 ============ */
.dl-guide{
  border:var(--line) solid var(--ink);background:var(--panel);
  padding:24px 26px;margin-top:36px;
}
.dl-guide-cap{font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.14em;}
.dl-guide-title{font-size:22px;font-weight:900;margin-top:6px;}
.dl-guide p{margin-top:8px;font-size:14px;line-height:1.8;color:var(--ink-soft);}
.dl-guide-btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px;}

/* ============ 右下角常驻下载浮层 ============ */
.dl-fab{
  position:fixed;right:26px;bottom:26px;z-index:70;
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:var(--ink);
  border:var(--line) solid var(--ink);
  font-family:var(--font-display);font-weight:900;font-size:15px;
  padding:12px 20px;
}
.dl-fab:hover{background:var(--accent-deep);}
.dl-fab .fab-arr{font-family:var(--font-mono);font-weight:700;}

/* ============ 预览工具类(design-preview 用) ============ */
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;}
.swatches>*{min-width:0;}
.swatch{border:var(--line) solid var(--ink);background:var(--panel);}
.swatch-chip{height:64px;border-bottom:var(--line) solid var(--ink);}
.swatch-meta{padding:8px 10px;font-family:var(--font-mono);font-size:11px;line-height:1.6;color:var(--ink-soft);}
.swatch-meta b{color:var(--ink);font-weight:700;display:block;}
.sw-paper{background:var(--paper);}
.sw-panel{background:var(--panel);}
.sw-panel2{background:var(--panel-2);}
.sw-ink{background:var(--ink);}
.sw-ink-soft{background:var(--ink-soft);}
.sw-accent{background:var(--accent);}
.sw-accent-deep{background:var(--accent-deep);}
.sw-ok{background:var(--ok);}
.sw-err{background:var(--err);}
.type-specimen>div{border-bottom:1px dashed var(--ink-soft);padding-bottom:16px;margin-bottom:16px;}
.type-specimen>div:last-child{border-bottom:none;margin-bottom:0;}
.spec-note{display:block;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);margin-bottom:8px;letter-spacing:.08em;}
.spec-display{font-family:var(--font-display);font-weight:900;font-size:clamp(40px,5vw,64px);line-height:1.12;}
.spec-h2{font-family:var(--font-display);font-weight:900;font-size:30px;}
.spec-h3{font-family:var(--font-display);font-weight:900;font-size:20px;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}

/* ============ 组件响应式 ============ */
@media (max-width:1080px){
  .hero{grid-template-columns:1fr;min-height:0;}
  .hero-left{
    border-right:none;
    border-bottom:var(--line) solid var(--ink);
    padding:36px 28px 36px 88px;
  }
  .hero-right{padding:28px;}
  .next-peek{padding-left:var(--gutter);padding-right:var(--gutter);}
}
@media (max-width:760px){
  .step{grid-template-columns:1fr;gap:14px;padding:18px;}
  .step-side{flex-direction:row;align-items:center;gap:18px;}
  .tab-pane{padding:16px;}
}
@media (max-width:640px){
  .binding{display:none;}
  .hero-left{padding:32px var(--gutter);}
  .hero-right{padding:22px var(--gutter);}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{justify-content:center;}
  .parts-row li{padding:8px 4px;}
  .parts-row .p-name{font-size:10px;}
  .parts-row .p-id{font-size:9px;}
  .next-peek{gap:10px;}
  .next-peek .peek-txt{font-size:16px;}
  .dl-fab{right:14px;bottom:14px;padding:11px 16px;font-size:14px;}
  .dl-guide{padding:18px;}
}