/* Public visual foundations. Presets override tokens, components own their layout. */
:root {
	--vs-font-display: Georgia, "Times New Roman", serif;
	--vs-font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--vs-text-xs: .78rem;
	--vs-text-sm: .875rem;
	--vs-text-base: 1rem;
	--vs-text-lg: 1.15rem;
	--vs-h1: clamp(2.4rem, 5vw, 4.5rem);
	--vs-h2: clamp(1.8rem, 3.2vw, 2.8rem);
	--vs-h3: clamp(1.3rem, 2vw, 1.7rem);
	--vs-h4: 1.15rem;
	--vs-leading-body: 1.6;
	--vs-leading-tight: 1.08;
	--vs-space-1: .25rem;
	--vs-space-2: .5rem;
	--vs-space-3: .75rem;
	--vs-space-4: 1rem;
	--vs-space-5: 1.5rem;
	--vs-space-6: 2rem;
	--vs-space-7: 3rem;
	--vs-space-8: 4rem;
	--vs-container: 1180px;
	--vs-gutter: clamp(1rem, 4vw, 2rem);
	--vs-page-padding: clamp(2rem, 5vw, 4rem);
	--vs-radius: 6px;
	--vs-btn-primary-bg: #f1eadc;
	--vs-btn-primary-fg: #111111;
	--vs-btn-secondary-border: rgba(241, 234, 220, .55);
	--vs-btn-fg: #f1eadc;
	--vs-btn-danger-bg: #a8281f;
	--vs-btn-danger-fg: #ffffff;
	--vs-focus: #c9a96a;
	--vs-btn-primary-hover: #ffffff;
	--vs-btn-secondary-hover: rgba(241, 234, 220, .08);
	--vs-btn-danger-hover: color-mix(in srgb, var(--vs-btn-danger-bg) 90%, black);
	--vs-btn-height: 44px;
	--vs-btn-padding: .6rem 1.1rem;
	--vs-btn-font: 600 .95rem/1.2 var(--vs-font-body);
	--vs-btn-sm-height: 34px;
	--vs-btn-sm-padding: .35rem .75rem;
	--vs-btn-sm-size: .85rem;
	--vs-btn-transition: background-color .15s, border-color .15s, color .15s;
}

body:not(.wp-admin) {
	font-family: var(--vs-font-body);
	font-size: var(--vs-text-base);
	line-height: var(--vs-leading-body);
}
/* Low specificity lets deliberate component title sizes win. */
:where(body:not(.wp-admin)) :where(h1, h2, h3, h4) {
	font-family: var(--vs-font-display);
	line-height: var(--vs-leading-tight);
}
:where(body:not(.wp-admin)) h1 { font-size: var(--vs-h1); }
:where(body:not(.wp-admin)) h2 { font-size: var(--vs-h2); }
:where(body:not(.wp-admin)) h3 { font-size: var(--vs-h3); }
:where(body:not(.wp-admin)) h4 { font-size: var(--vs-h4); }
body:not(.wp-admin) .vs-eyebrow {
	font-family: var(--vs-font-body);
	font-size: var(--vs-text-xs);
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}
:where(body:not(.wp-admin)) :where(input, select, textarea, button) { font-family: var(--vs-font-body); }
:where(body:not(.wp-admin)) :where(input, select, textarea) { font-size: var(--vs-text-base); }
:where(body:not(.wp-admin) main) small { font-size: var(--vs-text-sm); }

body:not(.wp-admin) :is(.vs-container, .vs-library, .vs-detail, .vs-player, .vs-deckbuilder, .vs-atlas-explorer, .vs-contact, .vs-policy, .vs-not-found, .vs-community-page) {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--vs-container) + 2 * var(--vs-gutter));
	margin-inline: auto;
	padding-inline: var(--vs-gutter);
}
body:not(.wp-admin) :is(.vs-library, .vs-detail, .vs-player, .vs-deckbuilder, .vs-atlas-explorer, .vs-contact, .vs-policy, .vs-not-found, .vs-community-page) {
	margin-block: 0;
	padding-block: var(--vs-page-padding);
}
/* The header grid and full-bleed footer paint retain their existing design. */
body:not(.wp-admin) :is(.vs-site-header, .vs-site-footer) {
	--vs-site-content-gutter: max(var(--vs-gutter), calc((100% - var(--vs-container)) / 2));
}
body:not(.wp-admin) .vs-detail:is(.vs-unit-detail, .vs-faction-detail) {
	margin-block: var(--vs-page-padding);
	padding-top: 0;
}
body:not(.wp-admin).vs-faction-page .vs-detail > header { padding-inline: 0; }
/* Atlas sections now share their parent's gutter, rather than adding a second one. */
body:not(.wp-admin) .vs-atlas-explorer > :is(.vs-atlas-explorer__intro, .vs-atlas-search, .vs-atlas-explorer__status, .vs-atlas-results, .vs-atlas-map, .vs-atlas-timeline) {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	padding-inline: 0;
}

body:not(.wp-admin) .wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--vs-admin-bar-offset, 0px));
}
body:not(.wp-admin).admin-bar { --vs-admin-bar-offset: 32px; }
@media (max-width: 782px) { body:not(.wp-admin).admin-bar { --vs-admin-bar-offset: 46px; } }
body:not(.wp-admin) .wp-site-blocks > :is(main, article.vs-detail) { flex: 1 0 auto; }
body:not(.wp-admin) .wp-site-blocks > footer { margin-top: auto; }

/* Classless controls are deliberately low specificity so styled widgets win. */
:where(body:not(.wp-admin)) :is(.vs-button, :where(.vs-shop-handoff) a, :where(.vs-rule-filter) button),
:where(body:not(.wp-admin)) :where(main) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])) {
	box-sizing: border-box;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vs-space-2);
	min-height: var(--vs-btn-height);
	padding: var(--vs-btn-padding);
	border: 1px solid var(--vs-btn-primary-bg);
	border-radius: var(--vs-radius);
	background: var(--vs-btn-primary-bg);
	color: var(--vs-btn-primary-fg);
	box-shadow: none;
	text-shadow: none;
	font: var(--vs-btn-font);
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: var(--vs-btn-transition);
}
:where(body:not(.wp-admin)) :is(.vs-button, :where(.vs-shop-handoff) a, :where(.vs-rule-filter) button):hover { background: var(--vs-btn-primary-hover); color: var(--vs-btn-primary-fg); }
:where(body:not(.wp-admin)) :is(.vs-button--secondary, .vs-button--quiet),
:where(body:not(.wp-admin)) :where(main) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])) {
	border-color: var(--vs-btn-secondary-border);
	background: transparent;
	color: var(--vs-btn-fg);
}
:where(body:not(.wp-admin)) :is(.vs-button--secondary, .vs-button--quiet):hover,
:where(body:not(.wp-admin)) :where(main) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])):hover {
	border-color: var(--vs-btn-fg);
	background: var(--vs-btn-secondary-hover);
	color: var(--vs-btn-fg);
}
:where(body:not(.wp-admin)) .vs-button--ghost { border-color: transparent; background: transparent; color: var(--vs-btn-fg); }
:where(body:not(.wp-admin)) .vs-button--ghost:hover { background: transparent; color: var(--vs-btn-fg); text-decoration: underline; }
:where(body:not(.wp-admin)) .vs-button--danger { border-color: var(--vs-btn-danger-bg); background: var(--vs-btn-danger-bg); color: var(--vs-btn-danger-fg); }
:where(body:not(.wp-admin)) .vs-button--danger:hover { border-color: var(--vs-btn-danger-hover); background: var(--vs-btn-danger-hover); color: var(--vs-btn-danger-fg); }
:where(body:not(.wp-admin)) .vs-button--sm,
:where(body:not(.wp-admin)) :where(main) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])) {
	min-height: var(--vs-btn-sm-height);
	padding: var(--vs-btn-sm-padding);
	font-size: var(--vs-btn-sm-size);
}
body:not(.wp-admin) :is(.vs-button, :where(.vs-shop-handoff) a, :where(.vs-rule-filter) button):focus-visible,
body:not(.wp-admin) :where(main) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])):focus-visible {
	outline: 2px solid var(--vs-focus);
	outline-offset: 2px;
}
:where(body:not(.wp-admin)) :is(.vs-button, :where(.vs-shop-handoff) a, :where(.vs-rule-filter) button):is([disabled], [aria-disabled="true"]),
:where(body:not(.wp-admin)) :where(main) :where(button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not([class])):is([disabled], [aria-disabled="true"]) { opacity: .5; cursor: not-allowed; }

/* Also loaded in Publishing previews. The legacy ticker ignores this new hook. */
.vs-announcement[data-vs-announcement-bar] { min-height: 36px; font-family: var(--vs-font-body); font-size: var(--vs-text-sm); }
.vs-announcement[data-vs-announcement-bar][hidden] { display: none; }
.vs-announcement[data-vs-announcement-bar] .vs-announcement__inner {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: var(--vs-space-2);
	width: 100%;
	max-width: calc(var(--vs-container) + 2 * var(--vs-gutter));
	min-height: 36px;
	margin-inline: auto;
	padding-inline: var(--vs-gutter);
}
.vs-announcement[data-vs-announcement-bar] .vs-announcement__viewport { flex: 1; min-width: 0; overflow: hidden; }
.vs-announcement[data-vs-announcement-bar] .vs-announcement__track { width: 100%; max-width: none; margin: 0; padding: 0; white-space: nowrap; }
.vs-announcement[data-vs-announcement-bar] .vs-announcement__message { margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: inherit; line-height: 1.35; }
.vs-announcement[data-vs-announcement-bar] .vs-announcement__message--copy { display: none; }
.vs-announcement[data-vs-announcement-bar][data-vs-motion="scroll"] .vs-announcement__track { display: flex; width: max-content; transform: none; animation: vs-announcement-loop var(--vs-announcement-duration, 20s) linear infinite; }
.vs-announcement[data-vs-announcement-bar][data-vs-motion="scroll"] .vs-announcement__message { flex: none; min-width: var(--vs-announcement-width, 0px); box-sizing: content-box; padding-right: var(--vs-space-7); overflow: visible; }
.vs-announcement[data-vs-announcement-bar][data-vs-motion="scroll"] .vs-announcement__message--copy { display: block; }
.vs-announcement[data-vs-announcement-bar].vs-announcement--to-right .vs-announcement__track { animation-direction: reverse; }
.vs-announcement[data-vs-announcement-bar]:is(:hover, :focus-within) .vs-announcement__track { animation-play-state: paused; }
.vs-announcement[data-vs-announcement-bar] .vs-announcement__dismiss { display: inline-flex; flex: 0 0 32px; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: var(--vs-radius); background: transparent; color: inherit; cursor: pointer; }
.vs-announcement__dismiss-icon { width: 20px; height: 20px; }
.vs-announcement__dismiss:focus-visible { outline: 2px solid var(--vs-focus); outline-offset: -2px; }
@keyframes vs-announcement-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 599px) { .vs-announcement[data-vs-announcement-bar] { font-size: var(--vs-text-xs); } }
@media (prefers-reduced-motion: reduce) {
	.vs-announcement[data-vs-announcement-bar][data-vs-motion="scroll"] .vs-announcement__track { display: block; width: 100%; animation: none; transform: none; }
	.vs-announcement[data-vs-announcement-bar][data-vs-motion="scroll"] .vs-announcement__message { min-width: 0; padding: 0; overflow: hidden; }
	.vs-announcement[data-vs-announcement-bar][data-vs-motion="scroll"] .vs-announcement__message--copy { display: none; }
}