/* Opt-in visual vocabulary; no existing element changes without rt-* classes. */
.rt-status { font: inherit; white-space: nowrap; }
.rt-status[data-state="loading"], .rt-status[data-state="refreshing"],
.rt-status[data-state="reconnecting"] { opacity: .75; }
.rt-status[data-state="disconnected"], .rt-status[data-state="error"],
.rt-status[data-freshness="stale"] { color: #a35c16; }
.rt-value-changed { animation: rt-value-highlight .35s ease-out; }
@keyframes rt-value-highlight {
  from { background-color: rgba(91, 145, 194, .18); }
  to { background-color: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .rt-value-changed { animation: none; }
}

#rt-action-status { position: fixed; z-index: 2147483000; right: 16px; bottom: 16px; max-width: min(460px, calc(100vw - 32px)); padding: 10px 14px; border-radius: 8px; background: #17212e; color: #fff; box-shadow: 0 3px 16px #0004; white-space: normal; pointer-events: none; }
#rt-action-status:empty { display: none; }
.rt-report-status { margin: 8px 20px; display: flex; gap: 10px; align-items: center; }