/* Video clips: the player on a record and its status line. Tokens only. */
.vid-player { display: grid; gap: 8px; margin: 0 0 12px; }
.vid-video, .vid-poster {
  display: block; width: 100%; max-height: 70vh; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius); object-fit: contain;
}
.vid-player.is-waiting .vid-poster { opacity: 0.6; }
.vid-meta { margin: 0; color: var(--muted); font-size: 12px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
.vid-status { margin: 0; padding: 8px 10px; color: var(--warn); background: var(--warn-soft); border-radius: var(--radius); }
.vid-status[hidden] { display: none; }
.vid-progress { display: grid; gap: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.vid-progress .bar { display: block; height: 4px; background: var(--line); border-radius: var(--radius); overflow: hidden; }
.vid-progress .bar > span { display: block; height: 100%; background: var(--accent); transition: width var(--duration) var(--ease); }
.vid-note { color: var(--muted); font-size: 13px; }
@media (max-width: 640px) {
  .vid-video, .vid-poster { max-height: 50vh; }
}