/* ==========================================================================
   VPNCQ — home page layer
   Only what base.css / components.css do not already cover:
   the injected line-status block, section footer links, and rhythm helpers.
   Every colour, radius and shadow value comes from :root tokens.
   ========================================================================== */

/* ==========================================================================
   1. Line status (injected by servers.js into #server-status)
   Container stays in flow, clips its own grid, never overlays later blocks.
   ========================================================================== */

#server-status{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:2px var(--sp-5);
  margin:0 0 var(--sp-5);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg-panel);
  border:var(--hairline);
  border-radius:var(--r-md);
  box-shadow:var(--inset-glow), var(--shadow-soft);
  overflow:hidden;
  max-width:100%;
}

#server-status:empty{display:none;}

#server-status .srv-row{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  min-height:38px;
  min-width:0;
}

#server-status .srv-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
  flex:none;
  animation:srvBreathe 2.6s var(--ease) infinite;
}

@keyframes srvBreathe{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.5;transform:scale(.78);}
}

#server-status .srv-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:20px;
  height:14px;
  flex:none;
  border-radius:2px;
  overflow:hidden;
  font-size:12px;
  line-height:1;
}

#server-status .srv-name{
  flex:1 1 auto;
  min-width:0;
  font-size:13px;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#server-status .srv-type{
  display:inline-flex;
  align-items:center;
  flex:none;
  min-height:22px;
  padding:0 8px;
  border-radius:var(--r-xs);
  background:color-mix(in srgb, var(--bg-panel-2) 66%, var(--bg-panel));
  font-family:var(--font-mono);
  font-size:10.5px;
  color:var(--text-muted);
  white-space:nowrap;
}

#server-status .srv-ms,
#server-status .srv-bw{
  flex:none;
  font-family:var(--font-mono);
  font-size:11px;
  color:var(--text-muted);
  white-space:nowrap;
}

#server-status .srv-ms{
  font-weight:700;
  color:var(--accent-dark);
}

@media (max-width:768px){
  #server-status{grid-template-columns:minmax(0, 1fr);}
}

/* ==========================================================================
   2. Section footer links
   ========================================================================== */

.more-row{margin-top:var(--sp-5);}

.more-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:44px;
  font-size:14px;
  font-weight:700;
  color:var(--accent-dark);
}

.more-link svg{width:15px;height:15px;flex:none;}

.more-link:hover{color:var(--accent);}

/* ==========================================================================
   3. Block rhythm
   ========================================================================== */

.node-notes{margin-top:var(--sp-5);}

.plan-notes{margin-top:var(--sp-6);}

.pack-block{margin-top:var(--sp-6);}

.pack-block .h3{margin:0 0 var(--sp-3);}