/* Ping Components (COMMAND-1202, public/ping): a soft ring in the accent colour that pulses outward around an element that
   wants the PO's attention, and a small dot on its title. A box-shadow, so the element keeps its own outline (the POC
   marker). Loaded by index.html after app.css, so it uses the app's colours. */

.ping { animation: ping-ring 1.6s ease-out infinite; }
@keyframes ping-ring {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent), var(--shadow); }
  70% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 0%, transparent), var(--shadow); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent), var(--shadow); }
}
.ping-dot {
  display: inline-block; flex: none; width: 8px; height: 8px; margin-left: 6px; vertical-align: middle;
  border-radius: 50%; background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
  .ping { animation: none; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
}