/* =========================================================================
   Live call — Metrics row (Alert Latency, Voice Latency, Listener Cost)
   ========================================================================= */

.metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--rta-rule);
  border-radius: var(--rta-radius-card);
  overflow: hidden;
}
.metrics-row .metric {
  background: var(--rta-surface);
  padding: 0.8rem 0.5rem;
  text-align: center;
}
.metrics-row .metric-emotion {
  grid-column: 1 / -1;
}

.metric-label {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--rta-fg3);
  margin-bottom: 5px;
}
.metric-value {
  font-family: var(--rta-font-mono);
  font-size: 1.35rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--rta-fg3);
  opacity: 0.45;
  transition: color   var(--dur-comp) var(--ease),
              opacity var(--dur-comp) var(--ease);
}
.metric-value.has-value,
.metric-value.fast,
.metric-value.ok,
.metric-value.slow { opacity: 1; }
.metric-value.fast { color: var(--rta-good); }
.metric-value.ok   { color: var(--rta-tap); }
.metric-value.slow { color: var(--rta-tug-red); }
.metric-value.has-value { color: var(--rta-fg); }

/* ---- Connection status text -------------------------------------------- */
.status {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--rta-fg3);
  min-height: 1.2em;
  transition: color var(--dur-comp) var(--ease);
}
.status.live  { color: var(--rta-good); }
.status.error { color: var(--rta-tug-red); }

/* Demo-stage flag: hide RTA telemetry — latency cells, listener cost, and the
   live customer-emotion gauge. Hide the whole .metrics-row card rather than
   just its cells: emptied of all four cells the card collapsed to a thin
   bordered strip, leaving a stray separator line between the RTA header and
   the first alert. The post-call emotion graph (#call-analytics .rta-usage)
   is a separate element and stays visible. */
body.hide-rta-metrics .metrics-row {
  display: none;
}