/**
 * Legacy entry + theme toggle chrome.
 * Canonical tokens: vg-theme.css · Marketing: vg-homepage.css
 */
@import url("vg-theme.css?ver=lp2");
@import url("vg-homepage.css?ver=lp2");

.sa-vg-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	min-width: 44px;
	padding: 8px 14px;
	border-radius: var(--vg-radius-pill, 999px);
	border: 1px solid var(--vg-border-accent);
	background: var(--vg-bg-pill-neutral);
	color: var(--vg-text-heading);
	font: 700 13px/1 var(--vg-font-body);
	cursor: pointer;
	transition:
		background var(--vg-motion-fast),
		border-color var(--vg-motion-fast),
		color var(--vg-motion-fast);
	white-space: nowrap;
	touch-action: manipulation;
}

.sa-vg-theme-toggle:hover {
	background: var(--vg-bg-nav-active);
	border-color: var(--vg-border-accent);
	color: var(--vg-text-heading);
}

.sa-vg-theme-toggle:focus {
	outline: none;
}

.sa-vg-theme-toggle:focus-visible {
	outline: 2px solid var(--vg-brand-primary);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--vg-brand-primary) 24%, transparent);
}

.sa-vg-theme-toggle__icon {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--vg-state-warn-fg) 0%, var(--vg-brand-primary) 100%);
	box-shadow: inset 0 0 0 1px var(--vg-border-secondary);
	flex-shrink: 0;
}

html[data-theme="light"] .sa-vg-theme-toggle__icon {
	background: linear-gradient(135deg, var(--vg-brand-primary) 0%, var(--vg-text-heading) 100%);
}

.sa-vis-platform-header-actions,
body.sa-vg-theme .sa-vg-shell-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

@media (max-width: 760px) {
	.sa-vis-platform-header-actions {
		width: 100%;
		justify-content: stretch;
		flex-direction: column;
	}

	.sa-vis-platform-header-actions .sa-vg-theme-toggle {
		width: 100%;
	}
}

html[data-theme="light"] .sa-vis-body--platform .sa-vis-platform-nav a:focus-visible,
html[data-theme="light"] .sa-vis-body--profile .sa-vis-platform-nav a:focus-visible,
html[data-theme="dark"] .sa-vis-body--platform .sa-vis-platform-nav a:focus-visible,
html[data-theme="dark"] .sa-vis-body--profile .sa-vis-platform-nav a:focus-visible {
	outline: 2px solid var(--vg-brand-primary);
	outline-offset: 2px;
}