/* live.css — companion styles for live.js.
 *
 * Everything here exists to make a data refresh invisible: no spinners on silent
 * refreshes, no layout jump when rows change, and a quiet highlight for whatever
 * actually changed so you notice the news rather than the update.
 */

/* first-paint placeholder (only while a region has never rendered) */
.live-sk { height: 1.05rem; border-radius: 6px; margin: .35rem 0; background:
  linear-gradient(90deg, var(--surface-2, #101a2b) 25%, var(--line, #1d2b42) 37%, var(--surface-2, #101a2b) 63%);
  background-size: 400% 100%; animation: liveSk 1.4s ease-in-out infinite; }
@keyframes liveSk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
@media (prefers-reduced-motion: reduce) { .live-sk { animation: none; } }

/* a row that just arrived */
.live-new { animation: liveIn .28s ease-out; }
@keyframes liveIn { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: none; } }

/* a row whose contents changed, and its quiet fading highlight */
.live-changed { position: relative; }
.live-changed::after { content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: var(--accent-dim, rgba(226, 84, 58, .14)); pointer-events: none;
  animation: liveFade 1.4s ease-out forwards; }
@keyframes liveFade { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .live-new { animation: none; }
  .live-changed::after { animation: none; opacity: .35; }
}

/* connection state: a quiet dot instead of an error takeover */
.live-state { display: inline-flex; align-items: center; gap: .35rem; font-size: .74rem;
  color: var(--muted-2, #6b7787); }
.live-state::before { content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok, #34d399); box-shadow: 0 0 0 2px rgba(52, 211, 153, .12); }
.live-state[data-state="stale"]::before { background: var(--warn, #fbbf24); box-shadow: none; }
.live-state[data-state="error"]::before { background: var(--danger, #f87171); box-shadow: none; }

/* regions that must not collapse or jump while they refresh */
.live-region { contain: layout paint; }
.live-region[data-live-hold="1"] { min-height: 2.2rem; }

/* a scrollable live list keeps its own scrollbar, never the page's */
.live-scroll { max-height: 19rem; overflow-y: auto; scrollbar-width: thin; }
.live-scroll::-webkit-scrollbar { width: 8px; }
.live-scroll::-webkit-scrollbar-thumb { background: var(--line, #1d2b42); border-radius: 4px; }

/* scalar values that update in place should not reflow their neighbours */
.live-num { font-variant-numeric: tabular-nums; }