/* ==========================================================================
   VPNDH · nodes.css
   线路列表页（zh-CN/servers.html）专属样式。
   只补充本页需要的部件：国旗小徽章配色类、地区徽章墙、线路类型卡、
   用途表首列、选线小节、收尾区块。颜色一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ---------- 1. 国旗小徽章（消费 --flag-* 令牌） ---------- */
.fl-red{fill:var(--flag-red)}
.fl-white{fill:var(--bg-panel)}
.fl-blue{fill:var(--flag-blue)}
.fl-gold{fill:var(--flag-gold)}
.fl-ink{fill:var(--flag-ink)}
.fl-green{fill:var(--success)}
.fl-ring{fill:none;stroke:var(--ink-12);stroke-width:1}

/* ---------- 2. 页头 ---------- */
.nodes-head{
  padding-top:var(--sp-7);
  padding-bottom:var(--sp-6);
}
.nodes-head h1{margin-bottom:var(--sp-4)}
.nodes-head .lede{max-width:68ch}

.region-wall{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:var(--sp-5) 0 0;
}
.region-wall li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  max-width:100%;
  min-height:28px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-pill);
  background:var(--bg-panel);
  font-size:12px;
  color:var(--text-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.region-wall li::before{
  content:"";
  flex:none;
  width:5px;
  height:5px;
  border-radius:50%;
  background:var(--accent);
}
.nodes-head .fact-band{margin-top:var(--sp-5)}

/* ---------- 3. 章节节奏 ---------- */
.node-sec{
  padding-top:var(--sp-6);
  padding-bottom:var(--sp-6);
}
.node-sec > h2{margin-bottom:var(--sp-3)}
.node-sec > p{
  max-width:74ch;
  font-size:14.5px;
  line-height:1.78;
  color:var(--text-muted);
}
.node-sec > .table-scroll{margin-top:var(--sp-2)}
.node-sec > .callout{margin-top:var(--sp-4)}
.node-sec > .card-grid{margin-top:var(--sp-4)}
.node-sec > .faq{margin-top:var(--sp-4)}

/* 线路表：首列给旗帜留出稳定宽度，末列允许换行 */
.line-table th:first-child,
.line-table td:first-child{min-width:132px}
.line-table td:last-child{white-space:normal}

/* ---------- 4. 线路类型卡 ---------- */
.type-card{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.type-card .tag{align-self:flex-start}
.type-card h3{margin:0}
.type-card p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--text-muted);
}
.type-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  margin:6px 0 0;
  padding-top:12px;
  border-top:1px dashed var(--ink-12);
  font-size:12.5px;
  line-height:1.62;
  color:var(--text-muted);
}
.type-list li{
  display:flex;
  align-items:flex-start;
  gap:7px;
}
.type-list li::before{
  content:"";
  flex:none;
  width:5px;
  height:5px;
  margin-top:7px;
  border-radius:50%;
  background:var(--accent);
}
.type-list strong{color:var(--text);font-weight:600}

/* ---------- 5. 用途表 ---------- */
.use-table td:first-child{
  color:var(--text);
  font-weight:600;
  white-space:nowrap;
}
.use-table td:last-child{min-width:200px}

/* ---------- 6. 选线小节 ---------- */
.pick{
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
  margin-top:var(--sp-5);
}
.pick h3{
  margin:0 0 6px;
  font-size:15px;
}
.pick p{
  margin:0;
  max-width:74ch;
  font-size:14px;
  line-height:1.78;
  color:var(--text-muted);
}

/* ---------- 7. 收尾区块（浅色，不重复深色 CTA 带） ---------- */
.closing-cta{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--sp-5);
  align-items:center;
  padding:24px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:linear-gradient(135deg,var(--bg-panel) 0%,var(--accent-04) 100%);
  box-shadow:var(--shadow-soft),var(--edge-light);
}
.closing-cta h2{
  margin:0 0 6px;
  font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem);
}
.closing-cta p{
  margin:0;
  max-width:58ch;
  font-size:13.5px;
  line-height:1.72;
  color:var(--text-muted);
}

/* ---------- 8. 窄屏 ---------- */
@media (max-width:980px){
  .closing-cta{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
}
@media (max-width:640px){
  .nodes-head{padding-top:var(--sp-6)}
  .node-sec{
    padding-top:var(--sp-5);
    padding-bottom:var(--sp-5);
  }
  .line-table th:first-child,
  .line-table td:first-child{min-width:112px}
  .region-wall li{font-size:11.5px;padding:0 10px}
  .closing-cta{padding:20px}
  .closing-cta .btn{width:100%}
  .closing-cta .cta-actions{width:100%}
}