/**
 * ============================================================================
 * SITES CATALOG — LIVE METRICS
 * ============================================================================
 * Companion to assets/dashboard/js/sites-catalog-live-metrics.js and the
 * [data-zl-count] / [data-zl-live] hooks in sites-catalog-layout.php.
 *
 * Everything sits on the existing --sc-* design tokens (blue/white corporate
 * palette on the public /sites/ page, aurora tokens on the dashboard), so the
 * live bar reads as part of the stats strip rather than a bolted-on widget.
 * ============================================================================
 */

/* ---- Primer: numbers stay invisible (layout preserved) until their count-up
        starts. The inline primer script adds .zl-live-priming; the JS swaps it
        for per-element .zl-live-pending; a safety timer clears both. --------- */
.zetlink-sites-catalog.zl-live-priming [data-zl-count],
.zetlink-sites-catalog [data-zl-count].zl-live-pending {
	visibility: hidden;
}
.zetlink-sites-catalog [data-zl-count],
.zetlink-sites-catalog [data-zl-live] {
	font-variant-numeric: tabular-nums;
}

/* ---- A live value changed: soft glow + settle ---------------------------- */
@keyframes zl-live-bump {
	0%   { transform: scale(1);    text-shadow: 0 0 0 rgba(14, 86, 245, 0); }
	25%  { transform: scale(1.08); text-shadow: 0 0 14px rgba(14, 86, 245, .45); }
	100% { transform: scale(1);    text-shadow: 0 0 0 rgba(14, 86, 245, 0); }
}
@keyframes zl-live-bump-down {
	0%   { transform: scale(1);    text-shadow: 0 0 0 rgba(245, 124, 12, 0); }
	25%  { transform: scale(1.08); text-shadow: 0 0 14px rgba(245, 124, 12, .45); }
	100% { transform: scale(1);    text-shadow: 0 0 0 rgba(245, 124, 12, 0); }
}
.zetlink-sites-catalog .zl-live-bump {
	animation: zl-live-bump .9s cubic-bezier(.2, .8, .2, 1) both;
	transform-origin: center;
	will-change: transform;
}
.zetlink-sites-catalog .zl-live-bump.zl-live-bump--down {
	animation-name: zl-live-bump-down;
}

/* ---- Live bar (public /sites/ page) ------------------------------------- */
.zetlink-sites-catalog .zl-live-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px 10px;
	margin: -4px 0 16px;
	padding: 0 4px;
	font-size: 12px;
	line-height: 1;
	color: var(--sc-muted, #66758f);
	font-family: inherit;
}
.zetlink-sites-catalog .zl-live-bar__pill,
.zetlink-sites-catalog .zl-live-bar__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 11px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--sc-border, #dfe6ef);
	box-shadow: var(--sc-shadow-xs, 0 1px 2px rgba(14, 86, 245, .06));
	white-space: nowrap;
	color: var(--sc-text-2, #1b2b47);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.zetlink-sites-catalog .zl-live-bar__pill {
	color: var(--sc-green, #08a972);
	border-color: rgba(8, 169, 114, .32);
	background: rgba(8, 169, 114, .07);
	font-weight: 800;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 0 11px 0 9px;
}
.zetlink-sites-catalog .zl-live-dot {
	position: relative;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--sc-green, #08a972);
	flex-shrink: 0;
}
.zetlink-sites-catalog .zl-live-dot::after {
	content: '';
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid var(--sc-green, #08a972);
	opacity: 0;
	animation: zl-live-ping 1.9s cubic-bezier(0, 0, .2, 1) infinite;
}
@keyframes zl-live-ping {
	0%   { transform: scale(.6); opacity: .9; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

.zetlink-sites-catalog .zl-live-bar__item svg {
	width: 13px;
	height: 13px;
	flex-shrink: 0;
	color: var(--sc-blue, #0e56f5);
}
.zetlink-sites-catalog .zl-live-bar__item--presence svg { color: var(--sc-green, #08a972); }
.zetlink-sites-catalog .zl-live-bar__item--new svg      { color: var(--sc-orange, #f57c0c); }

.zetlink-sites-catalog .zl-live-bar__item a {
	color: var(--sc-blue, #0e56f5);
	text-decoration: none;
	font-weight: 700;
	max-width: 220px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.zetlink-sites-catalog .zl-live-bar__item a:hover { text-decoration: underline; }
.zetlink-sites-catalog .zl-live-bar__muted {
	color: var(--sc-muted, #66758f);
	font-weight: 500;
}

.zetlink-sites-catalog .zl-live-bar__updated {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 500;
	color: var(--sc-muted-soft, #97a3b8);
	padding: 0 4px;
}
.zetlink-sites-catalog .zl-live-bar__updated svg { width: 12px; height: 12px; }

/* [hidden] must win over the display:inline-flex above (UA [hidden] rule has
   lower specificity than a class selector) */
.zetlink-sites-catalog .zl-live-bar [hidden] { display: none !important; }

/* text swapped (new ticker item / new count) → quick fade-in */
@keyframes zl-live-swap {
	from { opacity: .25; transform: translateY(3px); }
	to   { opacity: 1;   transform: translateY(0); }
}
.zetlink-sites-catalog .zl-live-swap { animation: zl-live-swap .45s ease-out both; }

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
	.zetlink-sites-catalog .zl-live-bar { gap: 6px 6px; margin-top: 0; }
	.zetlink-sites-catalog .zl-live-bar__pill,
	.zetlink-sites-catalog .zl-live-bar__item { height: 26px; padding: 0 9px; font-size: 11.5px; }
	.zetlink-sites-catalog .zl-live-bar__item a { max-width: 150px; }
	.zetlink-sites-catalog .zl-live-bar__updated { flex-basis: 100%; justify-content: center; }
}

/* ---- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.zetlink-sites-catalog.zl-live-priming [data-zl-count],
	.zetlink-sites-catalog [data-zl-count].zl-live-pending { visibility: visible; }
	.zetlink-sites-catalog .zl-live-dot::after { animation: none; opacity: 0; }
	.zetlink-sites-catalog .zl-live-bump,
	.zetlink-sites-catalog .zl-live-bump.zl-live-bump--down { animation-duration: .01ms; }
	.zetlink-sites-catalog .zl-live-swap { animation: none; }
}