/* ==========================================================================
   VPNDH · home.css
   首页专属样式：线路状态容器（servers.js 注入位）、首屏装置结构补丁、
   区块之间的间距辅助。视觉语言全部沿用 base.css / components.css 令牌。
   ========================================================================== */

/* ---------- 1. 线路状态容器（脚手架 servers.js 注入位） ---------- */
/* #server-status 在 components.css 里已声明 overflow/margin 等静态约束；
   此处用同优先级 ID 选择器补上排布方式，保证注入后自己长出高度、不压后文。 */
#server-status{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:var(--sp-5);
}
#server-status:empty{display:none}

.srv-row{
  flex:1 1 calc(50% - 3px);
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  padding:9px 14px;
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  background:var(--bg-panel);
  box-shadow:var(--shadow-soft),var(--edge-light);
  font-size:12.5px;
  color:var(--text);
}
.srv-dot{
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px var(--success-10);
  animation:srv-breathe 2.6s ease-in-out infinite;
}
@keyframes srv-breathe{
  0%,100%{opacity:1}
  50%{opacity:.42}
}
.srv-flag{
  display:inline-flex;
  align-items:center;
  flex:none;
  font-size:13px;
  line-height:1;
}
.srv-name{
  flex:none;
  font-weight:600;
  white-space:nowrap;
}
.srv-type{
  flex:none;
  padding:2px 7px;
  border:1px solid var(--accent-20);
  border-radius:var(--r-pill);
  background:var(--accent-06);
  color:var(--accent);
  font-size:10.5px;
  font-weight:600;
  line-height:1.5;
  white-space:nowrap;
}
.srv-ms{
  margin-left:auto;
  font-family:var(--font-mono);
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  color:var(--text-muted);
  white-space:nowrap;
}
.srv-bw{
  font-family:var(--font-mono);
  font-size:11.5px;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  color:var(--text-muted);
  white-space:nowrap;
}

/* ---------- 2. 首屏装置结构补丁 ---------- */
/* 导航窗左栏容器：grid 子项需要 min-width:0 才不会在窄屏被内容顶宽 */
.route-col{
  display:flex;
  flex-direction:column;
  min-width:0;
}
/* 装置底缘的航迹弧用淡墨绘制，避免 1px 线在瓷白底上过重 */
.hero .orbit{color:var(--ink-16)}
/* 手写批注下方的描线宽度跟随文字，不撑破装置 */
.scribble-line{
  display:block;
  width:100%;
  max-width:180px;
  height:auto;
}

/* ---------- 3. 区块间距辅助 ---------- */
.sec-foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 20px;
  margin-top:var(--sp-5);
}
.sec .callout{margin-top:var(--sp-5)}
.line-groups + .callout{margin-top:var(--sp-5)}
.line-groups + .lede{margin-top:var(--sp-5)}
.platform-grid + .lede{margin-top:var(--sp-5)}

/* ---------- 4. 响应式 ---------- */
@media (max-width:640px){
  .srv-row{flex:1 1 100%}
  .srv-ms{margin-left:auto}
  .scribble-line{max-width:150px}
}
@media (prefers-reduced-motion:reduce){
  .srv-dot{animation:none}
}