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

   Shares the capability-page layer (scanning.css), so the header, section
   heads, stages, routes, steps, records and the next-capability component
   are identical between chapters. Everything below is what this chapter
   needs on top, scoped to .sm-* so it cannot reach another page.

   Where additive stacked material upward, this chapter works inward: the
   recurring device here is a solid field with something taken out of it.
   ========================================================================= */

/* ---------------------------------- 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 > .sm-hero-svg {
	max-height: min(74vh, 680px);
	margin-inline: auto;
}
.sm-motif-list {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* ---------------------- What can we machine, modules -------------------- */

.sm-caps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sv-4);
}
.sm-caps .sc-module h3 {
	font-size: var(--sv-h4);
}
.sm-cap-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:
   what changes between the panels is the content, not the quality. */
.sm-split {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--sv-5);
}
.sm-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);
}
.sm-side:hover {
	border-color: var(--sv-titanium-line);
}
.sm-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);
}
.sm-side p {
	margin: 0;
}
.sm-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. */
.sm-side-art svg {
	max-width: 340px;
	margin-inline: auto;
}
.sm-examples {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-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);
}
.sm-side-cta {
	margin-top: auto;
	padding-top: var(--sv-2);
}

/* ------------------------------- Sequences ------------------------------ */

/* Prototype-to-CNC, the replacement-part route and the PCB route are all
   the same component drawn at each stage, so they share one grid. */
.sm-sequence {
	display: grid;
	gap: var(--sv-3);
	align-items: stretch;
}
.sm-sequence.is-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}
.sm-sequence.is-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}
.sm-sequence.is-7 {
	grid-template-columns: repeat(7, minmax(0, 1fr));
}
.sm-sequence .sc-stage {
	padding: var(--sv-3);
	gap: var(--sv-2);
}
.sm-sequence .sc-stage + .sc-stage::before {
	left: calc(var(--sv-3) * -1 - 1px);
	width: var(--sv-3);
}

/* ---------------------------- Complex geometry -------------------------- */

/* Five levels of the same idea, read left to right. Each one is a short
   definition rather than a machining lecture. */
.sm-geoms {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--sv-3);
}
.sm-geom {
	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);
}
.sm-geom h3 {
	margin: 0;
	font-family: var(--sv-font-mono);
	font-size: var(--sv-label);
	font-weight: 400;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--sv-titanium);
}
.sm-geom p {
	margin: 0;
}
.sm-geom-art {
	color: var(--sv-titanium);
}
.sm-geom-svg {
	width: 100%;
	height: auto;
	max-width: 200px;
}

/* ------------------------------- Materials ------------------------------ */

.sm-mats {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-4);
}
.sm-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);
}
.sm-mat:hover {
	border-color: var(--sv-titanium-line);
}
.sm-mat h3 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: var(--sv-h4);
	font-weight: 500;
	color: var(--sv-text);
}
.sm-mat p {
	margin: 0;
}
.sm-mat-art {
	width: 64px;
	color: var(--sv-titanium);
}
.sm-mat-svg {
	width: 100%;
	height: auto;
	stroke-opacity: 0.75;
}
.sm-mat.is-review {
	border-style: dashed;
	border-color: var(--sv-brass-line);
}
.sm-mat.is-review .sm-mat-art {
	color: var(--sv-brass);
}
.sm-mat-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sv-2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-mat-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);
}

/* ------------------------------ Rotary axis ----------------------------- */

.sm-rotary {
	color: var(--sv-titanium);
	background: radial-gradient(ellipse 66% 60% at 50% 50%, rgba(185, 192, 196, 0.05), transparent 70%);
}
.sm-rotary-svg {
	max-width: 560px;
	margin-inline: auto;
}
/* The hatching wrapped round the billet is what carries the rotation, which
   is how rotation reads on a drawing. The cutter stays put; the material
   turns under it. */
.sm-rotary-svg .sm-spin {
	animation: sm-roll 5.5s linear infinite;
}
.sm-rotary-svg .sm-rotary-tool {
	animation: sm-plunge 5.5s var(--sv-ease-precision) infinite;
}
@keyframes sm-roll {
	from {
		transform: translateX(0);
		opacity: 0.45;
	}
	to {
		transform: translateX(14px);
		opacity: 0.45;
	}
}
@keyframes sm-plunge {
	0%,
	18% {
		transform: translateY(-6px);
	}
	44%,
	72% {
		transform: translateY(4px);
	}
	100% {
		transform: translateY(-6px);
	}
}
@media (prefers-reduced-motion: reduce) {
	.sm-rotary-svg .sm-spin,
	.sm-rotary-svg .sm-rotary-tool {
		animation: none;
	}
}

/* ------------------------- Finish and detail band ----------------------- */

/* Macro-style drawings of machined surfaces. No roughness values and no
   promised finishing processes: this band shows the character of a cut
   surface, nothing more. */
.sm-finishes {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sv-4);
}
.sm-finish {
	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);
	overflow: hidden;
}
.sm-finish p {
	margin: 0;
}
.sm-finish-cap {
	font-family: var(--sv-font-mono);
	font-size: var(--sv-micro);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sv-titanium-deep);
}
.sm-finish-svg {
	width: 100%;
	height: auto;
	border-radius: var(--sv-radius-xs);
}

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

.sm-entries {
	display: grid;
	gap: var(--sv-3);
}
.sm-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);
}
.sm-entry p {
	margin: 0;
}
.sm-entry-said {
	font-family: var(--sv-font-display);
	font-size: var(--sv-body-l);
	font-weight: 500;
	color: var(--sv-text);
}
.sm-entry-route {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sv-2) var(--sv-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.sm-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);
}
.sm-entry-route li + li::before {
	content: "→";
	color: var(--sv-titanium-deep);
	margin-left: calc(var(--sv-3) * -1 + 2px);
}
.sm-entry-route li.is-other {
	border-style: dashed;
	color: var(--sv-text-muted);
}

/* ------------------------- Two tools, one family ------------------------ */

/* The Material Finder and the Print-or-Machine helper are the same
   component with different logic, so they are framed identically. */
.sm-tool-band {
	display: grid;
	gap: var(--sv-5);
}
.sm-tool-note {
	margin: 0;
	max-width: 68ch;
}

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

.sm-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);
}
.sm-size h2 {
	margin: 0;
	font-family: var(--sv-font-display);
	font-size: clamp(1.7rem, 3.4vw, 2.6rem);
	font-weight: 500;
	line-height: 1.08;
	letter-spacing: -0.024em;
	color: var(--sv-text);
}
.sm-size h2 em {
	display: block;
	font-style: normal;
	color: var(--sv-mist-300);
}
.sm-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="subtractive-manufacturing"] .sc-close h2 em {
	margin: var(--sv-4) auto 0;
	max-width: 34ch;
	font-size: clamp(1.05rem, 1.8vw, 1.45rem);
	line-height: 1.34;
	letter-spacing: -0.006em;
}

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

@media (max-width: 1080px) {
	.sm-motif-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sm-caps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sm-sequence.is-5,
	.sm-sequence.is-6,
	.sm-sequence.is-7 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sm-sequence .sc-stage:nth-child(3n + 1)::before {
		display: none;
	}
	.sm-geoms {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.sm-finishes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.sm-split {
		grid-template-columns: minmax(0, 1fr);
	}
	.sm-mats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sm-sequence.is-5,
	.sm-sequence.is-6,
	.sm-sequence.is-7 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sm-sequence .sc-stage::before {
		display: none;
	}
	.sm-geoms {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sm-entry {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sv-3);
	}
}

@media (max-width: 640px) {
	.sm-motif-list,
	.sm-caps,
	.sm-mats,
	.sm-geoms,
	.sm-finishes {
		grid-template-columns: minmax(0, 1fr);
	}
	.sm-sequence.is-5,
	.sm-sequence.is-6,
	.sm-sequence.is-7 {
		grid-template-columns: minmax(0, 1fr);
	}
	/* "Start a machining project" and "Discuss a prototype-to-CNC project"
	   are long labels. Held on one line they set the grid wider than a
	   phone, so on a phone they wrap. */
	[data-sv-capability="subtractive-manufacturing"] .sc-actions .sv-btn,
	[data-sv-capability="subtractive-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 pass
	   counter tell the story instead. */
	.sm-sheet-note,
	.sm-sheet,
	.sm-lead,
	.sm-lead-note,
	/* the sheet-level section view stands down too — at phone scale it
	   sits across the phase read-out rather than beside it */
	.sm-section-strip {
		display: none;
	}
	.sm-hero-svg text {
		display: none;
	}
	.sm-hero-svg [data-sm-phase] {
		display: block;
		font-size: 34px;
		letter-spacing: 4px;
	}
	.sm-hero-svg [data-sm-counter] {
		display: block;
		font-size: 21px;
		letter-spacing: 2.4px;
	}
}