/* ──────────────────────────────────────────────────────────────────────────
   Servers page (#sv). Live dedicated-box pulses + the load-test kit.
   Tokens come from theme.css. Everything here is scoped to #sv so the
   dashboard health tile keeps the compact .health row it already has.
   Type: micro 10 · tiny 11.5 · small 13 · body 14 · h2 18.
   ────────────────────────────────────────────────────────────────────────── */

#sv .sv-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-4);
  margin-bottom:var(--sp-5);
}
#sv .sv-card,#sv .sv-kit{
  background:var(--bg-panel);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:var(--sp-4);
}
#sv .sv-head{display:flex;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-4)}
#sv .sv-head .status{margin-top:7px}
#sv .sv-title{flex:1;min-width:0}
#sv .sv-title h2{font-size:var(--fs-h2);font-weight:700;color:var(--text-bright);margin:0}
#sv .sv-title p{font-size:var(--fs-tiny);color:var(--text-dim);margin:3px 0 0}
#sv .sv-head-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex-shrink:0}
#sv .sv-age{display:inline-block;font-size:var(--fs-tiny);color:var(--text-faint);font-variant-numeric:tabular-nums}
#sv .sv-age::first-letter{text-transform:uppercase}

#sv .sv-heroes{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--sp-3);
  margin-bottom:var(--sp-3);
}
#sv .sv-hero{min-width:0}
#sv .sv-hero-lbl{display:block;font-size:12px;font-weight:600;color:var(--text-dim);margin-bottom:2px}
#sv .sv-hero-n{display:block;font-size:22px;font-weight:700;color:var(--text-bright);font-variant-numeric:tabular-nums;line-height:1.15}
#sv .sv-hero-n small{font-size:var(--fs-tiny);font-weight:600;color:var(--text-faint)}
#sv .sv-hero-sub{display:block;font-size:var(--fs-micro);color:var(--text-faint);margin-top:2px}
#sv .sv-hero-hot .sv-hero-n{color:var(--warning)}
#sv .sv-bar{height:4px;background:var(--bg-base);border-radius:99px;margin-top:8px;overflow:hidden}
#sv .sv-bar i{display:block;height:100%;background:var(--accent);border-radius:99px}

#sv .sv-who{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-3)}
#sv .sv-chip{
  font-size:var(--fs-tiny);color:var(--text);background:var(--bg-base);
  border:1px solid var(--border);border-radius:99px;padding:2px 8px;
}
#sv .sv-note{font-size:var(--fs-tiny);color:var(--text-faint);margin:0 0 var(--sp-3)}

#sv .sv-charts{display:flex;flex-direction:column;gap:var(--sp-4);margin-bottom:var(--sp-4)}
#sv .sv-plot{min-width:0}
#sv .sv-plot-head{
  display:flex;align-items:baseline;gap:var(--sp-3);flex-wrap:wrap;
  font-size:var(--fs-tiny);color:var(--text);margin-bottom:6px;
}
#sv .sv-plot-head>span:first-child{font-weight:700}
#sv .sv-legend{margin-left:auto;display:flex;gap:12px}
#sv .sv-leg{display:inline-flex;align-items:center;gap:5px;color:var(--text-faint);font-size:var(--fs-micro)}
#sv .sv-leg i{width:10px;height:2px;border-radius:1px;background:var(--accent)}
#sv .sv-leg.b i{background:var(--teal)}
#sv .sv-leg.c i{background:var(--warning)}
#sv .sv-leg.d i{background:var(--danger)}
#sv .sv-plot-body{position:relative}
#sv .sv-plot-svg{display:block;width:100%;height:168px}
#sv .sv-gline{stroke:var(--border);stroke-width:1}
#sv .sv-gline-v{stroke-opacity:.55}
#sv .sv-axis{fill:var(--text-faint);font-size:9px;font-family:var(--font-mono)}
#sv .sv-axis-x{fill:var(--text-faint)}
#sv .sv-ref{stroke:var(--warning);stroke-width:1;stroke-dasharray:3 3}
#sv .sv-ref-lbl{fill:var(--warning);font-size:9px;font-family:var(--font-mono)}
#sv .sv-line{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
#sv .sv-line.b{stroke:var(--teal)}
#sv .sv-area{fill:var(--accent);opacity:.14}
#sv .sv-area.b{fill:var(--teal)}
#sv .sv-bar-s{fill:var(--accent)}
#sv .sv-bar-s.b{fill:var(--teal)}
#sv .sv-bar-s.c{fill:var(--warning)}
#sv .sv-bar-s.d{fill:var(--danger)}
#sv .sv-dot{fill:var(--accent)}
#sv .sv-dot.b{fill:var(--teal)}
#sv .sv-cross[hidden]{display:none}
#sv .sv-cross-x{stroke:var(--text-faint);stroke-width:1;stroke-dasharray:2 3}
#sv .sv-cross-dot{fill:var(--text-bright);stroke:var(--bg-panel);stroke-width:1.5}
#sv .sv-cross-dot.b{fill:var(--teal)}
#sv .sv-readout{
  position:absolute;left:36px;top:0;font-size:var(--fs-micro);font-family:var(--font-mono);
  color:var(--text-bright);background:var(--bg-panel);padding:1px 6px;pointer-events:none;
}

#sv .sv-press{display:grid;gap:4px;margin-bottom:var(--sp-3);font-size:var(--fs-tiny);color:var(--text-dim)}
#sv .sv-press dt{display:inline;font-weight:600;color:var(--text-dim);font-size:12px;margin-right:8px}
#sv .sv-press dd{display:inline;margin:0}
#sv .sv-hot{color:var(--warning);font-weight:700}

#sv .sv-meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;margin:0 0 var(--sp-3)}
#sv .sv-kv{min-width:0}
#sv .sv-kv-wide{grid-column:1 / -1}
#sv .sv-kv dt{font-size:12px;font-weight:600;color:var(--text-dim)}
#sv .sv-kv dd{margin:1px 0 0;font-size:var(--fs-small);color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#sv .sv-kv-wide dd{white-space:normal}
#sv .sv-kv dd.mono,#sv .mono{font-family:var(--font-mono);font-size:var(--fs-tiny)}

#sv .sv-copy{display:flex;align-items:flex-end;gap:var(--sp-3);margin-bottom:var(--sp-2)}
#sv .sv-copy .sv-kv{flex:1;min-width:0}
#sv .sv-copy .btn{flex-shrink:0}

#sv .sv-kit{margin-top:0}
#sv .sv-kit-head{margin-bottom:var(--sp-3)}
#sv .sv-kit-head h2{font-size:var(--fs-h2);font-weight:700;color:var(--text-bright);margin:0}
#sv .sv-kit-head p{font-size:var(--fs-small);color:var(--text-dim);margin:4px 0 0;max-width:62ch}
#sv .sv-warn{
  font-size:var(--fs-small);color:var(--warning);
  border:1px solid rgba(223,176,107,.35);background:rgba(223,176,107,.08);
  border-radius:var(--radius-sm);padding:8px 12px;margin-bottom:var(--sp-4);
}
#sv .sv-cmds{margin-bottom:var(--sp-3)}
#sv .sv-play{font-size:var(--fs-small);color:var(--text-dim);margin:0 0 var(--sp-4)}
#sv .sv-profiles{width:100%;border-collapse:collapse}
#sv .sv-profiles caption{text-align:left;font-size:13px;font-weight:650;color:var(--text-dim);margin-bottom:8px}
#sv .sv-profiles th{text-align:left;font-weight:600;padding:6px 12px 6px 0;white-space:nowrap;vertical-align:top;width:1%}
#sv .sv-profiles td{padding:6px 0;font-size:var(--fs-small);color:var(--text-dim);border-top:1px solid var(--border)}
#sv .sv-profiles th{border-top:1px solid var(--border)}
#sv .sv-profiles tr:first-child th,#sv .sv-profiles tr:first-child td{border-top:none}
#sv .sv-profiles code{font-family:var(--font-mono);font-size:var(--fs-tiny);color:var(--text)}

@media (max-width:900px){
  #sv .sv-grid,#sv .sv-meta{grid-template-columns:1fr}
  /* four numbers, two by two: a column of four wasted a phone's whole first screen */
  #sv .sv-heroes{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-3) var(--sp-4)}
  #sv .sv-plot-svg{height:120px}
}
@media (prefers-reduced-motion:reduce){
  #sv .sv-line{stroke-width:1.3}
}