/* Reference routes: shared foundation tokens, preset paints and faction accents. */
body:not(.wp-admin) .vs-rule-quicknav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vs-space-2);
	padding: var(--vs-space-5);
}
body:not(.wp-admin) .vs-rule-quicknav > h2 {
	position: relative;
	z-index: 1;
	flex-basis: 100%;
	margin: 0 0 var(--vs-space-2);
	color: var(--vs-public-text);
}
body:not(.wp-admin) .vs-rule-quicknav a {
	/* Presets read this token even when their radius declaration is important. */
	--vs-control-radius: 999px;
	position: relative;
	z-index: 1;
	flex: 0 1 auto;
	margin: 0;
	padding: .45rem .9rem;
	border: 1px solid rgba(241, 234, 220, .25);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--vs-public-text);
	font: 600 var(--vs-text-sm)/1.4 var(--vs-font-body);
	text-decoration: none;
}
body:not(.wp-admin) .vs-rule-quicknav a:is(:hover, :focus-visible) {
	border-color: var(--vs-public-focus);
	background: var(--vs-btn-secondary-hover);
	box-shadow: none;
}
body:not(.wp-admin) .vs-rule-quicknav a.is-active {
	background: var(--vs-btn-primary-bg);
	color: var(--vs-btn-primary-fg);
	box-shadow: none;
}
body:not(.wp-admin) .vs-rule-quicknav a:focus-visible {
	outline: 2px solid var(--vs-focus);
	outline-offset: 2px;
}
.vs-rule-list { gap: var(--vs-space-2) var(--vs-space-4); }
.vs-rule-list > li,
.vs-rule-list > li > a {
	display: grid;
	grid-row: span 3;
	grid-template-rows: subgrid;
}
.vs-rule-list > li > a {
	gap: var(--vs-space-2);
	padding: var(--vs-space-5);
	align-content: start;
}
.vs-rule-list > li > a > * { margin: 0; }
.vs-rule-list__category { min-height: 1.4em; line-height: 1.4; }

body:not(.wp-admin) .vs-unit-detail > header {
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin-inline: 0;
}
.vs-unit-detail .vs-unit-layout {
	grid-template-areas: "data cards";
	grid-template-columns: minmax(0, 1.12fr) minmax(290px, .62fr);
	align-items: start;
}
.vs-unit-layout__cards {
	display: grid;
	grid-area: cards;
	gap: var(--vs-space-5);
	min-width: 0;
	align-items: start;
}
.vs-unit-layout__cards > aside { grid-area: auto; align-self: start; }
.vs-unit-detail .vs-unit-layout .vs-unit-linked {
	position: static;
	width: auto;
	margin-top: var(--vs-space-5);
	align-self: start;
}
/* Phones: Linked rules takes its natural height. */
.vs-unit-detail .vs-unit-layout .vs-unit-linked { padding-bottom: var(--vs-space-5); }
.vs-unit-detail .vs-unit-layout .vs-unit-linked ul { flex: none; overflow: visible; padding-right: 0; }
/* Two columns: Linked rules fills down to the card column's bottom edge so the
   OPDAT area reads as one large card; a long list scrolls inside the panel and
   never lengthens the page (contain: size keeps it out of the row height). */
@media (min-width: 701px) {
	.vs-unit-detail .vs-unit-layout { align-items: stretch; }
	.vs-unit-detail .vs-unit-layout__data { display: flex; flex-direction: column; min-width: 0; }
	.vs-unit-detail .vs-unit-layout .vs-unit-linked { flex: 1 1 auto; align-self: stretch; min-height: 0; }
	.vs-unit-detail .vs-unit-layout .vs-unit-linked ul { flex: 1 1 0; min-height: 7.5rem; overflow-x: hidden; overflow-y: auto; padding-right: .25rem; contain: size; }
}
/* No equipment card: the DENIED card keeps every unit's layout identical on
   tablet and desktop; phones get the compact note instead of a full screen. */
.vs-unit-equipment--empty .vs-unit-equipment__empty { display: none; }
@media (max-width: 767px) {
	.vs-unit-equipment--empty { padding: var(--vs-space-4); }
	.vs-unit-equipment--empty .vs-unit-equipment__denied { display: none; }
	.vs-unit-equipment--empty .vs-unit-equipment__empty { display: flex; }
}
.vs-unit-equipment__empty {
	display: flex;
	align-items: center;
	gap: var(--vs-space-3);
	min-height: 3rem;
	font-size: var(--vs-text-sm);
}
.vs-unit-equipment__empty p { margin: 0; }
.vs-unit-equipment__empty-icon { flex: 0 0 1.5rem; width: 1.5rem; height: 1.5rem; color: var(--vs-public-muted); }
.vs-unit-weapons__stack { display: none; }

body:not(.wp-admin) .vs-detail.vs-faction-detail { padding-top: 0; }
.vs-faction-detail > .vs-crumbs { margin-top: 0; }
/* Faction hero: the original full-width image with the title on a translucent
   faction band, kept to a compact height so it no longer dominates the page. */
.vs-faction-detail__hero {
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	width: 100%;
	margin: var(--vs-space-5) 0 var(--vs-space-6);
	overflow: hidden;
	border: 1px solid color-mix(in srgb, var(--vs-context-accent) 60%, transparent);
	border-radius: var(--vs-radius);
	background: #08090a;
}
.vs-faction-detail__hero > .vs-detail__image { position: relative; z-index: 0; margin: 0; padding: 0; border: 0; }
/* Fixed shapes so art can be cropped to fit exactly: 12:5 (e.g. 2400x1000) on tablet/desktop, 3:2 on phones. */
.vs-faction-detail__hero > .vs-detail__image img { display: block; width: 100%; height: auto; aspect-ratio: 12 / 5; object-fit: cover; object-position: center; }
.vs-faction-detail .vs-faction-detail__title {
	position: absolute;
	z-index: 2;
	top: clamp(1rem, 3.2vw, 2.6rem);
	left: 0;
	box-sizing: border-box;
	width: min(76%, 720px);
	max-width: none;
	margin: 0;
	padding: clamp(.8rem, 1.6vw, 1.2rem) clamp(1rem, 2.8vw, 2.35rem);
	border-block: 1px solid color-mix(in srgb, var(--vs-context-accent) 86%, rgba(240, 233, 218, .3));
	/* Darkened faction tint so light palettes (BioSite) keep white titles legible. */
	background: linear-gradient(90deg, color-mix(in srgb, var(--vs-context-muted) 55%, #0a0a0b) , color-mix(in srgb, var(--vs-context-muted) 40%, rgba(10, 10, 11, .82)) 66%, transparent);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
	container-type: inline-size;
}
.vs-faction-detail__title .vs-eyebrow { margin: 0 0 .35rem; color: var(--vs-context-strong); }
/* Sized from the band (cqi) so the longest name fits on one line; words never break. */
.vs-faction-detail__title h1 { margin: 0; color: #f0ece2; font-size: clamp(1.8rem, 9cqi, 4.6rem); line-height: .9; letter-spacing: .035em; text-transform: uppercase; overflow-wrap: normal; word-break: normal; hyphens: manual; text-wrap: balance; }
.vs-faction-detail__title-line { display: block; width: 62px; height: 3px; margin-top: .75rem; background: var(--vs-context-accent); box-shadow: 17px 0 0 color-mix(in srgb, var(--vs-context-accent) 38%, transparent); }
@media (max-width: 599px) {
	.vs-faction-detail__hero > .vs-detail__image img { aspect-ratio: 3 / 2; }
	.vs-faction-detail .vs-faction-detail__title { width: calc(100% - var(--vs-space-5)); top: var(--vs-space-4); }
}
.vs-faction-detail__content-grid > article { display: flex; flex-direction: column; }
.vs-faction-detail__content-grid > article > .vs-eyebrow { margin: 0 0 var(--vs-space-2); }
.vs-faction-detail__content-grid > article > h3 { margin: 0 0 var(--vs-space-3); }
.vs-faction-detail__content-grid > article > p:not(.vs-eyebrow) { margin: 0 0 var(--vs-space-4); }
.vs-faction-detail__content-grid > article > a:last-child { margin-top: auto; }
.vs-faction-detail__content-grid h3 a { text-decoration: none; }
.vs-faction-detail__content-grid h3 a:is(:hover, :focus-visible) { text-decoration: underline; }

/* Reserve room at the end so every page control can scroll clear of the sheet. */
html.vs-table-promo-visible { scroll-padding-bottom: var(--vs-table-promo-height, 0px); }
body.vs-table-promo-visible::after { content: ""; display: block; height: var(--vs-table-promo-height, 0px); }
body .vs-table-mode-promo {
	box-sizing: border-box;
	display: grid;
	position: fixed;
	left: auto;
	right: max(var(--vs-space-4), env(safe-area-inset-right));
	bottom: max(var(--vs-space-4), env(safe-area-inset-bottom));
	width: min(420px, calc(100% - 2 * var(--vs-space-4)));
	max-height: 50dvh;
	overflow-y: auto;
	border-radius: var(--vs-radius);
}
@media (max-width: 700px) {
	.vs-unit-detail .vs-unit-layout { grid-template-areas: "data" "cards"; grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
	.vs-unit-weapons__scroll { display: none; }
	.vs-unit-weapons__stack { display: grid; gap: var(--vs-space-4); }
	.vs-unit-weapons__stack section { min-width: 0; border-top: 1px solid var(--vs-public-edge); padding-top: var(--vs-space-3); }
	.vs-unit-weapons__stack h3 { margin: 0 0 var(--vs-space-3); font-size: var(--vs-text-lg); overflow-wrap: anywhere; }
	.vs-unit-weapons__stack dl { margin: 0; }
	.vs-unit-weapons__stack dl > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--vs-space-3); padding-block: var(--vs-space-1); }
	.vs-unit-weapons__stack dt { font-weight: 600; }
	.vs-unit-weapons__stack dd { margin: 0; overflow-wrap: anywhere; }
	body .vs-table-mode-promo { left: 0; right: 0; bottom: 0; width: 100%; border-radius: var(--vs-radius) var(--vs-radius) 0 0; padding-bottom: max(var(--vs-space-3), env(safe-area-inset-bottom)); }
	body .vs-table-mode-promo__actions { grid-template-columns: minmax(0, 1fr) auto; }
}