/* =========================================================================
   Studio Variant — guidance finder

   Interface styling for the Material Finder and for any later Studio
   Variant guidance tool built on the same engine. Every value comes from
   the shared tokens in sv.css, so the tool reads as part of the same
   environment rather than a widget dropped into it. Selectors are gf-*
   only, so nothing here can reach another component.
   ========================================================================= */

.gf {
	display: grid;
	gap: var(--sv-6);
	padding: clamp(var(--sv-5), 3.4vw, var(--sv-8));
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-lg, var(--sv-radius-md));
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	box-shadow: var(--sv-shadow-hairline);
}

/* ------------------------------ Step rail ------------------------------- */

.gf-rail {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--sv-border-hairline);
	border-bottom: 1px solid var(--sv-border-hairline);
}
.gf-rail-item {
	display: flex;
	align-items: center;
	gap: var(--sv-3);
	padding: var(--sv-4) var(--sv-4) var(--sv-4) 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--sv-text-faint);
	position: relative;
}
.gf-rail-item + .gf-rail-item {
	padding-left: var(--sv-4);
	border-left: 1px solid var(--sv-border-hairline);
}
.gf-rail-item i {
	font-style: normal;
	color: var(--sv-graphite-400);
}
.gf-rail-item.is-current {
	color: var(--sv-titanium-bright);
}
.gf-rail-item.is-current i {
	color: var(--sv-brass);
}
.gf-rail-item.is-current::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 1px;
	background: var(--sv-titanium);
}
.gf-rail-item.is-done {
	color: var(--sv-text-muted);
}
.gf-rail-item.is-done i {
	color: var(--sv-titanium-deep);
}

/* --------------------------------- Body --------------------------------- */

.gf-body {
	display: grid;
	gap: var(--sv-6);
}
.gf-lead {
	display: grid;
	gap: var(--sv-3);
	max-width: 62ch;
}
.gf-lead h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	line-height: 1.16;
	color: var(--sv-text);
}
.gf-lead p {
	margin: 0;
}
.gf-lead .sv-label {
	margin: 0;
}

.gf-priorities {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.gf-priorities li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-text-muted);
	padding: 5px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
}

/* ------------------------- Option A and option B ------------------------ */

.gf-option {
	display: grid;
	gap: var(--sv-4);
	padding-top: var(--sv-5);
	border-top: 1px solid var(--sv-border-hairline);
}
.gf-option > .sv-label {
	margin: 0;
	color: var(--sv-titanium);
}
.gf-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sv-3);
	align-items: end;
}
.gf-note {
	margin: 0;
	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-mist-200);
}

/* Application tiles. Large targets, because this is the first decision. */
.gf-apps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sv-3);
}
.gf-app {
	appearance: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	text-align: left;
	padding: var(--sv-4);
	min-height: 84px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-graphite-850);
	cursor: pointer;
	transition: border-color var(--sv-base) var(--sv-ease-precision), background-color var(--sv-base),
		transform var(--sv-slow) var(--sv-ease-settle);
}
.gf-app:hover,
.gf-app:focus-visible {
	border-color: var(--sv-titanium-line);
	background: var(--sv-surface-hover);
	transform: translateY(-1px);
}
.gf-app strong {
	font-family: var(--sv-font-display);
	font-size: var(--sv-body);
	font-weight: 500;
	color: var(--sv-text);
}
.gf-app span {
	font-size: var(--sv-body-s);
	line-height: 1.45;
	color: var(--sv-text-muted);
}

/* ------------------------------ Questions ------------------------------- */

.gf-questions {
	display: grid;
	gap: var(--sv-4);
}
.gf-question {
	display: grid;
	gap: var(--sv-3);
	padding: var(--sv-4) var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: var(--sv-bg-sunken);
}
.gf-q {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-body-l);
	font-weight: 500;
	color: var(--sv-text);
}
.gf-question .sv-help {
	margin: 0;
}
.gf-answers {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
}
.gf-answer {
	min-width: 104px;
	min-height: 44px;
}

/* ------------------------------- Actions -------------------------------- */

.gf-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
	align-items: center;
}

/* -------------------------------- Result -------------------------------- */

.gf-result {
	display: grid;
	gap: var(--sv-5);
	padding: clamp(var(--sv-4), 2.6vw, var(--sv-6));
	border: 1px solid var(--sv-titanium-line);
	border-radius: var(--sv-radius-md);
	background: var(--sv-bg-sunken);
	position: relative;
	overflow: hidden;
}
.gf-result::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 2px;
	background: var(--sv-titanium);
}
.gf-result-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sv-3);
}
.gf-result-head .sv-label {
	margin: 0;
	flex-basis: 100%;
	color: var(--sv-titanium);
}
.gf-result-head h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	line-height: 1.1;
	color: var(--sv-text);
}
.gf-result > p {
	margin: 0;
	max-width: 74ch;
}

.gf-block {
	display: grid;
	gap: var(--sv-3);
	padding-top: var(--sv-4);
	border-top: 1px solid var(--sv-border-hairline);
}
.gf-block .sv-label,
.gf-block .sv-help {
	margin: 0;
}

.gf-families {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.gf-families li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-100);
	padding: 8px 13px;
	border: 1px solid var(--sv-titanium-line);
	border-radius: var(--sv-radius-pill);
	background: var(--sv-titanium-wash);
}

.gf-list {
	display: grid;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 80ch;
}
.gf-list li {
	position: relative;
	padding-left: var(--sv-4);
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
}
.gf-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 9px;
	height: 1px;
	background: var(--sv-titanium-deep);
}
.gf-list.is-confirm li::before {
	background: var(--sv-brass);
}

.gf-also {
	display: grid;
	gap: var(--sv-2);
	padding: var(--sv-4);
	border: 1px dashed var(--sv-border-strong);
	border-radius: var(--sv-radius-sm);
}
.gf-also p {
	margin: 0;
}
.gf-also .sv-label {
	color: var(--sv-text-muted);
}

.gf-notice {
	margin: 0;
	padding: var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: rgba(8, 9, 10, 0.5);
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	line-height: 1.7;
	letter-spacing: 0.04em;
	color: var(--sv-text-muted);
}

/* ------------------------------ Responsive ------------------------------ */

@media (max-width: 1080px) {
	.gf-apps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.gf-apps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gf-form {
		grid-template-columns: minmax(0, 1fr);
	}
	.gf-form .sv-btn {
		width: 100%;
	}
	.gf-rail {
		grid-template-columns: minmax(0, 1fr);
	}
	.gf-rail-item + .gf-rail-item {
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid var(--sv-border-hairline);
	}
	/* The steps stack, so the active-step underline would sit across the
	   next row's rule. A left bar reads correctly in a column instead. */
	.gf-rail-item.is-current::after {
		left: -1px;
		top: 0;
		bottom: 0;
		width: 2px;
		height: auto;
	}
}

@media (max-width: 560px) {
	.gf-apps {
		grid-template-columns: minmax(0, 1fr);
	}
	.gf-answers {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.gf-answer {
		min-width: 0;
		width: 100%;
	}
	.gf-actions .sv-btn {
		width: 100%;
		text-align: center;
	}
}