/* Circle crop: the circle over the photo, the preview of the round file, and the field for another size.
   The layout around them (.pst-photo) is shared and lives in assets/css/tools.css.
   ========================================================================== */

/* The circle: everything outside it is dimmed. Its share of the stage is INSET in tool.js. */
.pst-cc__circle {
	position: relative;
	width: 84%;
	aspect-ratio: 1;
	border-radius: 50%;
	box-shadow: 0 0 0 100vmax rgba(15, 27, 51, 0.64);
}

.pst-cc__circle::after,
.pst-cc__ring {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.pst-cc__circle::after {
	border: 2px solid rgba(255, 255, 255, 0.92);
}

.pst-cc__preview {
	display: flex;
	align-items: center;
	gap: 18px;
}

/* The square of the file itself: the chequered pattern shows through where it is transparent. */
.pst-cc__tile {
	display: grid;
	flex: none;
	place-items: center;
	width: 128px;
	height: 128px;
	border: 1px solid var(--pst-line);
	border-radius: 14px;
	background-color: var(--pst-white);
	background-image:
		linear-gradient(45deg, #E9E3D8 25%, transparent 25%, transparent 75%, #E9E3D8 75%),
		linear-gradient(45deg, #E9E3D8 25%, transparent 25%, transparent 75%, #E9E3D8 75%);
	background-position: 0 0, 8px 8px;
	background-size: 16px 16px;
}

.pst-cc__tile canvas {
	display: block;
	width: 104px;
	height: 104px;
}

.pst-cc__blank {
	width: 104px;
	height: 104px;
	border: 2px dashed var(--pst-line-strong);
	border-radius: 50%;
	background: var(--pst-white);
}

/* The same picture small, the way a profile shows it. */
.pst-cc__uses {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}

.pst-cc__use {
	display: flex;
	align-items: center;
	gap: 10px;
}

.pst-cc__use canvas {
	display: block;
	flex: none;
	border-radius: 50%;
	background: var(--pst-line);
}

.pst-cc__lines {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pst-cc__lines i {
	display: block;
	width: 84px;
	height: 7px;
	border-radius: 4px;
	background: var(--pst-line);
}

.pst-cc__lines i + i {
	width: 52px;
}

.pst-cc__custom {
	min-width: 0;
}

.pst-cc__custom .pst-box--unit .pst-input {
	padding: 0 34px 0 12px;
}

.pst-cc__custom .pst-unit {
	right: 12px;
}

.pst-cc__custom .pst-input {
	height: 44px;
	border-radius: 10px;
	font-size: 15px;
}

.pst-cc__custom .pst-input::placeholder {
	color: var(--pst-muted);
	font-weight: 500;
	opacity: 1;
}

.pst-cc__custom.is-on .pst-input {
	border-color: var(--pst-ink);
	box-shadow: inset 0 0 0 1px var(--pst-ink);
}

@container pst (max-width: 450px) {
	.pst-cc__preview {
		gap: 14px;
	}

	.pst-cc__tile {
		width: 112px;
		height: 112px;
	}

	.pst-cc__tile canvas,
	.pst-cc__blank {
		width: 92px;
		height: 92px;
	}

	/* No room for the unit next to the word in the field. */
	.pst-cc__custom .pst-unit {
		display: none;
	}

	.pst-cc__custom .pst-box--unit .pst-input {
		padding: 0 8px;
		font-size: 14px;
		text-align: center;
	}
}