/* ============================================================================
   Live stats — "stock-ticker" auto-updating numbers.
   Flash + arrow on change, sparkline trends, delta chips, a scrolling ticker
   crawl, and a stateful "live" indicator. Works in both themes and honours
   prefers-reduced-motion. Colour is never the only signal (arrows + text too).
   ============================================================================ */

/* Every live number uses lining, tabular figures so the width doesn't jitter
   as digits change during a count-up. */
[data-live] { font-variant-numeric: tabular-nums lining-nums; }

/* ── Up / down flash on change ──────────────────────────────────────────────
   A brief highlight *behind* the number (works on ANY background — white cards,
   dark cards, the green trust band) plus a fading ▲/▼. A background highlight is
   used rather than a text-colour change so it never clashes with white-on-green
   tiles. */
.lv-up   { border-radius: 5px; animation: lvUp   1.7s ease-out; }
.lv-down { border-radius: 5px; animation: lvDown 1.7s ease-out; }
.lv-up::after,
.lv-down::after {
    font-size: .55em;
    margin-left: .28em;
    vertical-align: middle;
    display: inline-block;
    font-weight: 700;
    animation: lvArrow 1.7s ease-out forwards;
}
.lv-up::after   { content: '\25B2'; color: var(--green, #1f8a4c); }        /* ▲ */
.lv-down::after { content: '\25BC'; color: var(--red-deep, #c0392b); }     /* ▼ */

@keyframes lvUp   { 0%, 10% { background-color: rgba(31, 138, 76, .38); box-shadow: 0 0 0 4px rgba(31, 138, 76, .10); } 100% { background-color: transparent; box-shadow: none; } }
@keyframes lvDown { 0%, 10% { background-color: rgba(192, 57, 43, .34); box-shadow: 0 0 0 4px rgba(192, 57, 43, .10); } 100% { background-color: transparent; box-shadow: none; } }
@keyframes lvArrow { 0% { opacity: 0; transform: translateY(4px); } 12% { opacity: 1; transform: none; } 78% { opacity: 1; } 100% { opacity: 0; } }

/* ── Inline sparkline (micro trend) ─────────────────────────────────────────
   A tiny stretched SVG drawn from the metric's recent history. Sits between the
   big number and its label on KPI tiles. */
.lv-spark {
    display: block;
    height: 22px;
    width: 100%;
    max-width: 160px;
    margin: 7px 0 2px;
    opacity: .92;
}
.lv-spark svg { display: block; width: 100%; height: 100%; }
.lv-spark .sk-line { fill: none; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
.lv-spark .sk-area { stroke: none; opacity: .14; }
.lv-spark .sk-dot  { stroke: var(--card, #fff); stroke-width: 1px; }
.lv-spark.sk-up   .sk-line, .lv-spark.sk-up   .sk-dot { stroke: var(--green, #1f8a4c); }
.lv-spark.sk-up   .sk-area, .lv-spark.sk-up   .sk-dot { fill: var(--green, #1f8a4c); }
.lv-spark.sk-down .sk-line, .lv-spark.sk-down .sk-dot { stroke: var(--red-deep, #c0392b); }
.lv-spark.sk-down .sk-area, .lv-spark.sk-down .sk-dot { fill: var(--red-deep, #c0392b); }
.lv-spark.sk-flat .sk-line, .lv-spark.sk-flat .sk-dot { stroke: var(--muted, #8a8f98); }
.lv-spark.sk-flat .sk-area, .lv-spark.sk-flat .sk-dot { fill: var(--muted, #8a8f98); }
.lv-spark:empty { display: none; }

/* ── Delta chip (change over the recent window) ─────────────────────────────*/
.lv-delta { font-weight: 700; white-space: nowrap; }
.lv-delta:empty { display: none; }
.dl-up   { color: var(--green, #1f8a4c); }
.dl-down { color: var(--red-deep, #c0392b); }
.dl-flat { color: var(--muted, #8a8f98); font-weight: 600; }

/* ── The ticker-tape crawl ──────────────────────────────────────────────────
   A seamless, pausable ribbon of headline KPIs across the top of the admin
   console — the literal "stock prices scrolling by" element. */
.lv-ticker {
    position: relative;
    overflow: hidden;
    margin: 0 0 16px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 42px, #000 calc(100% - 42px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 42px, #000 calc(100% - 42px), transparent);
}
.lv-ticker::before {                     /* "LIVE" bug pinned to the left */
    content: 'LIVE';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    z-index: 2;
    display: flex; align-items: center;
    padding: 0 12px 0 13px;
    font-size: .62rem; font-weight: 800; letter-spacing: .12em;
    color: #fff;
    background: linear-gradient(180deg, var(--green, #1f8a4c), var(--green-deep, #14663a));
    clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%);
}
.lv-ticker::after {                       /* pulsing dot inside the LIVE bug */
    content: '';
    position: absolute; z-index: 3;
    left: 40px; top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px; border-radius: 50%;
    background: #eafff2;
    animation: lvTickPulse 1.8s ease-in-out infinite;
}
.lv-ticker-belt { display: flex; width: max-content; will-change: transform; animation: lvTickScroll 70s linear infinite; }
.lv-ticker-belt.lv-paused { animation-play-state: paused; }
.lv-ticker-group { display: flex; flex: none; }
.lv-tk-cell {
    display: inline-flex; align-items: baseline; gap: 8px;
    padding: 11px 20px;
    border-right: 1px solid var(--line);
    font-size: .86rem;
    white-space: nowrap;
}
.lv-tk-cell:first-child { padding-left: 62px; }        /* clear the LIVE bug */
.lv-tk-label { color: var(--muted); font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; }
.lv-tk-val   { color: var(--ink); font-weight: 800; }
.lv-tk-delta { font-size: .74rem; }

@keyframes lvTickScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lvTickPulse  { 0%, 100% { opacity: 1; transform: translateY(-50%) scale(1); } 50% { opacity: .3; transform: translateY(-50%) scale(1.5); } }

/* ── The "live" state pill (auto-injected into page headers) ─────────────────*/
.live-pill {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: .72rem; font-weight: 600; color: var(--muted);
    border: 1px solid var(--line); border-radius: 999px;
    padding: 4px 11px; background: var(--card); white-space: nowrap;
    vertical-align: middle;
    transition: color .3s, border-color .3s;
}
.live-pill .dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--green, #1f8a4c);
    animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(31, 138, 76, .45); }
    50%      { opacity: .45; box-shadow: 0 0 0 5px rgba(31, 138, 76, 0); }
}
/* State variants */
.live-pill.lv-state-paused .dot       { background: var(--muted, #8a8f98); animation: none; }
.live-pill.lv-state-reconnecting      { color: var(--gold-deep, #a97706); border-color: var(--gold, #e0a423); }
.live-pill.lv-state-reconnecting .dot { background: var(--gold, #e0a423); }
.live-pill.lv-state-stale             { color: var(--red-deep, #c0392b); border-color: var(--red, #e05a4d); }
.live-pill.lv-state-stale .dot        { background: var(--red-deep, #c0392b); animation: none; }

@media (prefers-reduced-motion: reduce) {
    .lv-up, .lv-down, .lv-up::after, .lv-down::after,
    .live-pill .dot, .lv-ticker::after { animation-duration: .01ms; animation-iteration-count: 1; }
    .live-pill .dot { animation: none; }
    /* Freeze the crawl and make it a normal horizontally-scrollable strip. */
    .lv-ticker { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
    .lv-ticker-belt { animation: none; }
    .lv-ticker-group[aria-hidden="true"] { display: none; }
}