/* The live-page indicator (templates/platform/_live_badge.html) and the
   title row it sits in. Loaded by the platform layout for every page —
   it's ~1KB and saves three pages each carrying their own copy. */

/* Colours this sheet alone uses, named so none of them is a bare hex.
   Same values as before — this changed no pixel. */
:root {
  --live-badge-ink       : #166534;
  --live-badge-line      : #BBF7D0;
  --live-badge-bg        : #FEF9C3;
  --live-badge-stale-ink : #854D0E;
  --live-badge-stale-line: #FDE68A;
}

/* ── Dark half ────────────────────────────────────────────────────────
   A live badge is a pale yellow chip in light. On a #13161F card that
   has to become a tint of the warning hue rather than a cream rectangle,
   the same 15%-of-the-hue the status fills use. */
:root[data-appearance="dark"] {
  --live-badge-bg: color-mix(in srgb, var(--warning) 15%, transparent);
}

.live-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.live-head h1 {
    margin: 0;
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    border: 1px solid transparent;
    white-space: nowrap;
}

.live-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex: none;
}

.live-badge[data-live-state="live"] {
    background: var(--status-good-bg);
    color: var(--live-badge-ink);
    border-color: var(--live-badge-line);
}

.live-badge[data-live-state="stale"] {
    background: var(--live-badge-bg);
    color: var(--live-badge-stale-ink);
    border-color: var(--live-badge-stale-line);
}

/* The state the badge is SERVED in. Neutral on purpose: it is a promise
   about nothing until the socket actually attaches and live_region.js
   promotes it. */
.live-badge[data-live-state="connecting"] {
    background: var(--status-idle-bg);
    color: var(--text-secondary);
    border-color: var(--border);
}

/* The socket never came up — a WS-blocking proxy, most likely — so the
   page fell back to polling on a slow timer. Deliberately not green: the
   page IS updating, just not promptly, and saying "Live" here is the lie
   this state exists to stop telling. */
.live-badge[data-live-state="degraded"] {
    background: var(--live-badge-bg);
    color: var(--live-badge-stale-ink);
    border-color: var(--live-badge-stale-line);
}

/* Updates are held while something in the region is being read or used —
   an open error traceback, a focused control. Distinct from "stale": the
   connection is fine, the page is choosing to wait. */
.live-badge[data-live-state="paused"] {
    background: var(--status-idle-bg);
    color: var(--text-secondary);
    border-color: var(--border);
}

/* One flash on each successful swap — the only signal that the region just
   changed, since a re-render of mostly-identical rows is otherwise
   invisible. */
.live-badge--pulse .live-badge-dot {
    animation: live-badge-pulse 1.1s ease-out 2;
}

@keyframes live-badge-pulse {
    0%   { transform: scale(1);   opacity: 1; }
    45%  { transform: scale(1.9); opacity: .35; }
    100% { transform: scale(1);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .live-badge--pulse .live-badge-dot { animation: none; }
}