/* /pulse — concurrency waveform + player-activity raster. */

.pulse-zoom {
  display: flex;
  gap: 0;
  margin: 16px 0 0;
  width: fit-content;
  border: var(--line-flat);
}
.pulse-zoom a {
  padding: 8px 14px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-decoration: none;
  color: var(--ui);
  border-right: var(--line-flat);
}
.pulse-zoom a:last-child { border-right: 0; }
.pulse-zoom a:hover { color: var(--signal); background: var(--g4); }
.pulse-zoom a.on {
  background: var(--red-face);
  color: #ffe9e6;
}

.pulse-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 0;
}
.pulse-metrics div {
  background: var(--g1);
  border: var(--line-well);
  padding: 10px 12px;
}
.pulse-metrics dt {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--meta);
}
.pulse-metrics dd {
  margin: 4px 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1;
  color: var(--signal);
}
.pulse-metrics .quiet dd {
  color: var(--ui);
  font-size: 22px;
}

.pulse-panel {
  padding: 16px 16px 20px;
}

.pulse-wave,
.pulse-row,
.pulse-time,
.pulse-raster-head {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.pulse-gutter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--meta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
a.pulse-gutter {
  justify-content: center;
  color: var(--signal);
  text-decoration: none;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
}
a.pulse-gutter:hover { color: var(--red-hot); }

.pulse-axis-max { color: var(--signal); }
.pulse-axis-mid { letter-spacing: .12em; }

.pulse-plot-wrap {
  min-width: 0;
  background: var(--g1);
  border: var(--line-well);
}
.pulse-plot {
  display: block;
  width: 100%;
  height: 180px;
}
.pulse-row-plot { height: 20px; }

.pulse-fill { fill: rgba(232, 25, 44, 0.28); }
.pulse-line {
  stroke: var(--red-hot);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}
.pulse-round {
  fill: rgba(232, 193, 90, 0.10);
}
.pulse-bar {
  fill: var(--red-face);
}
.pulse-bar.open { fill: var(--red-hot); }

.pulse-raster-head {
  margin: 18px 0 8px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--meta);
}
.pulse-raster-head span:last-child { text-align: right; }

.pulse-raster {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pulse-row .pulse-plot-wrap { background: var(--g0); }

.pulse-empty,
.pulse-error {
  margin: 8px 0 0;
  padding: 16px;
  border: var(--line-well);
  background: var(--g1);
  color: var(--prose);
}
.pulse-error p:first-child { color: var(--signal); font-weight: 700; }

.pulse-time {
  margin-top: 8px;
}
.pulse-ticks {
  position: relative;
  height: 22px;
  background: transparent;
  border: 0;
}
.pulse-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--meta);
  white-space: nowrap;
}

.pulse-more { margin: 10px 0 0; }

@media (max-width: 720px) {
  .pulse-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-wave,
  .pulse-row,
  .pulse-time,
  .pulse-raster-head {
    grid-template-columns: 84px minmax(0, 1fr);
  }
}