/* ==========================================================================
   VPNMK · nodes.css(线路页专属)
   页头点阵装饰 / 地区徽章墙 / 线路类型卡 / 路径示意图 / 读表清单
   颜色、圆角、字体一律引用 base.css 的 :root 令牌。
   ========================================================================== */

/* ---------- 页头装饰点阵 ---------- */

.nodes-decor{
  position:absolute;
  top:0;
  right:-80px;
  width:420px;
  height:100%;
  min-height:260px;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(var(--ink-16) 1px,transparent 1px);
  background-size:22px 22px;
  opacity:.55;
  -webkit-mask-image:radial-gradient(62% 62% at 58% 42%,var(--text) 0%,transparent 76%);
  mask-image:radial-gradient(62% 62% at 58% 42%,var(--text) 0%,transparent 76%);
}

/* ---------- 地区徽章墙 ---------- */

.region-wall{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:10px;
  margin-top:28px;
}

.region-chip{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  min-height:44px;
  padding:0 12px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
  font-size:13px;
  color:var(--text-muted);
  letter-spacing:.01em;
}
.region-chip .flag{flex:none}
.region-chip span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--text);
}

/* ---------- 线路类型卡 ---------- */

.line-type-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

.line-type-card{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}

.lt-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.lt-k{
  font-size:10.5px;
  letter-spacing:.1em;
  color:var(--text-soft);
  white-space:nowrap;
}

.line-type-card h3{letter-spacing:-.02em}

.line-type-card > p{
  font-size:13.5px;
  line-height:1.78;
  color:var(--text-muted);
}

.lt-facts{
  margin-top:auto;
  display:flex;
  flex-direction:column;
}
.lt-facts > div{
  display:flex;
  gap:10px;
  min-width:0;
  padding:9px 0;
  border-top:1px solid var(--border);
}
.lt-facts dt{
  flex:none;
  width:4.6em;
  font-size:11.5px;
  line-height:1.65;
  letter-spacing:.02em;
  color:var(--text-soft);
}
.lt-facts dd{
  min-width:0;
  font-size:12.5px;
  line-height:1.65;
  color:var(--text-muted);
}

/* ---------- 路径示意图 ---------- */

.route-figure{
  display:block;
  width:100%;
  max-width:640px;
  height:auto;
  margin:0 auto 10px;
}

.route-cap{
  max-width:640px;
  margin:0 auto 30px;
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  line-height:1.7;
  letter-spacing:.06em;
  color:var(--text-soft);
}

/* ---------- 表下说明 ---------- */

.nodes-note{
  margin-top:16px;
  padding:14px 16px;
  border:1px dashed var(--border-strong);
  border-radius:var(--r-md);
  background:var(--bg-panel2);
  font-size:13px;
  line-height:1.78;
  color:var(--text-muted);
}
.nodes-note strong{color:var(--text)}

/* ---------- 选线建议正文 ---------- */

.picks-prose{margin-top:26px}
.picks-prose p{font-size:14.5px;line-height:1.85}
.picks-prose strong{color:var(--text)}

/* ---------- 读表清单 ---------- */

.read-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}
.read-list li{
  display:flex;
  gap:12px;
  min-width:0;
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--r-md);
  background:var(--bg-panel);
}
.read-list .rk{
  flex:none;
  padding-top:3px;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.1em;
  color:var(--accent-dark);
}
.read-list .rt{
  font-size:14px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--text);
}
.read-list .rd{
  margin-top:5px;
  font-size:13px;
  line-height:1.72;
  color:var(--text-muted);
}

.read-list + .callout{margin-top:22px}

/* ---------- 响应式 ---------- */

@media (max-width:1080px){
  .line-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .read-list{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:760px){
  .nodes-decor{display:none}
  .line-type-grid{grid-template-columns:minmax(0,1fr)}
  .region-wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .route-cap{margin-bottom:22px;letter-spacing:.03em}
  .nodes-note{padding:12px 14px;font-size:12.5px}
}

@media (max-width:420px){
  .region-wall{grid-template-columns:minmax(0,1fr)}
  .read-list li{padding:14px}
}