/* ==========================================================================
   CKVPN · nodes.css
   节点/线路页专属样式:页首 / 线路类型卡 / 用途选线列表 / 覆盖地区墙 / 收尾面板
   仅引用 base.css 设计令牌,不散落硬编码颜色
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 页首
   -------------------------------------------------------------------------- */
.nodes-head{
  border-bottom:1px solid var(--border);
  padding-bottom:clamp(32px,4.5vw,56px);
}
.nodes-title{
  margin-top:12px;
}
.nodes-chips{
  margin-top:22px;
}
.nodes-toc{
  margin-top:26px;
}

/* --------------------------------------------------------------------------
   2. 线路总表区
   -------------------------------------------------------------------------- */
.nodes-table-space{
  margin-top:26px;
}
.nodes-note{
  margin-top:22px;
}

/* --------------------------------------------------------------------------
   3. 线路类型卡
   -------------------------------------------------------------------------- */
.ltype-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  margin-top:30px;
}
.ltype-grid > *{min-width:0}

.ltype-card{
  background:var(--bg-panel);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding-top:24px;
  padding-bottom:24px;
  padding-left:24px;
  padding-right:24px;
  transition:border-color .22s ease,background-color .22s ease;
}
.ltype-card:hover{
  border-color:var(--accent-dark);
  background:var(--bg-panel2);
}
.ltype-tag{
  display:block;
}
.ltype-card h3{
  margin-top:14px;
  font-size:17px;
  letter-spacing:.02em;
}
.ltype-card > p:not(.ltype-tag){
  margin-top:10px;
  font-size:13.5px;
  line-height:1.9;
  color:var(--text-muted);
}

.ltype-kv{
  margin-top:18px;
  border-top:1px solid var(--border);
}
.ltype-kv > div{
  display:flex;
  align-items:baseline;
  gap:14px;
  padding-top:10px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
}
.ltype-kv dt{
  flex-shrink:0;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.14em;
  color:var(--accent);
}
.ltype-kv dd{
  font-size:12.5px;
  line-height:1.75;
  color:var(--text-muted);
}

@media (max-width:960px){
  .ltype-grid{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------------------------------
   4. 小节标题与段落
   -------------------------------------------------------------------------- */
.nodes-subhead{
  margin-top:44px;
  margin-bottom:16px;
  padding-left:14px;
  border-left:2px solid var(--accent);
  font-size:17px;
}
.nodes-para{
  margin-top:18px;
  max-width:780px;
  font-size:14px;
  line-height:1.9;
  color:var(--text-muted);
}

/* --------------------------------------------------------------------------
   5. 用途选线列表
   -------------------------------------------------------------------------- */
.use-list{
  margin-top:28px;
  border-top:1px solid var(--border);
}
.use-row{
  display:grid;
  grid-template-columns:170px minmax(0,1fr);
  gap:28px;
  padding-top:26px;
  padding-bottom:26px;
  border-bottom:1px solid var(--border);
  transition:background-color .22s ease;
}
.use-row:hover{background:var(--bg-panel)}
.use-row > *{min-width:0}

.use-k{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.16em;
  color:var(--accent);
}
.use-k span{
  display:block;
  margin-top:6px;
  font-family:var(--font-body);
  font-size:15px;
  font-weight:700;
  letter-spacing:.04em;
  color:var(--text);
}
.use-body p{
  font-size:14px;
  line-height:1.95;
  color:var(--text-muted);
  max-width:720px;
}
.use-body a{
  color:var(--accent);
  border-bottom:1px solid var(--accent-dark);
}
.use-body a:hover{
  color:var(--text);
  border-bottom-color:var(--text);
}

@media (max-width:760px){
  .use-row{
    grid-template-columns:minmax(0,1fr);
    gap:12px;
  }
}

/* --------------------------------------------------------------------------
   6. 覆盖地区墙
   -------------------------------------------------------------------------- */
.region-wall{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin-top:28px;
}
.region-wall > *{min-width:0}

.region-col{
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding-top:18px;
  padding-bottom:18px;
  padding-left:20px;
  padding-right:20px;
}
.region-col-h{
  font-family:var(--font-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  color:var(--accent);
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.region-col ul{
  margin-top:12px;
  display:flex;
  flex-wrap:wrap;
  gap:6px 0;
}
.region-col li{
  font-size:13px;
  color:var(--text-muted);
  line-height:1.7;
}
.region-col li:not(:last-child)::after{
  content:"·";
  margin-left:8px;
  margin-right:8px;
  color:var(--border);
}

@media (max-width:960px){
  .region-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .region-wall{grid-template-columns:minmax(0,1fr)}
}

/* --------------------------------------------------------------------------
   7. 收尾面板
   -------------------------------------------------------------------------- */
.next-panel{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px 24px;
  margin-top:44px;
  background:var(--bg-panel);
  border:1px solid var(--border);
  padding-top:26px;
  padding-bottom:26px;
  padding-left:28px;
  padding-right:28px;
}
.next-panel-body{
  flex:1;
  min-width:240px;
}
.next-panel-t{
  font-size:17px;
  font-weight:800;
  letter-spacing:.02em;
  color:var(--text);
}
.next-panel-d{
  margin-top:8px;
  font-size:13.5px;
  line-height:1.85;
  color:var(--text-muted);
}
.next-panel .btn{flex-shrink:0}