/* =========================================================================
   Studio Variant — Additive Manufacturing capability page

   This page shares the capability-page layer (scanning.css) so the header,
   section heads, steps, modules, route cards, records and the
   next-capability component are identical between chapters. Everything
   below is what this chapter needs on top, scoped to .am-* so it cannot
   reach another page.
   ========================================================================= */

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

/* The hero drawing is the SVG itself, not its host: the host is a grid item
   and must keep stretching to its column. */
.sc-hero-art > .am-hero-svg {
	max-height: min(74vh, 680px);
	margin-inline: auto;
}
.am-motif-list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ----------------------- Not just prototypes, uses ---------------------- */

.am-uses .sc-module h3 {
	font-size: var(--sv-h3);
}
.am-use-tag {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-titanium-deep);
	margin: 0;
}

/* --------------------------- Commercial + creator ----------------------- */

/* Two audiences, one drawing discipline. Identical structure either side:
   whatever changes between the panels is the content, not the quality. */
.am-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-5);
}
.am-side {
	display: flex;
	flex-direction: column;
	gap: var(--sv-4);
	padding: clamp(var(--sv-5), 3vw, var(--sv-7));
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	box-shadow: var(--sv-shadow-hairline);
	transition: border-color var(--sv-base) var(--sv-ease-precision);
}
.am-side:hover {
	border-color: var(--sv-titanium-line);
}
.am-side h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h2);
	font-weight: 500;
	letter-spacing: -0.018em;
	color: var(--sv-text);
}
.am-side p {
	margin: 0;
}
.am-side-art {
	color: var(--sv-titanium);
	padding: var(--sv-2) 0;
	background: radial-gradient(ellipse 72% 60% at 50% 50%, rgba(185, 192, 196, 0.05), transparent 70%);
}
/* The drawings carry their own annotation type. Holding each one near the
   width it was drawn at keeps that type the same size as the technical
   notation around it instead of scaling it up with the artwork. */
.am-side-art svg {
	max-width: 340px;
	margin-inline: auto;
}
.am-examples {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.am-examples 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: 6px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken);
}
.am-side-cta {
	margin-top: auto;
	padding-top: var(--sv-2);
}

/* ------------------------- Replacement part chain ----------------------- */

.am-sequence {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--sv-3);
	align-items: stretch;
}
.am-sequence .sc-stage {
	padding: var(--sv-3);
	gap: var(--sv-2);
}
.am-sequence .sc-stage + .sc-stage::before {
	left: calc(var(--sv-3) * -1 - 1px);
	width: var(--sv-3);
}

/* -------------------------- Tooling and patterns ------------------------ */

.am-tools {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-4);
}
.am-tool {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-4);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-bg-sunken);
}
.am-tool + .am-tool::before {
	content: "";
	position: absolute;
	left: calc(var(--sv-4) * -1 - 1px);
	top: 50%;
	width: var(--sv-4);
	height: 1px;
	background: var(--sv-graphite-500);
}
.am-tool p {
	margin: 0;
}
.am-tool-art {
	color: var(--sv-titanium);
}
.am-tool-art svg {
	max-width: 240px;
	margin-inline: auto;
}
.am-tool.is-external {
	border-style: dashed;
}

.am-flow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: var(--sv-4) var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background: rgba(8, 9, 10, 0.4);
}
.am-flow li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-mist-300);
	display: flex;
	align-items: center;
	gap: var(--sv-3);
}
.am-flow li + li::before {
	content: "→";
	color: var(--sv-titanium-deep);
}
.am-flow li.is-yours {
	color: var(--sv-brass-bright);
}

/* ---------------------------- Material function ------------------------- */

.am-mats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sv-4);
}
.am-mat {
	display: flex;
	flex-direction: column;
	gap: var(--sv-3);
	padding: var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
	transition: border-color var(--sv-base) var(--sv-ease-precision);
}
.am-mat:hover {
	border-color: var(--sv-titanium-line);
}
.am-mat h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h4);
	font-weight: 500;
	color: var(--sv-text);
}
.am-mat p {
	margin: 0;
}
.am-mat-art {
	width: 64px;
	color: var(--sv-titanium);
}
.am-mat-svg {
	width: 100%;
	height: auto;
	stroke-opacity: 0.75;
}
.am-mat.is-regulated {
	border-style: dashed;
	border-color: var(--sv-brass-line);
}
.am-mat.is-regulated .am-mat-art {
	color: var(--sv-brass);
}

/* Example material families, collapsed by default so the page stays
   readable for somebody who has never used a 3D printer. */
.am-families {
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background: var(--sv-bg-sunken);
	padding: var(--sv-4) var(--sv-5);
}
.am-families > summary {
	cursor: pointer;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-titanium);
	list-style: none;
	display: flex;
	align-items: center;
	gap: var(--sv-3);
}
.am-families > summary::-webkit-details-marker {
	display: none;
}
.am-families > summary::before {
	content: "+";
	font-size: 14px;
	color: var(--sv-brass);
}
.am-families[open] > summary::before {
	content: "–";
}
.am-families-body {
	display: grid;
	gap: var(--sv-4);
	padding-top: var(--sv-4);
	margin-top: var(--sv-4);
	border-top: 1px solid var(--sv-border-hairline);
}
.am-family-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.am-family-list li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sv-mist-200);
	padding: 7px 12px;
	border: 1px solid var(--sv-border-strong);
	border-radius: var(--sv-radius-pill);
}

/* ------------------------------ Start where ----------------------------- */

.am-entries {
	display: grid;
	gap: var(--sv-3);
}
.am-entry {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
	gap: var(--sv-4);
	align-items: center;
	padding: var(--sv-4) var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-sm);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
}
.am-entry p {
	margin: 0;
}
.am-entry-said {
	font-family: var(--sv-font-display);
	font-size: var(--sv-body-l);
	font-weight: 500;
	color: var(--sv-text);
}
.am-entry-route {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.am-entry-route li {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-mist-300);
	padding: 5px 10px;
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-xs);
	background: var(--sv-bg-sunken);
	display: flex;
	align-items: center;
	gap: var(--sv-3);
}
.am-entry-route li + li::before {
	content: "→";
	color: var(--sv-titanium-deep);
	margin-left: calc(var(--sv-3) * -1 + 2px);
}
.am-entry-route li.is-external {
	border-style: dashed;
	color: var(--sv-text-muted);
}

/* -------------------------------- Iterate ------------------------------- */

.am-loop {
	color: var(--sv-titanium);
	background: radial-gradient(ellipse 60% 60% at 50% 50%, rgba(185, 192, 196, 0.05), transparent 70%);
}
.am-loop svg {
	max-width: 520px;
	margin-inline: auto;
}

/* ------------------------------ Project size ---------------------------- */

.am-size {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sv-5);
	text-align: center;
	padding: clamp(var(--sv-6), 5vw, var(--sv-9)) var(--sv-5);
	border: 1px solid var(--sv-border);
	border-radius: var(--sv-radius-md);
	background-color: var(--sv-surface);
	background-image: var(--sv-texture-carbon);
}
.am-size h2 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(1.9rem, 4vw, 3rem);
	font-weight: 500;
	line-height: 1.06;
	letter-spacing: -0.026em;
	color: var(--sv-text);
}
.am-size h2 em {
	display: block;
	font-style: normal;
	color: var(--sv-mist-300);
}
.am-size p {
	margin: 0;
	max-width: 62ch;
}

/* -------------------------------- Closing ------------------------------- */

/* The shared closing block assumes a short second line. This chapter closes
   with a full sentence, so it is held a step below the headline rather than
   set at the same size, where it would compete with it. */
[data-sv-capability="additive-manufacturing"] .sc-close h2 em {
	margin: var(--sv-4) auto 0;
	max-width: 30ch;
	font-size: clamp(1.1rem, 1.9vw, 1.55rem);
	line-height: 1.34;
	letter-spacing: -0.008em;
}

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

@media (max-width: 1080px) {
	.am-motif-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.am-sequence {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.am-sequence .sc-stage:nth-child(4)::before {
		display: none;
	}
	.am-mats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.am-split {
		grid-template-columns: minmax(0, 1fr);
	}
	.am-tools {
		grid-template-columns: minmax(0, 1fr);
	}
	.am-tool + .am-tool::before {
		display: none;
	}
	.am-sequence {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.am-sequence .sc-stage:nth-child(odd)::before {
		display: none;
	}
	.am-entry {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-3);
	}
}

@media (max-width: 640px) {
	.am-motif-list {
		grid-template-columns: minmax(0, 1fr);
	}
	.am-sequence,
	.am-mats {
		grid-template-columns: minmax(0, 1fr);
	}
	.am-sequence .sc-stage::before {
		display: none;
	}
	/* "Start an additive project" and "Discuss tooling / mould project" are
	   long labels. Held on one line they set the hero grid wider than a
	   phone, so on a phone they wrap. */
	[data-sv-capability="additive-manufacturing"] .sc-actions .sv-btn,
	[data-sv-capability="additive-manufacturing"] .sc-close-actions .sv-btn {
		white-space: normal;
		text-align: center;
	}
	/* The hero drawing renders about a third of its design width on a phone,
	   which is too small for its call-outs. The annotation text and the
	   leaders that point at it stand down; the phase read-out and the layer
	   counter tell the story instead. */
	.am-sheet-note,
	.am-lead,
	.am-lead-note {
		display: none;
	}
	.am-sheet {
		display: none;
	}
	.am-inset {
		display: none;
	}
	.am-hero-svg text {
		display: none;
	}
	.am-hero-svg [data-am-phase] {
		display: block;
		font-size: 34px;
		letter-spacing: 4px;
	}
	.am-hero-svg [data-am-counter] {
		display: block;
		font-size: 22px;
		letter-spacing: 2.6px;
	}
}