/* ==========================================================================
   Studio Variant — Project Navigator page layer (.nv-*)

   Material & Process Finder. A plain-language start, a few calm questions
   one at a time, a recommended route, then the existing Material Finder
   embedded and narrowed. Built on sv.css tokens, the shared page chrome
   (scanning.css) and the finder interface (finder.css), so it reads as the
   same environment rather than a separate tool.
   ========================================================================== */

/* ------------------------------ Hero ----------------------------------- */

.nv-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(var(--sv-8), 7vw, var(--sv-10)) 0 clamp(var(--sv-7), 5vw, var(--sv-8));
	background: radial-gradient(110% 80% at 14% 10%, rgba(140, 155, 163, 0.08) 0%, transparent 60%),
		radial-gradient(90% 70% at 92% 86%, rgba(195, 160, 106, 0.05) 0%, transparent 62%),
		var(--sv-bg);
}
.nv-hero-inner {
	position: relative;
	z-index: 2;
	display: grid;
	gap: var(--sv-5);
	max-width: 68ch;
}
.nv-h1 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-display-l);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--sv-text);
}
.nv-lede {
	margin: 0;
	color: var(--sv-text-secondary);
	max-width: 56ch;
}
.nv-ask {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: var(--sv-3);
	align-items: stretch;
	margin-top: var(--sv-2);
}
.nv-input {
	min-height: 56px;
	font-size: var(--sv-body-l);
}
.nv-jumps {
	margin: 0;
	max-width: 60ch;
}
.nv-jumps a {
	color: var(--sv-text-secondary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.nv-jumps a:hover {
	color: var(--sv-text);
}

/* ------------------------------ Flow ----------------------------------- */

.nv-flow-inner {
	display: grid;
	gap: var(--sv-6);
	max-width: 76ch;
}
.nv-rail {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.nv-body {
	display: grid;
	gap: var(--sv-6);
}

/* One step at a time: the interpretation of what was typed, then a single
   question. Nothing else competes for attention. */
.nv-step {
	display: grid;
	gap: var(--sv-5);
	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);
}
.nv-read {
	display: grid;
	gap: var(--sv-3);
	padding-bottom: var(--sv-5);
	border-bottom: 1px solid var(--sv-border-hairline);
}
.nv-read h2,
.nv-h2 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	color: var(--sv-text);
	overflow-wrap: anywhere;
}
.nv-read p {
	margin: 0;
	max-width: 62ch;
	color: var(--sv-text-secondary);
}
.nv-q {
	display: grid;
	gap: var(--sv-4);
}
.nv-q-count {
	margin: 0;
	color: var(--sv-text-faint);
}
.nv-q h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h3);
	font-weight: 500;
	line-height: 1.16;
	text-transform: uppercase;
	letter-spacing: 0.01em;
	color: var(--sv-text);
}
.nv-q > .sv-help {
	margin: 0;
	max-width: 62ch;
}

/* Answer tiles: the same tiles the finder uses for applications, so the
   two halves of the system look like one. Every tile is a large target. */
.nv-options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-3);
}
.nv-options.is-wide {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nv-option {
	min-height: 64px;
}
.nv-option[aria-pressed="true"] {
	border-color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
}
.nv-option[aria-pressed="true"] strong {
	color: var(--sv-mist-050);
}
.nv-option.is-unsure strong {
	color: var(--sv-text-secondary);
}

.nv-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-3);
	align-items: center;
	padding-top: var(--sv-4);
	border-top: 1px solid var(--sv-border-hairline);
}
.nv-actions .sv-help {
	margin: 0;
	flex-basis: 100%;
}

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

.nv-result .gf-result-head h3 {
	text-transform: uppercase;
	letter-spacing: -0.01em;
}
.nv-route-steps {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nv-route-steps li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sv-mist-100);
	padding: 8px 13px;
	border: 1px solid var(--sv-titanium-line);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-titanium-wash);
}
.nv-route-steps li.is-arrow {
	padding: 0;
	border: 0;
	background: none;
	color: var(--sv-text-faint);
}
.nv-material-line {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sv-2) var(--sv-3);
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-body-l);
	color: var(--sv-text);
}
.nv-material-line .sv-label {
	color: var(--sv-titanium);
}
.nv-material-line.is-open {
	color: var(--sv-text-secondary);
}
.nv-requirements {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.nv-requirements 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);
}
.nv-result.is-review::before {
	background: var(--sv-brass);
}
.nv-result.is-review .gf-result-head .sv-label {
	color: var(--sv-brass);
}

/* --------------------------- Material section -------------------------- */

.nv-material-head {
	display: grid;
	gap: var(--sv-4);
	max-width: 62ch;
	margin-bottom: var(--sv-6);
}
.nv-material-lede {
	margin: 0;
	color: var(--sv-text-secondary);
}
.nv-narrowed {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-3) var(--sv-4);
	margin: 0 0 var(--sv-6);
	padding: var(--sv-3) var(--sv-4);
	border-left: 2px solid var(--sv-titanium);
	background: var(--sv-titanium-wash);
	font-size: var(--sv-body-s);
	color: var(--sv-mist-200);
}
.nv-narrowed[hidden] {
	display: none;
}
.nv-narrowed button {
	appearance: none;
	border: 0;
	background: none;
	padding: 0;
	font: inherit;
	color: var(--sv-text-secondary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.nv-narrowed button:hover {
	color: var(--sv-text);
}
.nv-switch-wrap[hidden] {
	display: none;
}
.mf-switch-note a {
	color: var(--sv-text-secondary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

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

@media (max-width: 760px) {
	.nv-ask {
		grid-template-columns: minmax(0, 1fr);
	}
	.nv-ask .sv-btn {
		width: 100%;
	}
	.nv-rail {
		grid-template-columns: minmax(0, 1fr);
	}
	.nv-options,
	.nv-options.is-wide {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.nv-options,
	.nv-options.is-wide {
		grid-template-columns: minmax(0, 1fr);
	}
	.nv-option {
		min-height: 56px;
	}
	.nv-actions .sv-btn {
		width: 100%;
		text-align: center;
	}
	.nv-h1 {
		font-size: clamp(2rem, 9vw, 2.6rem);
	}
}

/* --------------------------- Category tiles ---------------------------- */

/* "What are you making?" — the kinds of thing people bring, in their
   words. Picking one starts the contextual questions without typing. */
.nv-cats-wrap {
	display: grid;
	gap: var(--sv-3);
}
.nv-cats-label {
	margin: 0;
}
.nv-cats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-2);
}
.nv-cat {
	appearance: none;
	display: grid;
	gap: 3px;
	align-content: start;
	min-height: 60px;
	padding: 10px 12px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm, 4px);
	background: var(--sv-surface);
	color: var(--sv-text);
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}
.nv-cat strong {
	font-family: var(--sv-font-display);
	font-weight: 500;
	font-size: var(--sv-body-s);
	line-height: 1.2;
	letter-spacing: 0.01em;
}
.nv-cat span {
	font-size: var(--sv-micro);
	line-height: 1.35;
	color: var(--sv-text-secondary);
}
.nv-cat:hover,
.nv-cat:focus-visible {
	border-color: var(--sv-titanium-line);
	background: var(--sv-titanium-wash);
	transform: translateY(-1px);
}
.nv-cat:focus-visible {
	outline: 2px solid var(--sv-titanium);
	outline-offset: 2px;
}
.nv-cat[aria-pressed="true"] {
	border-color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
}
.nv-cat[aria-pressed="true"] strong {
	color: var(--sv-mist-050);
}
.nv-option.is-guess {
	border-color: var(--sv-titanium-line);
}
.nv-option.is-guess span {
	color: var(--sv-mist-200);
}

/* --------------------------- Question extras --------------------------- */

/* Progress dots: one per question for this kind of object. */
.nv-dots {
	display: flex;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.nv-dots li {
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: var(--sv-border);
}
.nv-dots li.is-done {
	background: var(--sv-titanium-line);
}
.nv-dots li.is-current {
	background: var(--sv-titanium);
}

/* A short text answer with Continue and an optional skip. */
.nv-textq {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	gap: var(--sv-3);
	align-items: stretch;
}
.nv-textq .sv-input[aria-invalid="true"] {
	border-color: var(--sv-brass);
}

/* Contextual measuring: only what that kind of object is measured by. */
.nv-measure {
	display: grid;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px dashed var(--sv-border);
	border-radius: var(--sv-radius-sm, 4px);
}
.nv-measure[hidden] {
	display: none;
}
.nv-measure .sv-label {
	margin: 0;
}
.nv-measure-fields {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
}
.nv-measure-fields .sv-input {
	width: 7.5em;
	flex: 0 0 auto;
}
.nv-measure-x,
.nv-measure-unit {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-body-s);
	color: var(--sv-text-secondary);
}
.nv-size-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-3);
}

/* --------------------------- Starting shapes --------------------------- */

.nv-shapes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
	gap: var(--sv-2);
}
.nv-shape {
	appearance: none;
	display: grid;
	gap: 4px;
	justify-items: center;
	padding: 10px 8px 9px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm, 4px);
	background: var(--sv-surface);
	color: var(--sv-text);
	font: inherit;
	cursor: pointer;
	transition: border-color 160ms ease, background-color 160ms ease;
}
.nv-shape:hover,
.nv-shape:focus-visible {
	border-color: var(--sv-titanium-line);
	background: var(--sv-titanium-wash);
}
.nv-shape:focus-visible {
	outline: 2px solid var(--sv-titanium);
	outline-offset: 2px;
}
.nv-shape[aria-pressed="true"] {
	border-color: var(--sv-titanium);
	background: var(--sv-titanium-wash);
	box-shadow: inset 0 0 0 1px var(--sv-titanium);
}
.nv-shape-svg {
	display: block;
	width: 80px;
	height: 48px;
}
.nv-shape-line {
	fill: none;
	stroke: var(--sv-mist-200);
	stroke-width: 1.6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}
.nv-shape[aria-pressed="true"] .nv-shape-line {
	stroke: var(--sv-mist-050);
}
.nv-shape span {
	font-size: var(--sv-body-s);
	line-height: 1.2;
	text-align: center;
}
.nv-shape small {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.06em;
	color: var(--sv-text-faint);
}
.nv-shapes-block .sv-help {
	margin: 0 0 var(--sv-3);
}

@media (max-width: 760px) {
	.nv-cats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.nv-textq {
		grid-template-columns: minmax(0, 1fr);
	}
}
@media (max-width: 560px) {
	.nv-cats {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Requirements read from the description, and the free note field on the
   result card. */
.nv-needs-block .gf-list b {
	color: var(--sv-text);
	font-weight: 600;
}
.nv-extra {
	display: block;
	width: 100%;
	margin-top: var(--sv-2);
	resize: vertical;
	min-height: 64px;
	font-family: var(--sv-font-body);
	font-size: 0.95rem;
	line-height: 1.5;
}