/* =========================================================================
   Studio Variant — The Variant Index

   Page-scoped layer, class-prefixed .vi-*, loaded after sv.css and the
   shared page chrome in scanning.css. It cannot reach any other page.

   The Index is a reference, so the visual language is compact technical
   cards, monospace designations and progressive disclosure — the same
   blueprint influence as the rest of the site, with less drama and more
   density. Capability status is the one thing that gets colour:
     In-house              titanium
     Manufacturing partner brass
     Available on enquiry  info blue
   ========================================================================= */

/* ------------------------------- 1. Hero ------------------------------- */

.vi-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--sv-8), 7vw, var(--sv-10)) 0 var(--sv-7);
	background: radial-gradient(110% 80% at 12% 8%, rgba(140, 155, 163, 0.08) 0%, transparent 60%),
		var(--sv-bg);
	background-image: var(--sv-texture-carbon);
}
.vi-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	gap: clamp(var(--sv-6), 5vw, var(--sv-9));
	align-items: start;
}
.vi-hero-text {
	display: flex;
	flex-direction: column;
	gap: var(--sv-5);
	max-width: 60ch;
}
.vi-hero h1 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(1.9rem, 3.6vw, 3rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.03em;
	color: var(--sv-text);
}
.vi-hero-lede {
	color: var(--sv-text-secondary);
	margin: 0;
	max-width: 56ch;
}

.vi-search {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	margin-top: var(--sv-2);
}
.vi-search-row {
	display: flex;
	gap: var(--sv-3);
}
.vi-search-row .sv-input {
	flex: 1 1 auto;
	min-width: 0;
}
.vi-search-examples {
	margin: 0;
	color: var(--sv-text-faint);
	display: flex;
	flex-wrap: wrap;
	gap: 4px var(--sv-3);
	align-items: baseline;
}
.vi-search-examples button {
	appearance: none;
	background: none;
	border: 0;
	/* 24px touch target; the negative margin keeps the inline rhythm */
	padding: 2px 0;
	margin: -2px 0;
	font: inherit;
	color: var(--sv-text-muted);
	text-decoration: underline;
	text-decoration-color: var(--sv-graphite-500);
	text-underline-offset: 3px;
	cursor: pointer;
}
.vi-search-examples button:hover {
	color: var(--sv-titanium);
}

/* Learn → Understand → Choose → Start */
.vi-journey {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1px;
	background: var(--sv-border-hairline);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	overflow: hidden;
}
.vi-journey li {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--sv-4);
	row-gap: 2px;
	padding: var(--sv-4) var(--sv-5);
	background: var(--sv-surface);
}
.vi-journey li i {
	grid-row: 1 / span 2;
	font-family: var(--sv-font-mono);
	font-style: normal;
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	color: var(--sv-text-faint);
	padding-top: 3px;
}
.vi-journey li b {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-h4);
	color: var(--sv-text);
}
.vi-journey li span {
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
}
.vi-journey li.is-here {
	background: var(--sv-surface-raised);
	box-shadow: inset 3px 0 0 var(--sv-titanium);
}
.vi-journey li.is-here i {
	color: var(--sv-titanium);
}

/* ------------------------------ 2. Sub-nav ----------------------------- */

.vi-subnav {
	position: sticky;
	top: 76px; /* below the shared sticky topbar */
	z-index: 20;
	border-top: 1px solid var(--sv-border-hairline);
	border-bottom: 1px solid var(--sv-border);
	background: rgba(10, 11, 12, 0.92);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.vi-subnav-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sv-4);
	min-height: 52px;
}
.vi-subnav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--sv-2);
	overflow-x: auto;
	scrollbar-width: none;
}
.vi-subnav ul::-webkit-scrollbar {
	display: none;
}
.vi-subnav ul a {
	display: inline-block;
	white-space: nowrap;
	padding: 16px var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: color var(--sv-base), border-color var(--sv-base);
}
.vi-subnav ul a:hover {
	color: var(--sv-text);
}
.vi-subnav ul a[aria-current="true"] {
	color: var(--sv-text);
	border-bottom-color: var(--sv-titanium);
}
.vi-crumb {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 40%;
}

/* ------------------------- 3. Shared Index pieces ---------------------- */

.vi-section {
	padding: clamp(var(--sv-7), 6vw, var(--sv-9)) 0;
	border-top: 1px solid var(--sv-border-hairline);
}
.vi-section.is-sunken {
	background: rgba(8, 9, 10, 0.55);
}
.vi-section-head {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	max-width: 64ch;
	margin-bottom: var(--sv-6);
}
.vi-section-head h2,
.vi-section-head h1 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	letter-spacing: -0.03em;
	line-height: 1.1;
	color: var(--sv-text);
}
.vi-section-head p {
	margin: 0;
	color: var(--sv-text-secondary);
}
.vi-mark {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}
.vi-mark b {
	color: var(--sv-titanium);
	font-weight: 500;
}
.vi-mark i {
	display: block;
	width: 28px;
	height: 1px;
	background: var(--sv-graphite-500);
}

/* Capability status */
.vi-status {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.13em;
	text-transform: uppercase;
	padding: 5px 10px;
	border-radius: var(--sv-radius-xs);
	border: 1px solid var(--sv-border);
	color: var(--sv-text-muted);
	white-space: nowrap;
}
.vi-status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}
.vi-status.is-inhouse {
	border-color: var(--sv-titanium-line);
	color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
}
.vi-status.is-partner {
	border-color: var(--sv-brass-line);
	color: var(--sv-brass-bright);
	background: var(--sv-brass-wash);
}
.vi-status.is-enquiry {
	border-color: rgba(109, 136, 153, 0.4);
	color: var(--sv-info);
	background: var(--sv-info-wash);
}

/* Status legend, filter and meanings */
.vi-legend {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	background: var(--sv-border-hairline);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	overflow: hidden;
	margin: var(--sv-6) 0;
}
.vi-legend div {
	background: var(--sv-surface);
	padding: var(--sv-4) var(--sv-5);
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
}
.vi-legend p {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
	line-height: 1.5;
}
.vi-filters {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	align-items: center;
	margin-bottom: var(--sv-6);
}
.vi-filters .sv-label {
	margin-right: var(--sv-2);
}
.vi-filters .sv-chip[aria-pressed="true"].is-partner {
	border-color: var(--sv-brass);
	background: var(--sv-brass-wash);
	color: var(--sv-brass-bright);
}
.vi-filters .sv-chip[aria-pressed="true"].is-enquiry {
	border-color: var(--sv-info);
	background: var(--sv-info-wash);
	color: var(--sv-info);
}
.vi-count {
	margin-left: auto;
	color: var(--sv-text-faint);
}

/* Area cards (overview) */
.vi-areas {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sv-4);
}
.vi-area {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-5);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--sv-base), background-color var(--sv-base), transform var(--sv-base) var(--sv-ease-precision);
}
.vi-area:hover {
	border-color: var(--sv-graphite-400);
	background-color: var(--sv-surface-hover);
	transform: translateY(-2px);
}
.vi-area .vi-mark {
	margin-bottom: var(--sv-2);
}
.vi-area h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-h3);
	letter-spacing: -0.02em;
	color: var(--sv-text);
}
.vi-area p {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
	line-height: 1.55;
	flex: 1 1 auto;
}
.vi-area .vi-area-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	padding-top: var(--sv-3);
	border-top: 1px solid var(--sv-border-hairline);
}
.vi-area .vi-area-foot em {
	font-style: normal;
	color: var(--sv-titanium);
}
.vi-area.is-strong {
	box-shadow: inset 0 2px 0 var(--sv-titanium);
}

/* Family strips */
.vi-family {
	padding: var(--sv-6) 0;
	border-top: 1px solid var(--sv-border-hairline);
}
.vi-family:first-of-type {
	border-top: 0;
	padding-top: 0;
}
.vi-family-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sv-3) var(--sv-5);
	margin-bottom: var(--sv-4);
}
.vi-family-head h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-h3);
	letter-spacing: -0.02em;
	color: var(--sv-text);
}
.vi-family-head p {
	margin: 0;
	flex: 1 1 30ch;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
}
.vi-family-head .vi-count {
	flex: 0 0 auto;
}

/* Compact technical cards */
.vi-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-3);
}
.vi-card {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-4) var(--sv-5);
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	color: inherit;
	text-decoration: none;
	transition: border-color var(--sv-base), background-color var(--sv-base);
	min-height: 100%;
}
.vi-card:hover {
	border-color: var(--sv-graphite-400);
	background: var(--sv-surface-hover);
}
.vi-card-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: var(--sv-3);
}
.vi-card h4 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-h4);
	letter-spacing: -0.01em;
	color: var(--sv-text);
}
.vi-card .vi-aka {
	margin: -6px 0 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.06em;
	color: var(--sv-text-faint);
}
.vi-card p {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
	line-height: 1.5;
}
.vi-card-foot {
	margin-top: auto;
	padding-top: var(--sv-3);
	border-top: 1px solid var(--sv-border-hairline);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
}
.vi-card-foot em {
	font-style: normal;
	color: var(--sv-text-muted);
}
.vi-card.is-hidden {
	display: none;
}
.vi-empty {
	padding: var(--sv-5);
	border: 1px dashed var(--sv-border);
	border-radius: var(--sv-radius-sm);
	color: var(--sv-text-muted);
	font-size: var(--sv-body-s);
}

/* ------------------------------ 4. Detail ------------------------------ */

.vi-detail {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.75fr);
	gap: clamp(var(--sv-6), 5vw, var(--sv-9));
	align-items: start;
}
.vi-detail-head {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	margin-bottom: var(--sv-6);
}
.vi-detail-head h1 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: clamp(1.8rem, 3.6vw, 2.8rem);
	letter-spacing: -0.03em;
	line-height: 1.05;
	color: var(--sv-text);
}
.vi-detail-head .vi-aka {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.06em;
	color: var(--sv-text-faint);
}
.vi-detail-status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-3);
}
.vi-detail-status small {
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
	max-width: 60ch;
}
.vi-back {
	display: inline-flex;
	align-items: center;
	gap: var(--sv-2);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	text-decoration: none;
	margin-bottom: var(--sv-5);
}
.vi-back:hover {
	color: var(--sv-text);
}

.vi-block {
	padding: var(--sv-5) 0;
	border-top: 1px solid var(--sv-border-hairline);
}
.vi-block h2 {
	margin: 0 0 var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}
.vi-block p {
	margin: 0;
	color: var(--sv-text-secondary);
	max-width: 66ch;
	line-height: 1.6;
}
.vi-block ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sv-2);
	max-width: 66ch;
}
.vi-block ul:not(.vi-links) li {
	position: relative;
	padding-left: var(--sv-5);
	color: var(--sv-text-secondary);
	line-height: 1.55;
}
.vi-block ul:not(.vi-links) li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 10px;
	height: 1px;
	background: var(--sv-titanium);
}
.vi-block.is-limits ul:not(.vi-links) li::before {
	background: var(--sv-brass);
}
.vi-note {
	margin-top: var(--sv-4);
	padding: var(--sv-3) var(--sv-4);
	border-left: 2px solid var(--sv-brass);
	background: var(--sv-brass-wash);
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
	max-width: 66ch;
	line-height: 1.55;
}
.vi-note.is-enquiry {
	border-left-color: var(--sv-info);
	background: var(--sv-info-wash);
}

/* Property table */
.vi-props {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--sv-body-s);
	max-width: 66ch;
}
.vi-props th,
.vi-props td {
	text-align: left;
	vertical-align: top;
	padding: 9px 0;
	border-bottom: 1px solid var(--sv-border-hairline);
}
.vi-props th {
	width: 36%;
	padding-right: var(--sv-4);
	font-family: var(--sv-font-mono);
	font-weight: 500;
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}
.vi-props td {
	color: var(--sv-text-secondary);
}

/* Detail side rail */
.vi-rail {
	position: sticky;
	top: 144px;
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
}
.vi-rail-card {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-5);
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
}
.vi-rail-card.is-start {
	background-image: var(--sv-texture-carbon);
	border-color: var(--sv-titanium-line);
}
.vi-rail-card p {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
	line-height: 1.55;
}
.vi-rail-card .sv-btn {
	align-self: flex-start;
}
.vi-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.vi-links li {
	border-top: 1px solid var(--sv-border-hairline);
}
.vi-links li:first-child {
	border-top: 0;
}
.vi-links a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--sv-3);
	padding: 10px 0;
	color: var(--sv-text-secondary);
	text-decoration: none;
	font-size: var(--sv-body-s);
	transition: color var(--sv-base);
}
.vi-links a:hover {
	color: var(--sv-text);
}
.vi-links a::after {
	content: "→";
	color: var(--sv-text-faint);
}
.vi-links .vi-status {
	font-size: 0.6rem;
	padding: 3px 7px;
}

/* --------------------------- 5. Guides / glossary ---------------------- */

.vi-guides {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-3);
}
.vi-guide-points {
	counter-reset: vi-point;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	max-width: 70ch;
}
.vi-guide-points li {
	counter-increment: vi-point;
	display: grid;
	grid-template-columns: 34px 1fr;
	gap: var(--sv-3);
	padding: var(--sv-4) 0;
	border-top: 1px solid var(--sv-border-hairline);
	color: var(--sv-text-secondary);
	line-height: 1.6;
}
.vi-guide-points li::before {
	content: counter(vi-point, decimal-leading-zero);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.12em;
	color: var(--sv-titanium);
	padding-top: 3px;
}

.vi-glossary-search {
	max-width: 44ch;
	margin-bottom: var(--sv-6);
}
.vi-glossary {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: var(--sv-8);
}
.vi-glossary li {
	break-inside: avoid;
	padding: var(--sv-4) 0;
	border-top: 1px solid var(--sv-border-hairline);
}
.vi-glossary dt,
.vi-glossary b {
	display: block;
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-h4);
	color: var(--sv-text);
	margin-bottom: 4px;
}
.vi-glossary p {
	margin: 0;
	font-size: var(--sv-body-s);
	color: var(--sv-text-muted);
	line-height: 1.55;
}
.vi-glossary a {
	color: var(--sv-titanium);
	text-decoration: none;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	display: inline-block;
	margin-top: 6px;
}
.vi-glossary li.is-hidden {
	display: none;
}
.vi-alpha {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: var(--sv-5);
}
.vi-alpha button {
	appearance: none;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--sv-radius-xs);
	padding: 4px 7px;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.1em;
	color: var(--sv-text-muted);
	cursor: pointer;
}
.vi-alpha button:disabled {
	color: var(--sv-graphite-600);
	cursor: default;
}
.vi-alpha button:not(:disabled):hover,
.vi-alpha button[aria-pressed="true"] {
	color: var(--sv-titanium);
	border-color: var(--sv-titanium-line);
}

/* Search results */
.vi-results {
	display: flex;
	flex-direction: column;
	gap: var(--sv-6);
}
.vi-results h3 {
	margin: 0 0 var(--sv-3);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
}

/* ------------------------------ 6. Next steps -------------------------- */

.vi-next-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-4);
}
.vi-next-card {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-5);
	background: var(--sv-surface);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
}
.vi-next-card p {
	margin: 0;
}
.vi-next-card .sv-body {
	color: var(--sv-text-muted);
	flex: 1 1 auto;
}
.vi-next-card .sv-btn {
	align-self: flex-start;
}
.vi-next-card.is-start {
	border-color: var(--sv-titanium-line);
	background-image: var(--sv-texture-carbon);
}

/* ------------------------------ 7. Responsive -------------------------- */

@media (max-width: 1080px) {
	.vi-hero-inner {
		grid-template-columns: 1fr;
	}
	.vi-areas {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.vi-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.vi-detail {
		grid-template-columns: 1fr;
	}
	.vi-rail {
		position: static;
	}
	.vi-next-grid {
		grid-template-columns: 1fr;
	}
	.vi-legend {
		grid-template-columns: 1fr;
	}
	.vi-crumb {
		display: none;
	}
}
@media (max-width: 640px) {
	.vi-areas,
	.vi-cards,
	.vi-guides {
		grid-template-columns: 1fr;
	}
	.vi-glossary {
		columns: 1;
	}
	.vi-search-row {
		flex-direction: column;
	}
	.vi-search-row .sv-btn {
		width: 100%;
	}
	.vi-props th {
		width: 44%;
	}
	.vi-filters .vi-count {
		flex-basis: 100%;
		margin-left: 0;
	}
}