/* THE READ IS WORKING (2026-11-08): the panel every certificate read shows while it runs (next-reading.js). The workspace's own
   tokens, so it follows the light and dark themes. */
.vrd { grid-column: 1 / -1; margin: 12px 0; padding: 14px 16px 12px; border-radius: var(--v8-r-panel, 12px); background: var(--v8-raised, var(--gray-25, #f7f8fa)); box-shadow: 0 0 0 1px var(--v8-hair, rgba(0, 0, 0, .08)); font-family: var(--v8-sans, inherit); }
.vrd-top { display: flex; align-items: center; gap: 10px; }
.vrd-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v8-accent, #1764f5); flex: none; animation: vrd-pulse 1.4s ease-in-out infinite; }
.vrd-h { font-size: 15px; font-weight: 500; color: var(--v8-t1, var(--ink, #111)); }
.vrd-t { margin-left: auto; font-family: var(--v8-mono, ui-monospace, monospace); font-size: 12px; color: var(--v8-t3, var(--muted, #667)); font-variant-numeric: tabular-nums; }
.vrd-bar { position: relative; height: 3px; margin: 12px 0 10px; border-radius: 3px; background: var(--v8-hair, rgba(0, 0, 0, .08)); overflow: hidden; }
.vrd-bar i { position: absolute; top: 0; bottom: 0; left: -40%; width: 40%; border-radius: 3px; background: var(--v8-accent, #1764f5); animation: vrd-slide 1.6s ease-in-out infinite; }
.vrd-step { margin: 0; font-size: 14px; color: var(--v8-t1, var(--ink, #111)); }
.vrd-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.45; color: var(--v8-t3, var(--muted, #667)); }
@keyframes vrd-slide { from { left: -40%; } to { left: 100%; } }
@keyframes vrd-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .vrd-dot, .vrd-bar i { animation: none; } .vrd-bar i { left: 0; width: 100%; opacity: .35; } }