/* Quantum-Like Lab developed under Ethan Dickey's guidance. Actual samples only. */
.watch-playback { display:grid; gap:10px; min-width:0; }
.watch-heading,.watch-metrics,.watch-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; }
.watch-heading { justify-content:space-between; }
.watch-heading > span,.watch-metrics > span:last-child { color:var(--muted,#a7bdcc); font-size:.8rem; }
.watch-network { height:clamp(290px,43vh,460px); min-height:290px; overflow:hidden; border:1px solid var(--line,#294550); border-radius:12px; }
.watch-playback .ql-network-legend { display:none !important; }
.watch-time-controls { display:grid; grid-template-columns:auto minmax(120px,1fr) auto; gap:12px; align-items:center; }
.watch-time-controls > button { min-width:76px; }
.watch-scrubber { display:grid; gap:3px; font-size:.76rem; color:var(--muted,#a7bdcc); }
.watch-scrubber input { width:100%; margin:0; padding:0; min-height:30px; accent-color:#61ddbe; }
.watch-time-controls output { font-size:.82rem; font-variant-numeric:tabular-nums; }
.watch-metrics { font-size:.84rem; }
.watch-metrics strong { margin-left:5px; font-variant-numeric:tabular-nums; }
.watch-observation,.watch-storage,.watch-error { margin:0; font-size:.82rem; line-height:1.45; }
.watch-storage { color:var(--muted,#a7bdcc); }
.watch-error { color:#ffb4a6; }
.watch-actions > button { font-size:.81rem; }
@media(max-width:600px) {
  .watch-network { height:310px; }
  .watch-time-controls { grid-template-columns:auto minmax(120px,1fr); gap:5px 10px; }
  .watch-time-controls output { grid-column:2; }
  .watch-metrics { gap:5px 15px; }
  .watch-actions { gap:8px; }
}