/* ===== Live frequency view for the TSO card (viz 1.3) ===== */

.tso-live-stage { position: relative; }

/* pulsing LIVE button, top-left (Reset is top-right) */
.tso-live-btn {
  position: absolute;
  top: 10px; left: 10px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  color: var(--ref-cyan);
  background: transparent;
  border: 1.5px solid var(--ref-cyan);
  border-radius: 999px;
  cursor: pointer;
  z-index: 5;
}
.tso-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #D9534F;
  animation: tsoLivePulse 1.6s ease-out infinite;
}
@keyframes tsoLivePulse {
  0%   { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(217, 83, 79, 0); }
  100% { box-shadow: 0 0 0 0 rgba(217, 83, 79, 0); }
}

/* when open: hide the simulation, show the live view */
.tso-live-view { display: none; }
.tso-live-open > *:not(.tso-live-view):not(.tso-live-btn) { display: none; }
.tso-live-open > .tso-live-view {
  display: flex; flex-direction: column;
  gap: 8px;
  padding: 40px 10px 6px;
}

.tso-live-head {
  font-size: 12px; font-weight: 700;
  color: var(--ref-cyan);
  text-align: center;
}
.tso-live-main {
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
}
.tso-live-view svg.tso-live-vbar {
  width: 70px !important;
  height: 300px !important;
  max-width: 70px;
  flex: 0 0 70px;
}
.tso-live-text {
  flex: 1 1 auto; min-width: 0; max-width: 320px;
  font-size: 11px; line-height: 1.45;
  color: var(--ref-muted);
}
.tso-live-text p { margin: 0 0 7px; }
.tso-live-view svg.tso-live-fcr {
  display: block;
  width: 100% !important;
  max-width: 300px !important;
  height: auto !important;
  margin: 0 auto;
}
.tso-live-src {
  font-size: 9.5px; color: var(--ref-muted);
  text-align: center; opacity: 0.8;
}