/*
  Vital Check — hero "Live Monitor" render (CSS/SVG)
  A code-built product render: white panel resting on the hero surface with the
  single product shadow, a scrolling ECG waveform (echoing the logo), and vital tiles.
  Depends on the design tokens defined in styles.css.
*/

.monitor {
  margin-top: var(--s-xxl);
  width: 100%;
  max-width: 860px;
  text-align: left;
  background: var(--c-surface-card);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-product); /* product resting on the surface */
  padding: clamp(18px, 3vw, 28px);
}
.monitor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-sm);
  margin-bottom: var(--s-md);
}
.monitor__brand {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: var(--c-ink);
}
.monitor__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--c-ink-48);
  letter-spacing: -0.2px;
}
.monitor__dot {
  position: relative;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--c-primary);
}
.monitor__dot::after { /* expanding ring — transform/opacity only (no shadow) */
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--c-primary);
  animation: pulse 2s var(--ease) infinite;
}
@keyframes pulse {
  0% { transform: scale(1); opacity: 0.45; }
  70% { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* ECG strip */
.ecg {
  position: relative;
  height: clamp(96px, 16vw, 140px);
  background: var(--c-surface-inset);
  border-radius: var(--r-md);
  overflow: hidden;
}
.ecg__track {
  position: absolute;
  inset: 0;
  display: flex;
  width: 200%;
  animation: ecgScroll 6s linear infinite;
}
.ecg__svg { width: 50%; height: 100%; flex: 0 0 50%; }
.ecg__svg path {
  fill: none;
  stroke: var(--c-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@keyframes ecgScroll { to { transform: translateX(-50%); } }

/* Vital stat tiles */
.vitals {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-sm);
  margin-top: var(--s-md);
}
.vital {
  background: var(--c-surface-inset);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-md);
}
.vital__label {
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--c-ink-48);
}
.vital__value {
  font-family: var(--font-display);
  font-size: clamp(20px, 3vw, 26px);
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--c-ink);
  margin-top: 2px;
}
.vital__unit { font-size: 12px; font-weight: 400; color: var(--c-ink-48); margin-left: 3px; }

/* ============================================================
   Parent-care "daily check-in" card — health-tech section render
   ============================================================ */
.carecard {
  margin-top: var(--s-xxl);
  width: 100%;
  max-width: 520px;
  text-align: left;
  background: var(--c-surface-card);
  border: 1px solid var(--c-divider);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-product);
  padding: clamp(18px, 3vw, 26px);
}
.carecard__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--s-md);
}
.carecard__title {
  font-family: var(--font-display);
  font-size: 15px; font-weight: 600; letter-spacing: -0.2px;
  color: var(--c-ink);
}
.carecard__badge {
  font-size: 12px; font-weight: 600; letter-spacing: -0.12px;
  color: var(--c-primary);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  padding: 3px 10px;
}
.carecard__msg {
  font-size: 15px; line-height: 1.5; letter-spacing: -0.3px;
  color: var(--c-ink);
  background: var(--c-surface-inset);
  border-radius: var(--r-md);
  padding: var(--s-sm) var(--s-md);
  margin-bottom: var(--s-md);
  text-wrap: pretty;
}
.carecard__rows { display: flex; flex-direction: column; gap: var(--s-xs); margin: 0; }
.carecard__row {
  display: flex; align-items: baseline; justify-content: space-between;
  font-size: 14px; letter-spacing: -0.2px;
}
.carecard__row dt { color: var(--c-ink-48); }
.carecard__row dd { color: var(--c-ink); font-weight: 600; margin: 0; }
.carecard__row dd span { color: var(--c-primary); font-weight: 400; font-size: 12px; margin-left: 6px; }
.carecard__foot {
  margin-top: var(--s-md);
  font-size: 11px; letter-spacing: -0.1px;
  color: var(--c-ink-48);
}

/* Reduced motion: stop the live animations */
@media (prefers-reduced-motion: reduce) {
  .ecg__track { animation: none; transform: none; }
  .monitor__dot::after { animation: none; opacity: 0.45; }
}

/* ≤480px: vitals to a 2-col grid (also set in styles.css responsive layer) */
@media (max-width: 833px) {
  .vitals { grid-template-columns: repeat(2, 1fr); }
}