/* ============================================================
   VPNFP nodes.css — servers.html (线路/节点页)
   page-specific styles only; tokens & shared components
   live in base.css / components.css
   ============================================================ */

/* ---- page head ---- */
.doc-head{
  text-align:center;
  padding-top:56px;
  padding-bottom:12px;
}
.doc-head h1{
  margin:18px 0 14px;
}
.doc-lead{
  max-width:64ch;
  margin:0 auto 20px;
  color:var(--text-muted);
  font-size:16px;
}
.doc-lead strong{color:var(--text);font-weight:600}
.doc-head .fact-caps{justify-content:center}

/* ---- decorative route sketch (aria-hidden) ---- */
.route-deco{
  max-width:720px;
  height:112px;
  margin:36px auto 0;
}
.route-deco svg{display:block;width:100%;height:100%}
.rd-line{
  stroke:var(--accent);
  stroke-width:1.6;
  fill:none;
  stroke-linecap:round;
}
.rd-line.faint{
  stroke:var(--border);
  stroke-width:1;
}
.rd-dot{
  fill:var(--bg);
  stroke:var(--accent);
  stroke-width:1.4;
}
.rd-dot.solid{
  fill:var(--accent);
  stroke:none;
}

/* ---- section rhythm inside the doc ---- */
.nodes-doc section{margin-top:60px}
.nodes-doc section > p{
  color:var(--text-muted);
  max-width:76ch;
}
.nodes-doc section > .callout{max-width:76ch}
.nodes-doc section > p a,
.nodes-doc .faq-body a{color:var(--accent)}
.nodes-doc .faq-body a:hover{text-decoration:underline}

/* ---- line-type cards ---- */
.type-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:28px 0;
}
.type-card{
  min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:24px 24px 20px;
  transition:border-color .15s ease;
}
.type-card:hover{border-color:var(--accent-dark)}
.type-card .tag{margin-bottom:14px}
.type-card h3{font-size:18px;margin-bottom:10px}
.type-card p{
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
  margin:0;
}
.type-card h3 + p{color:var(--text-muted)}

/* ---- use-case advice cards ---- */
.advice-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:28px;
}
.advice-card{
  min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:22px 24px 18px;
  border-left:3px solid var(--accent-dark);
  border-radius:0 var(--r-m) var(--r-m) 0;
  transition:border-color .15s ease;
}
.advice-card:hover{border-color:var(--accent-dark)}
.advice-card h3{font-size:16.5px;margin-bottom:10px}
.advice-card p{
  font-size:14px;
  line-height:1.8;
  color:var(--text-muted);
  margin:0;
}

/* ---- coverage region wall ---- */
.region-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  margin:26px 0;
}
.region-chip{
  min-width:0;
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--r-m);
  padding:16px 18px;
  transition:border-color .15s ease;
}
.region-chip:hover{border-color:var(--accent-dark)}
.rg-name{
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.16em;
  color:var(--accent);
  margin-bottom:8px;
}
.rg-cities{
  font-size:13px;
  line-height:1.7;
  color:var(--text-muted);
  margin:0;
}

/* ---- faq spacing ---- */
.nodes-doc .faq-item{margin-top:10px}
.nodes-doc .faq-item:first-of-type{margin-top:24px}

/* ---- breakpoints ---- */
@media (max-width:960px){
  .type-grid{grid-template-columns:1fr}
  .advice-grid{grid-template-columns:1fr}
  .doc-head{padding-top:40px}
  .route-deco{height:84px;margin-top:26px}
}
@media (max-width:640px){
  .nodes-doc section{margin-top:44px}
  .region-wall{grid-template-columns:1fr}
}