/* Dating photo analyzer: the photos in their suggested order and the checks of the one chosen on one side, the
   verdict on the set, its checks and the download on the other.
   The layout of the two sides is the shared one of the photo tools (.pst-photo in assets/css/tools.css), the
   photo with its frame, the verdict and the list of checks the shared .pst-shot, .pst-verdict and .pst-review.
   ========================================================================== */

.pst-da__result {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.pst-da__head {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

/* The photos: three to a row, upright like in the apps. */
.pst .pst-da__tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pst-da__tile {
	position: relative;
	min-width: 0;
}

.pst-da__pick,
.pst-da__add {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 12px;
	background: var(--pst-tint);
	color: var(--pst-ink);
	font: inherit;
	cursor: pointer;
}

.pst-da__pick[aria-pressed="true"] {
	border-color: var(--pst-ink);
	box-shadow: 0 0 0 2px var(--pst-white) inset;
}

.pst-da__thumb {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pst-da__num {
	position: absolute;
	top: 6px;
	left: 6px;
	display: grid;
	place-items: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--pst-ink);
	color: var(--pst-white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
}

.pst-da__dot {
	position: absolute;
	bottom: 6px;
	left: 6px;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--pst-white);
	color: var(--pst-soft);
}

.pst-da__dot .pst-icon {
	stroke-width: 2.6;
}

.pst-da__dot .pst-spin {
	width: 14px;
	height: 14px;
}

.pst-da__tile[data-status="great"] .pst-da__dot,
.pst-da__tile[data-status="good"] .pst-da__dot {
	background: #E3F1E6;
	color: #1D6B33;
}

.pst-da__tile[data-status="warn"] .pst-da__dot {
	background: #FCEBD2;
	color: #8A4B05;
}

.pst-da__tile[data-status="bad"] .pst-da__dot {
	background: #FBE1DC;
	color: #A32613;
}

.pst-da__remove {
	position: absolute;
	top: 6px;
	right: 6px;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 27, 51, 0.62);
	color: var(--pst-white);
	cursor: pointer;
}

.pst-da__remove:hover {
	background: var(--pst-ink);
}

.pst-da__add {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 2px dashed var(--pst-line-strong);
	background: transparent;
	font-size: 15px;
	font-weight: 600;
}

.pst-da__add:hover {
	border-color: var(--pst-ink);
}

/* The photo chosen: its frame and its checks. */
.pst-da__detail {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 16px;
	border-top: 1px solid var(--pst-line);
}

.pst .pst-da__detail-title {
	font-family: var(--pst-display);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.pst-da .pst-shot__photo {
	max-height: min(440px, 60vh);
}

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

	.pst-da__num,
	.pst-da__dot {
		min-width: 22px;
		width: auto;
		height: 22px;
		font-size: 13px;
	}

	.pst-da__dot {
		width: 22px;
	}
}