/* ==========================================================================
   VPNOh — nodes.css
   线路页专属:页面头节奏、章节间距、线路类型小标、小旗填充、
   线路类型卡、选线建议版式与响应式收口。
   所有颜色/圆角/阴影一律引用 :root 设计令牌,不出现硬编码色值。
   ========================================================================== */

/* --- 1. 页面头 ----------------------------------------------------------- */
.nodes-head{padding-bottom:var(--sp-6)}
.nodes-head .eyebrow + h1{margin-top:14px}
.nodes-head .stat-band{margin-top:var(--sp-6)}

/* --- 2. 章节节奏 --------------------------------------------------------- */
.nodes-sec + .nodes-sec{margin-top:var(--sp-7)}
.nodes-sec > h2{margin-bottom:var(--sp-3)}
.nodes-sec > p{
  max-width:78ch;
  margin-bottom:var(--sp-4);
  font-size:15.5px;
  line-height:1.75;
  color:var(--text-muted);
}
.nodes-sec > .table-scroll{margin-top:var(--sp-4)}
.nodes-sec > .table-scroll + p{margin-top:var(--sp-4);margin-bottom:0}

/* --- 3. 表格内的线路类型小标 --------------------------------------------- */
.line-kind{
  display:inline-flex;
  align-items:center;
  gap:7px;
  white-space:nowrap;
  font-weight:600;
  color:var(--text);
}
.line-kind::before{
  content:"";
  width:8px;
  height:8px;
  flex:none;
  border-radius:2px;
  background:var(--hex-idle);
}
.line-kind.is-iepl::before{background:var(--accent)}
.line-kind.is-relay::before{background:var(--warn)}
.line-kind.is-direct::before{background:var(--success)}

/* --- 4. 小旗填充(全部取设计令牌) --------------------------------------- */
.nf-k{fill:var(--text)}
.nf-y{fill:var(--warn)}
.nf-o{fill:var(--warn)}
.nf-g{fill:var(--success)}
.nf-hair{fill:none;stroke:var(--border);stroke-width:1}
.nf-s-white{fill:none;stroke:var(--white);stroke-width:3.2}
.nf-s-red{fill:none;stroke:var(--flag-red);stroke-width:1.6}
.nf-s-g{fill:none;stroke:var(--success);stroke-width:2.8}

/* --- 5. 线路类型卡 ------------------------------------------------------- */
.type-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin-bottom:var(--sp-6);
}
.type-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:22px 20px 20px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  box-shadow:var(--shadow-card);
}
.type-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.type-mark{
  width:34px;
  height:34px;
  flex:none;
  border-radius:var(--r-sm);
  display:grid;
  place-items:center;
  color:var(--white);
}
.type-mark svg{width:19px;height:19px}
.type-card.is-iepl .type-mark{background:linear-gradient(135deg,var(--accent),var(--accent-dark))}
.type-card.is-relay .type-mark{background:var(--warn)}
.type-card.is-direct .type-mark{background:var(--success)}
.type-card h3{font-size:18px}
.type-card > p{font-size:14.5px;line-height:1.75;color:var(--text-muted)}
.type-facts{
  margin-top:16px;
  padding-top:14px;
  border-top:1px dashed var(--border);
  display:flex;
  flex-direction:column;
  gap:9px;
}
.type-facts > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 12px}
.type-facts dt{font-size:12.5px;font-weight:700;color:var(--text-muted);white-space:nowrap}
.type-facts dd{font-size:13.5px;line-height:1.6;color:var(--text);min-width:0}

/* --- 6. 选线建议 --------------------------------------------------------- */
.pick-grid{
  margin-top:var(--sp-5);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}
.pick-item{
  padding-left:16px;
  border-left:3px solid rgba(var(--accent-rgb),.35);
}
.pick-item h3{font-size:17px;margin-bottom:6px}
.pick-item p{font-size:14.5px;line-height:1.75;color:var(--text-muted);max-width:78ch}

/* --- 7. 收尾说明 --------------------------------------------------------- */
.nodes-foot-note{
  margin-top:var(--sp-5);
  font-size:13.5px;
  line-height:1.7;
  color:var(--text-muted);
}

/* --- 8. 响应式 ----------------------------------------------------------- */
@media (max-width:900px){
  .type-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:768px){
  .nodes-sec + .nodes-sec{margin-top:var(--sp-6)}
  .type-card{padding:20px 18px 18px}
}