/* The live components on the home page (NEXT-LEVEL.md N9; static/js/home_live.mjs): the app's own light tokens,
   scoped to their container, because the public pages carry tokens of their own under some of the same names. Each
   value is arctic.css's light value (an app variable resolved to its fallback, which is the app's palette);
   tests/test_home_live.py holds the two together. Loaded with the components, never before. */
.vg-live {
    --primary-rgb: 0, 100, 200;
    --vg-accent: #0064c8;
    --vg-plan: var(--vg-accent);
    --vg-traded: #7c8799;
    --vg-break: #d9483f;
    --vg-break-tint: rgba(217, 72, 63, 0.10);
    --vg-up: #066c54;
    --vg-down: #be123c;
    --vg-ink-1: #0f172a;
    --vg-ink-2: #475569;
    --vg-ink-3: #5c6b80;
    --vg-surface-0: #f8fafc;
    --vg-surface-1: #ffffff;
    --vg-surface-raised: #ffffff;
    --vg-surface-quiet: rgba(15, 23, 42, 0.022);
    --vg-hairline: rgba(15, 23, 42, 0.08);
    --vg-hairline-strong: rgba(15, 23, 42, 0.14);
    --vg-elev-raised: 0 1px 0 rgba(15, 23, 42, 0.03), 0 16px 36px -18px rgba(15, 23, 42, 0.22);
    --vg-hatch: repeating-linear-gradient(135deg, var(--vg-break-tint) 0 1.5px, transparent 1.5px 6px);
    --vg-radius-card: 16px;
    --vg-radius-inner: 10px;
    --vg-num-display: clamp(2.5rem, 1.9rem + 2vw, 3.5rem);
    --vg-num-lg: 1.5rem;
    --vg-num-md: 1rem;
    --vg-num-sm: 0.8125rem;
    --vg-label-size: 0.6875rem;
    --vg-dur: 480ms;
    --vg-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
    --vg-stagger: 40ms;
    --vg-grid-step: 16px;
    --vg-grid-dot: rgba(15, 23, 42, 0.11);
    --vg-grid: radial-gradient(circle at center, var(--vg-grid-dot) 0 1px, transparent 1.3px);
    --vg-surface-hero: #ffffff;
    --vg-elev-hero: 0 1px 0 rgba(15, 23, 42, 0.04), 0 2px 6px -2px rgba(15, 23, 42, 0.06), 0 28px 56px -30px rgba(15, 23, 42, 0.32);
    --vg-hero-edge: inset 0 1px 0 rgba(0, 100, 200, 0.14);
    --vg-glow: none;
    --vg-font: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--vg-ink-1);
    font-family: var(--vg-font);
}
/* The frame each live component sits in on the home page, and its sample label. */
.vg-live-card { position: relative; padding: 1.1rem 1.2rem 1rem; border: 1px solid var(--vg-hairline-strong); border-radius: var(--vg-radius-card); background: var(--vg-surface-1); box-shadow: var(--vg-elev-raised); text-align: left; }
.vg-live-card h3 { margin: 0; color: var(--vg-ink-1); font-size: 1rem; font-weight: 700; }
.vg-live-sample { margin: 0.6rem 0 0; color: var(--vg-ink-3); font-size: 0.75rem; }
.vg-live .focus-muted { color: var(--vg-ink-2); font-size: 0.8125rem; }
.vg-live .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.vg-live .stats-fig-trades { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.vg-live .stats-fig-trades th, .vg-live .stats-fig-trades td { padding: 0.35rem 0.4rem; border-bottom: 1px solid var(--vg-hairline); text-align: left; }
.vg-live .stats-fig-trades th { color: var(--vg-ink-3); font-size: 0.6875rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.vg-live .stats-fig-trades .num { text-align: right; }