/*
 * Virtual Printing Press
 */


#printing-press-app {
	--printing-press-line-measure: 26rem;
	--printing-press-paper-measure: 30rem;
}


/*
 * ================================================================
 * Challenge selection
 * ================================================================
 */

.printing-press-challenge-button {
	width: 100%;
	height: 100%;

	text-align: left;
}


.printing-press-challenge-difficulty {
	text-transform: capitalize;
}


/*
 * ================================================================
 * Type case
 * ================================================================
 */

.printing-press-type-case {
	display: grid;
	grid-template-columns: repeat(8, minmax(3rem, 1fr));
	gap: .5rem;
}


.printing-press-type {
	min-height: 3.5rem;

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;

	font-family: "Special Elite", system-ui;
	font-weight: 400;
	font-style: normal;

}


.printing-press-type--xs,
.printing-press-type--sm {
	grid-column: span 1;
}


.printing-press-type--md,
.printing-press-type--lg {
	grid-column: span 2;
}


.printing-press-type--xl {
	grid-column: span 3;
}


.printing-press-type.is-needed {
	outline: .2rem solid var(--bs-warning);
	outline-offset: .125rem;
}


/*
 * ================================================================
 * Composing stick
 * ================================================================
 */

.printing-press-composing-viewport {
	max-width: 100%;

	overflow-x: auto;

	padding-bottom: .25rem;
}


.printing-press-composing-stick {
	width: var(--printing-press-line-measure);
	min-width: var(--printing-press-line-measure);
	min-height: 6rem;

	padding: 1rem;

	border: .2rem solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);

	background-color: var(--bs-tertiary-bg);

	display: flex;
	align-items: center;

	gap: .25rem;
}


.printing-press-composing-stick.is-drag-over {
	border-color: var(--bs-primary);
}


.printing-press-sort {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/*

	min-width: 2.25rem;
	min-height: 2.75rem;

	padding: .25rem .5rem;
	*/

	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-sm);

	background-color: var(--bs-body-bg);
}


.printing-press-sort__face {
	display: inline-block;
	transform: scaleX(-1);
	font-family: "Special Elite", system-ui;
	font-weight: 400;
	font-style: normal;
}


.printing-press-sort--space {
	min-width: 1.5rem;
}


.printing-press-sort--space::after {
	content: "";

	width: .75rem;

	border-top:
		var(--bs-border-width)
		solid
		var(--bs-secondary-color);
}


/*
 * ================================================================
 * Completed lines
 * ================================================================
 */

.printing-press-completed-lines {
	display: grid;

	gap: .5rem;
}


.printing-press-completed-line {
	display: flex;
	align-items: baseline;

	gap: .75rem;

	padding: .5rem .75rem;

	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-sm);

	background-color: var(--bs-tertiary-bg);
}


.printing-press-completed-line__number {
	flex: 0 0 auto;

	font-size: .875rem;
	font-weight: 600;

	color: var(--bs-secondary-color);
}


.printing-press-completed-line__text {
	font-weight: 600;
}


/*
 * ================================================================
 * Press workflow controls
 * ================================================================
 */

.printing-press-steps {
	display: grid;
	gap: .75rem;
	cursor: pointer;
}


.printing-press-step {
	width: 100%;

	padding: 1rem;

	border:
		var(--bs-border-width)
		solid
		var(--bs-border-color);

	background-color: var(--bs-body-bg);

	color: var(--bs-body-color);

	display: flex;
	align-items: flex-start;

	gap: .875rem;

	text-align: left;
}


.printing-press-step:disabled {
	opacity: 1;

	background-color: var(--bs-tertiary-bg);

	color: var(--bs-secondary-color);
}


.printing-press-step.is-current {
	border-color: var(--bs-primary);

	box-shadow:
		0 0 0 .2rem
		rgba(
			var(--bs-primary-rgb),
			.15
		);
}


.printing-press-step.is-complete {
	background-color: var(--bs-tertiary-bg);
}


.printing-press-step__number {
	flex: 0 0 auto;

	width: 2rem;
	height: 2rem;

	border-radius: 50%;

	background-color: var(--bs-secondary-bg);

	display: inline-flex;
	align-items: center;
	justify-content: center;

	font-weight: 700;
}


.printing-press-step.is-current
	.printing-press-step__number {

	background-color: var(--bs-primary);
	color: var(--bs-white);
}


.printing-press-step.is-complete
	.printing-press-step__number {

	background-color: var(--bs-success);
	color: var(--bs-white);
}


.printing-press-step__content {
	display: block;
}


.printing-press-step__title {
	display: block;

	margin-bottom: .15rem;

	font-weight: 600;
}


.printing-press-step__description {
	display: block;

	font-size: .875rem;

	color: var(--bs-secondary-color);
}


/*
 * ================================================================
 * Press visualization
 * ================================================================
 */

.printing-press-press-display {
	position: relative;

	min-height: 28rem;

	padding: 2rem;

	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);

	background-color: var(--bs-dark);

	display: flex;
	align-items: center;
	justify-content: center;

	overflow: hidden;
}


.printing-press-press-form {
	position: relative;
	z-index: 1;

	width: min(
		100%,
		var(--printing-press-line-measure)
	);

	min-height: 24rem;

	padding: 1.5rem;

	border: .2rem solid var(--bs-gray-700);
	border-radius: var(--bs-border-radius-sm);

	background-color: var(--bs-gray-900);

	color: var(--bs-gray-600);

	display: flex;
	align-items: center;
	justify-content: center;

	transform: scaleX(-1);

	transition:
		color .25s ease,
		border-color .25s ease;
}

.printing-press-press-text {
	white-space: pre-line;

	font-family: "Special Elite", system-ui;
	font-weight: 400;
	font-style: normal;
	font-size: 1.25rem;
	line-height: 1.5;
	text-align: center;
	margin-top:75px;
}


.printing-press-press-form.is-inked {
	border-color: var(--bs-warning);

	color: var(--bs-warning);
}

.printing-press-press-form.is-inked .printing-press-masthead--press {
	filter: invert(1) sepia(1);
}


/*
 * Abstract ink roller.
 */

.printing-press-ink-roller {
	position: absolute;
	z-index: 3;

	top: 50%;
	left: 0;

	width: 45%;
	height: 12rem;

	border-radius: var(--bs-border-radius);

	background-color: var(--bs-warning);

	opacity: 0;

	transform:
		translate(-120%, -50%);
}


.printing-press-ink-roller.is-rolling {
	animation:
		printing-press-ink-roll
		1s
		ease-in-out
		both;
}


@keyframes printing-press-ink-roll {

	0% {
		opacity: 0;
		transform:
			translate(-120%, -50%);
	}

	15% {
		opacity: .9;
	}

	85% {
		opacity: .9;
	}

	100% {
		opacity: 0;
		transform:
			translate(260%, -50%);
	}

}


/*
 * Paper begins above the visible press bed.
 */

.printing-press-paper {
	position: absolute;
	z-index: 2;

	width: min(
		calc(100% - 3rem)
	);

	min-height: 94%;

	border: var(--bs-border-width) solid var(--bs-gray-400);
	border-radius: var(--bs-border-radius-sm);

	background-color: rgba(255, 255, 255, .95);

	box-shadow: var(--bs-box-shadow);

	opacity: 0;

	transform: translateY(-175%);

	pointer-events: none;
}


.printing-press-paper.is-placed {
	opacity: .95;

	transform: translateY(0);
}


.printing-press-press-display.is-pressing
	.printing-press-paper {

	transform:
		translateY(.35rem)
		scale(.99);
}


/*
 * ================================================================
 * Printed result
 * ================================================================
 */

.printing-press-sheet {
	width: min(
		100%,
		30rem
	);

	min-height: 22rem;

	margin-inline: auto;

	padding: 2rem;

	border: var(--bs-border-width) solid var(--bs-gray-400);

	background-color: rgba(255, 255, 255, .98);

	box-shadow: var(--bs-box-shadow-sm);

	color: var(--bs-dark);
}


.printing-press-sheet-text {
	white-space: pre-line;

	font-size: clamp(
		1.5rem,
		4vw,
		2.25rem
	);

	font-family: "Special Elite", system-ui;
	font-weight: 400;
	font-style: normal;
	text-align: center;

	overflow-wrap: break-word;
}


.printing-press-sheet-time {
	padding-top: 1rem;

	border-top: var(--bs-border-width) solid var(--bs-border-color);

	font-size: .875rem;

	text-align: center;

	color: var(--bs-secondary-color);
	font-family: "Special Elite", system-ui;
	font-weight: 400;
	font-style: normal;


}

.printing-press-masthead {
	display: block;
	width: 100%;
	height: auto;
}


/*
 * The type on the press is mirrored, so the masthead must also
 * appear reversed before printing.
 */

.printing-press-masthead--press {
	position: absolute;
	top:0;
	width:100%;
	display: block;
	filter: invert();
}


/*
 * The whole press form already uses scaleX(-1), so do NOT apply
 * another transform to this image unless you later stop mirroring
 * the parent form.
 */


/*
 * Final printed result remains in normal reading orientation.
 */

.printing-press-masthead--result {
	margin-bottom: 1.5rem;
}


/*
 * Footer for generated date and TX4T attribution.
 */

.printing-press-sheet-footer {
	padding-top: 1rem;

	border-top: var(--bs-border-width) solid var(--bs-border-color);

	font-size: .8rem;
	text-align: center;

	color: var(--bs-secondary-color);
}



/*
 * ================================================================
 * Responsive behavior
 * ================================================================
 */

@media (max-width: 767.98px) {

	.printing-press-type-case {
		grid-template-columns:
			repeat(
				4,
				minmax(3rem, 1fr)
			);
	}

}


/*
 * ================================================================
 * Motion
 * ================================================================
 */

@media (prefers-reduced-motion: no-preference) {

	.printing-press-paper {
		transition:
			opacity .45s ease,
			transform .45s ease;
	}

}


@media (prefers-reduced-motion: reduce) {

	.printing-press-ink-roller.is-rolling {
		animation: none;
	}

	.printing-press-paper {
		transition: none;
	}

}