/* Metadata remover: what a photo file says besides the picture on one side,
   the clean copy and its 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).
   ========================================================================== */

/* What was found: a list of names and values. */
.pst-meta__report {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

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

.pst .pst-meta__list {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--pst-line);
	border-radius: 16px;
	overflow: hidden;
}

.pst-meta__item {
	display: grid;
	grid-template-columns: minmax(0, 10.5em) minmax(0, 1fr);
	gap: 2px 16px;
	padding: 12px 16px;
}

.pst-meta__item + .pst-meta__item {
	border-top: 1px solid var(--pst-line);
}

.pst .pst-meta__item dt {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--pst-muted);
	font-size: 15px;
	line-height: 1.6;
}

.pst-meta__item dt .pst-icon {
	margin-top: 3px;
}

.pst .pst-meta__item dd {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

/* A long value (a description, the prompt of a generated picture) shows its first lines. */
.pst-meta__value {
	display: -webkit-box;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	line-clamp: 4;
}

.pst-meta__note {
	color: var(--pst-muted);
	font-size: 14px;
	font-weight: 400;
}

/* The location: the one line a person should not miss. */
.pst-meta__item--alert {
	background: #FBEAE5;
}

.pst .pst-meta__item--alert dt,
.pst-meta__item--alert .pst-meta__note {
	color: #8A2A17;
}

.pst-meta__small {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 72px;
	border: 1px solid var(--pst-line);
	border-radius: 6px;
	align-self: flex-start;
}

.pst .pst-meta__none {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 16px;
	border: 1px solid var(--pst-line);
	border-radius: 16px;
	font-weight: 600;
}

.pst-meta__none .pst-icon {
	margin-top: 3px;
}

/* The parts of the file the list was read from, for those who know their names. */
.pst-meta__tech {
	border-top: 0;
}

.pst .pst-meta__blocks {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0 0 6px;
	color: var(--pst-soft);
	font-size: 14px;
	font-variant-numeric: tabular-nums;
	list-style: none;
}

.pst .pst-meta__blocks li {
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
	padding: 0;
	overflow-wrap: anywhere;
}

.pst .pst-meta__blocks li::before {
	content: none;
}

.pst-meta__blocks strong {
	color: var(--pst-ink);
	font-weight: 600;
}

/* The file, by its picture and its name. */
.pst-meta__file {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.pst-meta__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border: 1px solid var(--pst-line);
	border-radius: 12px;
	background: var(--pst-white);
	object-fit: cover;
}

.pst-meta__names {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.pst .pst-meta__name {
	overflow: hidden;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* How much was found, in a line a person takes in at a glance. */
.pst-meta__verdict {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pst .pst-meta__count {
	font-family: var(--pst-display);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
}

.pst .pst-meta__warn {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #8A2A17;
	font-size: 15px;
	font-weight: 600;
}

.pst-meta__warn .pst-icon {
	margin-top: 2px;
}

.pst .pst-meta__kept {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	font-size: 15px;
	list-style: none;
}

.pst .pst-meta__kept li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 0;
}

.pst .pst-meta__kept li::before {
	content: none;
}

.pst-meta__kept .pst-icon {
	margin-top: 2px;
}

.pst .pst-meta__checked {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var(--pst-soft);
	font-size: 14px;
}

.pst-meta__checked .pst-icon {
	margin-top: 1px;
}

/* These are laid out as rows, which would show them even when they are switched off. */
.pst .pst-meta__list[hidden],
.pst .pst-meta__none[hidden],
.pst .pst-meta__warn[hidden],
.pst .pst-meta__checked[hidden] {
	display: none;
}

/* With a photo in, the panel is as tall as what it says: the list beside it may be much longer. */
.pst-meta.is-loaded .pst-photo__panel {
	align-self: start;
}

/* Narrow places: once a photo is in, the verdict and the download come first, the list after them. */
@container pst (max-width: 840px) {
	.pst-meta.is-loaded .pst-photo__panel {
		order: -1;
	}
}

@container pst (max-width: 450px) {
	.pst-meta__item {
		grid-template-columns: minmax(0, 1fr);
		padding: 10px 14px;
	}

	.pst .pst-meta__item dt {
		font-size: 14px;
	}

	.pst .pst-meta__count {
		font-size: 22px;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.pst-meta.is-loaded .pst-photo__panel {
			order: -1;
		}
	}
}