/* The box page borrows the site's tokens rather than defining a palette of its
   own. What is local to this page is the drawing sheet: white paper, near-black
   linework, and one accent colour reserved for anything the draughtsman added
   on top of the geometry. */
.box-blueprint-page {
	--sheet-surface: var(--color-surface);
	--ink: var(--color-text-primary);
	/* Slate 500 rather than slate 400: hidden lines are non-text graphics and
	   still need to clear 3:1 against the paper. */
	--ink-soft: #64748b;
	--annotation: var(--color-accent);
	--technical-font: "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Consolas, monospace;
}

.box-container {
	padding-bottom: clamp(3rem, 7vw, 6rem);
}

.box-header {
	padding-block: clamp(1.25rem, 4vw, 2.5rem) clamp(1.5rem, 3vw, 2rem);
}

.box-header-rail {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	font-family: var(--technical-font);
	font-size: .75rem;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.box-home-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	letter-spacing: normal;
	text-transform: none;
}

.box-title-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
	align-items: end;
	gap: clamp(1.5rem, 4vw, 3rem);
	padding-top: clamp(1.25rem, 3vw, 2rem);
}

.box-title-copy {
	max-width: 46rem;
}

.box-title-copy h1 {
	margin: .35em 0 0;
}

.box-title-copy > p:last-child {
	margin: .6rem 0 0;
	color: var(--color-text-secondary);
}

.box-page {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2rem);
}

.box-footer {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: clamp(1.25rem, 3vw, 2rem);
	padding-top: clamp(1.25rem, 3vw, 2rem);
	border-top: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	font-size: .8125rem;
	line-height: 1.4;
}

.box-footer img {
	flex: none;
	border-radius: 2px;
}

.box-footer p {
	margin: 0;
}

.box-footer a {
	color: inherit;
}

.box-panel {
	min-width: 0;
	padding: var(--panel-padding);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-surface);
}

.panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1rem;
}

.section-heading {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.section-heading h2,
.download-copy h2 {
	margin: 0;
	font-size: 1.25rem;
	line-height: 1.3;
}

.section-index {
	display: grid;
	width: 2rem;
	height: 2rem;
	flex: none;
	margin: 0;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	color: var(--color-accent);
	font-family: var(--technical-font);
	font-size: .8rem;
	font-weight: 600;
	line-height: 1;
	place-items: center;
}

.unit-switch {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.unit-switch legend {
	padding: 0 0 .3rem;
	color: var(--color-text-secondary);
	font-family: var(--technical-font);
	font-size: .68rem;
	letter-spacing: .08em;
	line-height: 1.4;
	text-transform: uppercase;
}

.unit-options {
	display: flex;
	gap: .35rem;
}

.unit-option {
	position: relative;
	display: inline-grid;
}

/* The radio itself is the hit target so it keeps real radio semantics and a
   comfortable size; the label rides on top and lets clicks through to it. */
.unit-option input {
	width: 100%;
	min-width: 3.25rem;
	min-height: 44px;
	margin: 0;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	appearance: none;
	background-color: var(--color-surface);
	cursor: pointer;
}

.unit-option label {
	position: absolute;
	display: grid;
	inset: 0;
	font-size: .9375rem;
	font-weight: 600;
	place-items: center;
	pointer-events: none;
}

.unit-option input:hover {
	background-color: var(--color-surface-subtle);
}

.unit-option input:checked {
	border-color: var(--color-accent);
	background-color: var(--color-accent);
}

.unit-option input:checked + label {
	color: var(--color-text-on-accent);
}

.parameter-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: .75rem;
}

.parameter-field {
	min-width: 0;
	padding: .75rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-surface-subtle);
}

.parameter-field label {
	display: block;
	min-height: 2.7em;
	font-size: .875rem;
	font-weight: 600;
	line-height: 1.35;
}

.parameter-field label .unit-label {
	color: var(--color-text-secondary);
	font-weight: 400;
}

.parameter-field label output {
	float: right;
	margin-left: .5rem;
	color: var(--color-accent);
	font-family: var(--technical-font);
}

.parameter-field input {
	width: 100%;
	min-height: 44px;
	margin-top: .35rem;
	padding: .45rem .7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-surface);
	color: var(--color-text-primary);
	font: 600 1rem/1.2 var(--technical-font);
}

/* The site stylesheet gives links and buttons their focus ring; these are the
   page's own form controls, so they take the same one here. */
.parameter-field input:focus-visible,
.unit-option input:focus-visible,
.viewer-explode input:focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 3px;
}

.parameter-field input[aria-invalid="true"] {
	border-color: var(--color-focus);
	box-shadow: inset 2px 0 0 var(--color-focus);
}

.parameter-field input[type="range"],
.viewer-explode input[type="range"] {
	padding-inline: 0;
	background-color: transparent;
	accent-color: var(--color-accent);
	cursor: pointer;
}

.field-hint,
.field-error {
	margin: .3rem 0 0;
	font-size: .78rem;
	line-height: 1.4;
}

.field-hint {
	color: var(--color-text-secondary);
}

.field-error {
	min-height: 1.9em;
	color: #9a3412;
	font-weight: 600;
}

.drawing-table .table-row {
	grid-template-columns: minmax(4rem, .5fr) minmax(8rem, 1fr) minmax(8rem, 1fr);
	min-width: 22rem;
}

.drawing-table .table-cell {
	font-family: var(--technical-font);
	font-size: .8rem;
}

.drawing-table .table-header .table-cell {
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* The drawing sheet: paper with nothing competing with the linework. */
.blueprint-sheet {
	margin-top: 1rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--sheet-surface);
	overflow: hidden;
}

.drawing-hero,
.drawing-card {
	min-width: 0;
	margin: 0;
}

.drawing-hero {
	border-bottom: 1px solid var(--color-border);
}

.drawing-hero figcaption,
.drawing-card figcaption {
	padding: .5rem .75rem;
	border-bottom: 1px solid var(--color-border);
	color: var(--color-text-primary);
	font-family: var(--technical-font);
	font-size: .72rem;
	letter-spacing: .06em;
	line-height: 1.35;
	text-transform: uppercase;
}

.drawing-hero figcaption span,
.drawing-card figcaption span {
	margin-right: .55rem;
	color: var(--color-accent);
}

.drawing-hero svg,
.drawing-card svg {
	display: block;
	width: 100%;
	height: auto;
	color: var(--annotation);
	shape-rendering: geometricprecision;
}

.drawing-hero svg {
	max-height: 40rem;
}

/* The bar sits above the drawing it commands, between the caption and the
   paper, so its rule closes the header rather than the sheet. */
.viewer-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1rem;
	padding: .5rem .75rem;
	border-bottom: 1px solid var(--color-border);
	background-color: var(--color-surface);
}

.viewer-presets {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
}

.viewer-presets button {
	min-width: 44px;
	min-height: 44px;
	padding: .4rem .7rem;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background-color: var(--color-surface);
	color: var(--color-text-primary);
	font: 600 .8125rem/1 var(--technical-font);
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
}

/* The presets are the only way to turn the drawings now, so the active one is
   marked at rest rather than only under the pointer. */
.viewer-presets button:hover:not(:disabled),
.viewer-presets button:active:not(:disabled),
.viewer-presets button[aria-pressed="true"]:not(:disabled) {
	border-color: var(--color-accent);
	background-color: var(--color-surface-subtle);
	color: var(--color-accent);
}

.viewer-presets button[aria-pressed="true"]:not(:disabled) {
	box-shadow: inset 0 -2px 0 var(--color-accent);
}

.viewer-presets button:disabled {
	color: var(--color-text-secondary);
	cursor: not-allowed;
	opacity: .6;
}

.viewer-explode {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: .5rem;
	color: var(--color-text-secondary);
	font-family: var(--technical-font);
	font-size: .68rem;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.viewer-explode input[type="range"] {
	width: clamp(6rem, 18vw, 11rem);
	min-height: 44px;
	margin: 0;
}

.viewer-explode input:disabled {
	cursor: not-allowed;
	opacity: .6;
}

.drawing-detail-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.drawing-card:not(:last-child) {
	border-right: 1px solid var(--color-border);
}

.drawing-card svg {
	min-height: 15rem;
	max-height: 22rem;
}

.drawing-visible,
.drawing-hidden,
.drawing-dimension,
.drawing-extension,
.drawing-leader,
.drawing-callout-line {
	fill: none;
	vector-effect: non-scaling-stroke;
}

.drawing-visible {
	stroke: var(--ink);
	stroke-width: 1.15;
}

.drawing-hidden {
	stroke: var(--ink-soft);
	stroke-width: .7;
	stroke-dasharray: 4 3;
}

.drawing-part-lid.drawing-visible {
	stroke: var(--annotation);
	stroke-width: 1.25;
}

.drawing-part-lid.drawing-hidden {
	stroke: var(--annotation);
	opacity: .45;
}

.drawing-dimension,
.drawing-extension,
.drawing-leader,
.drawing-callout-line {
	stroke: var(--annotation);
	stroke-width: .85;
}

.drawing-extension {
	opacity: .65;
}

.drawing-leader,
.drawing-callout-line {
	stroke-dasharray: 2 1.5;
}

/* Font sizes are set by box.js in each drawing's own units so annotations
   remain proportional as the generated box dimensions change. */
.drawing-dimension-text,
.drawing-callout-text {
	fill: var(--annotation);
	font-family: var(--technical-font);
	font-weight: 600;
	letter-spacing: .03em;
	paint-order: stroke;
	stroke: var(--sheet-surface);
	stroke-width: .24;
}

.drawing-dimension-text {
	text-anchor: middle;
}

.drawing-callout-text {
	text-transform: uppercase;
}

.drawing-callout-dot {
	fill: var(--annotation);
}

.drawing-placeholder {
	fill: var(--color-text-secondary);
	font-family: var(--technical-font);
	font-size: 2.4px;
	letter-spacing: .05em;
	text-anchor: middle;
	text-transform: uppercase;
}

.download-panel {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(20rem, 30rem);
	align-items: center;
	gap: 1.25rem;
}

.download-copy {
	display: flex;
	align-items: center;
	gap: .75rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.download-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
}

.download-row button {
	display: flex;
	min-width: 0;
	min-height: 54px;
	align-items: center;
	justify-content: center;
	gap: .65rem;
	padding: .6rem .85rem;
	border: 1px solid var(--color-accent);
	border-radius: var(--radius);
	background-color: var(--color-accent);
	color: var(--color-text-on-accent);
	font-family: inherit;
	text-align: left;
	cursor: pointer;
}

.download-row button svg {
	width: 1.35rem;
	height: 1.35rem;
	flex: none;
	fill: none;
	stroke: currentcolor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.7;
}

.download-row button span {
	display: flex;
	flex-direction: column;
}

.download-row button strong {
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.25;
}

.download-row button small {
	font-size: .72rem;
	line-height: 1.3;
	opacity: .85;
}

.download-row button:hover:not(:disabled),
.download-row button:active:not(:disabled) {
	border-color: var(--color-accent-hover);
	background-color: var(--color-accent-hover);
}

.download-row button:disabled {
	border-color: var(--color-border);
	background-color: var(--color-surface-subtle);
	color: var(--color-text-secondary);
	cursor: not-allowed;
}

@media (max-width: 64rem) {
	.box-title-row,
	.download-panel {
		grid-template-columns: 1fr;
	}

	.parameter-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* The generated table rows lose their grid at this width, so the drawing table
   needs the same row padding the site's other tables get. */
@media (max-width: 48rem) {
	/* The site's narrow-layout rule drops the row grid; this drops the scroll
	   width that went with it, which would otherwise clip the legend. */
	.drawing-table .table-row {
		min-width: 0;
	}

	.drawing-table .table-row:not(.table-header) {
		padding: .75rem 1rem;
	}

	.drawing-table .table-cell {
		padding-inline: 0;
	}
}

/* Stops just short of 48rem so a 768px tablet keeps the two-column layout above
   rather than collapsing to the single-column one. */
@media (max-width: 47.9375rem) {
	.box-header-rail {
		align-items: flex-start;
		flex-direction: column;
		gap: .25rem;
	}

	.panel-header,
	.viewer-bar {
		align-items: flex-start;
		flex-direction: column;
	}

	.parameter-grid,
	.drawing-detail-grid,
	.download-row {
		grid-template-columns: 1fr;
	}

	.drawing-card:not(:last-child) {
		border-right: 0;
		border-bottom: 1px solid var(--color-border);
	}

	.drawing-card svg {
		min-height: 17rem;
	}

	.viewer-explode input[type="range"] {
		width: 100%;
	}

	.viewer-explode {
		width: 100%;
	}
}