.biometric-status-pair { min-width: 0; }

.status-biometric-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 138px;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.status-biometric-row > strong {
  min-width: 0;
  line-height: 1.35;
}

.biometric-monitor {
  --vital-color: #55f59a;
  position: relative;
  display: block;
  width: 138px;
  height: 42px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--vital-color) 34%, transparent);
  background:
    linear-gradient(rgba(85, 245, 154, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 245, 154, .045) 1px, transparent 1px),
    rgba(1, 13, 18, .88);
  background-size: 8px 8px;
  color: var(--vital-color);
  box-shadow: inset 0 0 13px rgba(0, 0, 0, .72), 0 0 10px color-mix(in srgb, var(--vital-color) 9%, transparent);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

.biometric-monitor.is-flatline {
  --vital-color: #ff5269;
  background:
    linear-gradient(rgba(255, 82, 105, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 82, 105, .045) 1px, transparent 1px),
    rgba(22, 3, 9, .9);
  background-size: 8px 8px;
}

.biometric-monitor::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255, 255, 255, .025) 4px);
}

.biometric-monitor svg {
  position: absolute;
  inset: 8px 0 0;
  width: 100%;
  height: 34px;
  overflow: hidden;
}

.biometric-monitor path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.biometric-baseline {
  stroke: currentColor;
  stroke-width: 1;
  opacity: .16;
}

.biometric-wave {
  color: var(--vital-color);
  filter: drop-shadow(0 0 3px currentColor);
  transform-box: view-box;
  transform-origin: 0 0;
  animation: biometric-wave-scroll 1.9s linear infinite;
}

.biometric-wave path {
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.biometric-flat-scan {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 46 194;
  filter: drop-shadow(0 0 4px currentColor);
  animation: biometric-flatline-scroll 1.55s linear infinite;
}

.biometric-sensor {
  fill: currentColor;
  filter: drop-shadow(0 0 4px currentColor);
  animation: biometric-sensor-live .95s ease-in-out infinite;
}

.is-flatline .biometric-sensor { animation: biometric-sensor-flat 1.55s linear infinite; }

.biometric-label {
  position: absolute;
  z-index: 4;
  top: 3px;
  left: 5px;
  display: flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--vital-color) 78%, white);
  font-family: var(--display);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}

.biometric-label i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--vital-color);
  box-shadow: 0 0 6px var(--vital-color);
  animation: biometric-label-pulse .95s ease-in-out infinite;
}

.is-flatline .biometric-label i { animation: biometric-flat-warning 1.55s steps(1, end) infinite; }

@keyframes biometric-wave-scroll {
  to { transform: translateX(-50%); }
}

@keyframes biometric-flatline-scroll {
  to { stroke-dashoffset: -240; }
}

@keyframes biometric-sensor-live {
  0%, 100% { opacity: .28; r: 1.5px; }
  15% { opacity: 1; r: 2.8px; }
  32% { opacity: .42; r: 1.8px; }
}

@keyframes biometric-sensor-flat {
  0%, 68%, 100% { opacity: .22; }
  78% { opacity: 1; }
}

@keyframes biometric-label-pulse {
  0%, 100% { opacity: .38; transform: scale(.8); }
  15% { opacity: 1; transform: scale(1.2); }
}

@keyframes biometric-flat-warning {
  0%, 62% { opacity: 1; }
  63%, 100% { opacity: .25; }
}

@media (max-width: 1050px) and (min-width: 561px) {
  .status-biometric-row { grid-template-columns: 1fr; }
  .biometric-monitor { width: 100%; max-width: 160px; }
}

@media (max-width: 560px) {
  .status-biometric-row { grid-template-columns: minmax(0, 1fr) 138px; }
}

@media (max-width: 390px) {
  .status-biometric-row { grid-template-columns: 1fr; }
  .biometric-monitor { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .biometric-wave,
  .biometric-flat-scan,
  .biometric-sensor,
  .biometric-label i { animation: none !important; }
}