/* Vital Signs */
.vitals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(10,10,15,0.5);
}
@media (max-width: 700px){ .vitals { grid-template-columns: repeat(2, 1fr); } }

.vital {
  padding: 28px 20px;
  text-align: center;
  position: relative;
}
.vital:not(:nth-child(4n))::after {
  content: "";
  position: absolute;
  right: 0; top: 20px; bottom: 20px;
  width: 1px;
  background: rgba(0,255,255,0.15);
}
.vital:nth-child(n+5){
  border-top: 1px solid var(--border);
}
@media (max-width: 700px){
  .vital:not(:nth-child(4n))::after { display: none; }
  .vital:not(:nth-child(2n))::after {
    content: "";
    position: absolute;
    right: 0; top: 20px; bottom: 20px;
    width: 1px;
    background: rgba(0,255,255,0.15);
  }
  .vital:nth-child(n+3) { border-top: 1px solid var(--border); }
  .vital:nth-child(-n+2) { border-top: 0; }
}
.vital__val {
  font-family: var(--font-mono);
  font-size: clamp(32px, 3.8vw, 48px);
  font-weight: 700;
  line-height: 1;
}
.vital__val--green { color: var(--green); text-shadow: var(--text-glow-green); }
.vital__val--cyan  { color: var(--cyan);  text-shadow: var(--text-glow-cyan); }
.vital__val--amber { color: var(--amber); text-shadow: var(--text-glow-amber); }
.vital__lbl {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--track-wider);
  color: var(--fg-2);
  text-transform: uppercase;
}