/**
 * Visibility Growth UI component library.
 */
/**
 * Visibility Growth platform components — semantic token consumers only.
 * Scoped to platform/profile bodies; no layout rules.
 */

.sa-vis-body--platform .sa-vis-rank-pill-top,
.sa-vis-body--profile .sa-vis-rank-pill-top {
	background: var(--vg-medal-gold-bg);
	border-color: var(--vg-medal-gold-border);
	color: var(--vg-medal-gold-fg);
}

.sa-vis-body--platform .sa-vis-rank-pill-top2,
.sa-vis-body--profile .sa-vis-rank-pill-top2 {
	background: var(--vg-medal-silver-bg);
	border-color: var(--vg-medal-silver-border);
	color: var(--vg-medal-silver-fg);
}

.sa-vis-body--platform .sa-vis-rank-pill-top3,
.sa-vis-body--profile .sa-vis-rank-pill-top3 {
	background: var(--vg-medal-bronze-bg);
	border-color: var(--vg-medal-bronze-border);
	color: var(--vg-medal-bronze-fg);
}

.sa-vis-body--platform .sa-vis-band,
.sa-vis-body--profile .sa-vis-band {
	border: 1px solid var(--vg-band-border, var(--vg-border-subtle));
}

.sa-vis-body--platform .sa-vis-band-elite,
.sa-vis-body--profile .sa-vis-band-elite {
	background: var(--vg-band-elite-bg);
	color: var(--vg-band-elite-fg);
	border-color: var(--vg-band-elite-border);
}

.sa-vis-body--platform .sa-vis-band-strong,
.sa-vis-body--profile .sa-vis-band-strong {
	background: var(--vg-band-strong-bg);
	color: var(--vg-band-strong-fg);
	border-color: var(--vg-band-strong-border);
}

.sa-vis-body--platform .sa-vis-band-established,
.sa-vis-body--profile .sa-vis-band-established {
	background: var(--vg-band-established-bg);
	color: var(--vg-band-established-fg);
	border-color: var(--vg-band-established-border);
}

.sa-vis-body--platform .sa-vis-band-developing,
.sa-vis-body--profile .sa-vis-band-developing {
	background: var(--vg-band-developing-bg);
	color: var(--vg-band-developing-fg);
	border-color: var(--vg-band-developing-border);
}

.sa-vis-body--platform .sa-vis-band-emerging,
.sa-vis-body--profile .sa-vis-band-emerging {
	background: var(--vg-band-emerging-bg);
	color: var(--vg-band-emerging-fg);
	border-color: var(--vg-band-emerging-border);
}

.sa-vis-body--platform .sa-vis-movement-up,
.sa-vis-body--profile .sa-vis-movement-up {
	color: var(--vg-state-earned-fg);
}

.sa-vis-body--platform .sa-vis-movement-down,
.sa-vis-body--profile .sa-vis-movement-down {
	color: var(--vg-state-danger-fg);
}

.sa-vis-body--platform .sa-vis-movement-stable,
.sa-vis-body--platform .sa-vis-movement-new,
.sa-vis-body--profile .sa-vis-movement-stable,
.sa-vis-body--profile .sa-vis-movement-new {
	color: var(--vg-state-neutral-fg);
}

.sa-vis-body--platform .sa-vis-trust-points span,
.sa-vis-body--profile .sa-vis-trust-points span {
	background: var(--vg-bg-muted);
	border: 1px solid var(--vg-border-meta);
	color: var(--vg-text-body);
}

.sa-vis-body--platform .sa-vis-card::before,
.sa-vis-body--profile .sa-vis-card::before {
	background: var(--vg-card-accent-stripe);
}

.sa-vis-body--platform .sa-vis-hero::before,
.sa-vis-body--profile .sa-vis-hero::before {
	background: var(--vg-bg-hero-glow);
}

.sa-vis-body--platform .sa-vis-row-link:focus-visible,
.sa-vis-body--profile .sa-vis-row-link:focus-visible,
.sa-vis-body--platform .sa-vis-card:focus-visible,
.sa-vis-body--profile .sa-vis-card:focus-visible,
.sa-vis-body--platform .sa-vis-button:focus-visible,
.sa-vis-body--profile .sa-vis-button:focus-visible,
.sa-vis-body--platform .sa-vis-search button:focus-visible,
.sa-vis-body--profile .sa-vis-search button:focus-visible,
.sa-vis-body--platform .sa-vis-form button:focus-visible,
.sa-vis-body--profile .sa-vis-form button:focus-visible {
	outline: 2px solid var(--vg-brand-primary);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.sa-vis-body--platform .sa-vis-card,
	.sa-vis-body--profile .sa-vis-card,
	.sa-vis-body--platform .sa-vis-platform-nav a,
	.sa-vis-body--profile .sa-vis-platform-nav a {
		transition: none;
	}
}

/* ── VG UI library aliases (token-only) ── */
.vg-ui-btn.is-loading { pointer-events: none; opacity: 0.88; }
.vg-ui-btn__spinner {
	width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid var(--vg-border-secondary);
	border-top-color: var(--vg-brand-primary);
	animation: vg-ui-spin 0.8s linear infinite;
}
.vg-ui-btn--sm { padding: 10px 14px; font-size: 13px; }
.vg-ui-btn--lg { padding: 16px 20px; font-size: 17px; }
.vg-ui-btn--danger { background: var(--vg-state-danger-bg, rgba(239,68,68,.16)); color: var(--vg-state-danger-fg); border: 1px solid var(--vg-state-danger-border, rgba(239,68,68,.35)); box-shadow: none; }
.vg-ui-btn--success { background: var(--vg-state-earned-bg); color: var(--vg-state-earned-fg); border: 1px solid var(--vg-state-earned-border); box-shadow: none; }
.vg-ui-badge--success { background: var(--vg-state-earned-bg); color: var(--vg-state-earned-fg); border: 1px solid var(--vg-state-earned-border); }
.vg-ui-badge--warning { background: var(--vg-state-warn-bg); color: var(--vg-state-warn-fg); border: 1px solid var(--vg-border-accent); }
.vg-ui-badge--danger { background: var(--vg-state-danger-bg, rgba(239,68,68,.14)); color: var(--vg-state-danger-fg); border: 1px solid var(--vg-state-danger-border, rgba(239,68,68,.28)); }
.vg-ui-badge--neutral, .vg-ui-badge--info { background: var(--vg-bg-muted); color: var(--vg-text-muted); border: 1px solid var(--vg-border-subtle); }
.vg-ui-badge, .vg-ui-badge--pill, .vg-ui-chip, .vg-ui-medal { display: inline-flex; align-items: center; border-radius: var(--vg-radius-pill); font-weight: 800; }
.vg-ui-medal--top_10, .vg-ui-medal--top_25, .vg-ui-medal--top_50 { padding: 4px 10px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: var(--vg-bg-rank-pill); color: var(--vg-text-heading); border: 1px solid var(--vg-border-accent); }
.vg-ui-empty { display: grid; gap: var(--vg-space-sm); padding: var(--vg-space-lg); border: 1px dashed var(--vg-border-subtle); border-radius: var(--vg-radius-md); background: var(--vg-bg-muted); color: var(--vg-text-body); }
.vg-ui-spinner__ring { display: inline-block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--vg-border-subtle); border-top-color: var(--vg-brand-primary); animation: vg-ui-spin 0.8s linear infinite; }
.vg-ui-skeleton--card { display: grid; gap: 8px; padding: var(--vg-space-md); border-radius: var(--vg-radius-md); background: var(--vg-bg-muted); }
.vg-ui-skeleton__line { display: block; height: 12px; border-radius: 999px; background: var(--vg-border-soft); }
.vg-ui-skeleton__line--short { width: 55%; }
.vg-ui-progress { height: 8px; border-radius: 999px; background: var(--vg-bg-muted); overflow: hidden; }
.vg-ui-progress__bar { display: block; height: 100%; background: var(--vg-brand-primary); transition: width var(--vg-motion-medium); }
.vg-ui-pagination__list { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.vg-ui-pagination__item a, .vg-ui-pagination__item span { display: inline-flex; min-width: 36px; min-height: 36px; align-items: center; justify-content: center; border-radius: var(--vg-radius-sm); border: 1px solid var(--vg-border-subtle); color: var(--vg-text-body); text-decoration: none; font-weight: 700; }
.vg-ui-pagination__item.is-current span { background: var(--vg-brand-primary); color: var(--vg-text-on-brand); border-color: transparent; }
@keyframes vg-ui-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vg-ui-btn__spinner, .vg-ui-spinner__ring { animation: none; } .vg-ui-progress__bar { transition: none; } }