/* Profile picture resizer: the photo under a square with the platform's circle in it on one side,
   the picture as the platform shows it, its requirements and the download on the other.
   The layout of the two sides, the zoom row and the size buttons are the shared ones of the plugin
   (.pst-photo in assets/css/tools.css); what is here belongs to this tool alone.
   ========================================================================== */

/* The square is the file; the circle in it is what the platform shows. */
.pst-pp__square {
	position: relative;
	width: 84%;
	aspect-ratio: 1;
	overflow: hidden;
	box-shadow: 0 0 0 100vmax rgba(15, 27, 51, 0.68);
	outline: 1px dashed rgba(255, 255, 255, 0.75);
	outline-offset: -1px;
}

/* The corners stay in the file but the platform hides them: dimmed a little. */
.pst-pp__circle {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 100vmax rgba(15, 27, 51, 0.36);
}

.pst-pp__circle::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 2px solid rgba(255, 255, 255, 0.92);
	border-radius: 50%;
}

/* A platform that shows some accounts in a square: only the tips of the corners are rounded off. */
.pst-pp[data-pp-shape="square"] .pst-pp__circle,
.pst-pp[data-pp-shape="square"] .pst-pp__circle::after {
	border-radius: 12%;
}

.pst-pp[data-pp-shape="square"] .pst-pp__avatar {
	border-radius: 14%;
}

/* The shape buttons carry a small picture of the shape. */
.pst-pp__glyph {
	flex: none;
	width: 16px;
	height: 16px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.pst-pp__glyph--square {
	border-radius: 4px;
}

/* Where a frame of the platform lies over the photo (a guide: it is never part of the file). */
.pst-pp__frame {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.pst-pp__frame circle {
	fill: none;
	stroke-width: 15;
}

.pst-pp__frame stop {
	stop-color: var(--pp-frame, #4E8B3A);
}

.pst-pp__frame text {
	fill: #FFFFFF;
	font-family: var(--font-body, system-ui, sans-serif);
	font-size: 7.2px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.pst-pp [data-pp-frame-kind="hiring"] {
	--pp-frame: #7A3E9D;
}

/* "None" is a word of two letters in some languages: the button keeps the width of a finger. */
.pst-pp [data-pp="frames"] .pst-chip {
	min-width: 44px;
	justify-content: center;
}

/* The picture as a profile, a post and a message show it. */
.pst-pp__shown {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 12px;
}

.pst-pp__card,
.pst-pp__rows {
	border: 1px solid var(--pst-line);
	border-radius: 14px;
	background: var(--pst-white);
}

.pst-pp__card {
	position: relative;
	overflow: hidden;
	padding: 0 14px 14px;
}

.pst-pp__banner {
	height: 52px;
	margin: 0 -14px;
	background: linear-gradient(135deg, #C9D3E3, #E6DFD3);
}

.pst-pp__avatar {
	position: relative;
	display: block;
	flex: none;
	overflow: hidden;
	border-radius: 50%;
	background: var(--pst-line);
}

.pst-pp__avatar canvas {
	display: block;
	width: 100%;
	height: 100%;
}

.pst-pp__avatar--l {
	width: 92px;
	height: 92px;
	margin-top: -46px;
	border: 4px solid var(--pst-white);
	box-sizing: content-box;
}

.pst-pp__avatar--m {
	width: 48px;
	height: 48px;
}

.pst-pp__avatar--s {
	width: 32px;
	height: 32px;
}

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

.pst-pp__lines i {
	display: block;
	width: 96px;
	max-width: 100%;
	height: 8px;
	border-radius: 4px;
	background: var(--pst-line);
}

.pst-pp__lines i:first-child {
	width: 72px;
	background: var(--pst-line-strong);
}

.pst-pp__card .pst-pp__lines {
	margin-top: 10px;
}

.pst-pp__card .pst-pp__lines i:first-child {
	width: 110px;
	height: 10px;
}

.pst-pp__rows {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 14px;
	padding: 14px;
}

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

/* What the platform asks for, each line with its answer. */
.pst .pst-pp__checks {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0;
	list-style: none;
}

.pst .pst-pp__check {
	display: grid;
	grid-template-columns: 22px minmax(0, 1fr) auto;
	align-items: start;
	gap: 8px;
	padding: 0;
	font-size: 15px;
}

.pst-pp__check::before {
	content: none;
}

.pst-pp__mark {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #DFEEE3;
	color: #1F6B3B;
}

.pst-pp__check[data-state="warn"] .pst-pp__mark {
	background: #FBEAE5;
	color: #8A2A17;
}

.pst-pp__check[data-state="wait"] .pst-pp__mark {
	background: var(--pst-tint);
	color: var(--pst-muted);
}

.pst-pp__mark span {
	display: none;
}

.pst-pp__check[data-state="ok"] .pst-pp__ok,
.pst-pp__check[data-state="warn"] .pst-pp__warn {
	display: block;
}

/* Not known yet: a dot. */
.pst-pp__check[data-state="wait"] .pst-pp__mark::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.pst .pst-pp__alert {
	color: #8A2A17;
}

.pst-pp__answer {
	color: var(--pst-muted);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.pst-pp__check[data-state="warn"] .pst-pp__answer {
	color: #8A2A17;
	font-weight: 600;
}

.pst .pst-pp__hint {
	min-height: 1.55em;
}

/* The area for a new photo keeps its own height: the panel next to it is taller than a first screen. */
.pst-pp .pst-drop {
	flex: none;
}

@container pst (max-width: 450px) {
	/* The three frame buttons stay in one row on a phone, also where "none" is a longer word. */
	.pst-pp [data-pp="frames"] .pst-chips {
		gap: 4px;
	}

	.pst-pp [data-pp="frames"] .pst-chip {
		padding: 0 7px;
	}

	/* The answer goes under its line: no room for both side by side in every language. */
	.pst .pst-pp__check {
		grid-template-columns: 22px minmax(0, 1fr);
	}

	.pst-pp__answer {
		grid-column: 2;
		text-align: left;
	}

	.pst-pp__shown {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: 8px;
	}

	.pst-pp__card {
		padding: 0 10px 12px;
	}

	.pst-pp__banner {
		margin: 0 -10px;
	}

	.pst-pp__avatar--l {
		width: 76px;
		height: 76px;
		margin-top: -38px;
	}

	.pst-pp__rows {
		padding: 10px;
	}

	.pst-pp__lines i {
		width: 64px;
	}

	.pst-pp__lines i:first-child {
		width: 48px;
	}

	.pst-pp__card .pst-pp__lines i:first-child {
		width: 80px;
	}
}
/* PicSuit Tools 1.17.0, profile picture resizer, platform "Email signature": the preview is a signature. */
.pst-pp[data-pp-platform="email"] .pst-pp__card {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 16px;
}

.pst-pp[data-pp-platform="email"] .pst-pp__banner {
	display: none;
}

.pst-pp[data-pp-platform="email"] .pst-pp__avatar--l {
	width: 76px;
	height: 76px;
	margin: 0;
	border: 0;
}

.pst-pp[data-pp-platform="email"] .pst-pp__card .pst-pp__lines {
	flex: 1;
	margin: 0;
	padding-left: 14px;
	border-left: 2px solid var(--pst-line-strong);
}

/* PicSuit Tools 1.19.0, profile picture resizer, platform "Instagram": a profile header, the stories tray and a comment. */
.pst-pp .pst-pp__ring .pst-pp__ring-paint {
	stroke-width: 4.5;
}

.pst-pp .pst-pp__ring .pst-pp__ring-gap {
	stroke: #FFFFFF;
	stroke-width: 3;
}

.pst-pp .pst-pp__ring stop:nth-child(1) {
	stop-color: #FEDA75;
}

.pst-pp .pst-pp__ring stop:nth-child(2) {
	stop-color: #FA7E1E;
}

.pst-pp .pst-pp__ring stop:nth-child(3) {
	stop-color: #D62976;
}

.pst-pp .pst-pp__ring stop:nth-child(4) {
	stop-color: #962FBF;
}

.pst-pp__card--ig {
	padding: 16px 14px 14px;
}

.pst-pp__ig-head {
	display: flex;
	align-items: center;
	gap: 14px;
}

.pst-pp[data-pp-preview="instagram"] .pst-pp__avatar--l {
	width: 84px;
	height: 84px;
	margin: 0;
	border: 0;
}

/* Posts, followers, following: a number over a word, drawn as bars so they need no language. */
.pst-pp__ig-counts {
	display: flex;
	flex: 1;
	gap: 6px;
	justify-content: space-evenly;
	min-width: 0;
}

.pst-pp__ig-counts span {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}

.pst-pp__ig-counts b,
.pst-pp__ig-counts i {
	display: block;
	height: 8px;
	border-radius: 4px;
	background: var(--pst-line);
}

.pst-pp__ig-counts b {
	width: 16px;
	height: 10px;
	background: var(--pst-line-strong);
}

.pst-pp__ig-counts i {
	width: 26px;
}

.pst-pp__row--stories {
	gap: 12px;
}

.pst-pp[data-pp-preview="instagram"] .pst-pp__avatar--m {
	width: 56px;
	height: 56px;
}

/* An account whose story is live, for comparison: always with the ring. */
.pst-pp__other {
	flex: none;
	width: 56px;
	height: 56px;
	box-sizing: border-box;
	border: 3px solid transparent;
	border-radius: 50%;
	background:
		radial-gradient(circle, var(--pst-line) 0 58%, #FFFFFF 59% 100%) padding-box,
		linear-gradient(45deg, #FEDA75, #FA7E1E 30%, #D62976 60%, #962FBF) border-box;
}

@container pst (max-width: 450px) {
	.pst-pp[data-pp-preview="instagram"] .pst-pp__avatar--l {
		width: 64px;
		height: 64px;
	}

	.pst-pp__ig-head {
		gap: 8px;
	}

	.pst-pp__ig-counts i {
		width: 16px;
	}

	.pst-pp__ig-counts b {
		width: 12px;
	}

	.pst-pp[data-pp-preview="instagram"] .pst-pp__avatar--m,
	.pst-pp__other {
		width: 48px;
		height: 48px;
	}
}

/* PicSuit Tools 1.20.0, profile picture resizer, platform "Facebook": a tall cover photo with the picture over its edge, a post and a comment. */
.pst-pp[data-pp-preview="facebook"] .pst-pp__banner {
	height: 84px;
	background: linear-gradient(160deg, #BCCBE2, #E7DFD1 70%);
}

.pst-pp[data-pp-preview="facebook"] .pst-pp__avatar--l {
	width: 100px;
	height: 100px;
	margin-top: -50px;
}

.pst-pp[data-pp-preview="facebook"] .pst-pp__avatar--m {
	width: 40px;
	height: 40px;
}

@container pst (max-width: 450px) {
	.pst-pp[data-pp-preview="facebook"] .pst-pp__banner {
		height: 64px;
	}

	.pst-pp[data-pp-preview="facebook"] .pst-pp__avatar--l {
		width: 80px;
		height: 80px;
		margin-top: -40px;
	}
}

/* PicSuit Tools 1.21.0, profile picture resizer: TikTok and WhatsApp (the picture in the middle of a profile),
   YouTube (a channel header) and Discord (a profile card with the online dot). */
.pst-pp__card--center {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 18px 14px 14px;
	text-align: center;
}

.pst-pp[data-pp-preview="centered"] .pst-pp__avatar--l {
	width: 88px;
	height: 88px;
	margin: 0;
	border: 0;
}

.pst-pp__card--center .pst-pp__lines {
	align-items: center;
}

.pst-pp__card--center .pst-pp__ig-counts {
	align-self: stretch;
	margin-top: 12px;
}

.pst-pp__card--yt {
	padding-bottom: 14px;
}

.pst-pp[data-pp-preview="youtube"] .pst-pp__banner {
	height: 40px;
	margin-bottom: 12px;
	border-radius: 0 0 8px 8px;
	background: linear-gradient(120deg, #C9D3E3, #D9CBB8);
}

.pst-pp__yt-head {
	display: flex;
	align-items: center;
	gap: 12px;
}

.pst-pp[data-pp-preview="youtube"] .pst-pp__avatar--l {
	width: 72px;
	height: 72px;
	margin: 0;
	border: 0;
}

.pst-pp[data-pp-preview="youtube"] .pst-pp__card .pst-pp__lines {
	margin: 0;
}

/* The subscribe button, drawn as a dark pill. */
.pst-pp__pill {
	display: block;
	width: 76px;
	height: 22px;
	margin-top: 12px;
	border-radius: 11px;
	background: var(--pst-ink);
}

.pst-pp__presence {
	position: relative;
	display: inline-block;
	margin-top: -46px;
}

.pst-pp__presence .pst-pp__avatar--l {
	margin-top: 0;
}

/* The online dot, cut out of the card with a ring of its colour. */
.pst-pp__presence i {
	position: absolute;
	right: 4px;
	bottom: 4px;
	width: 22px;
	height: 22px;
	box-sizing: border-box;
	border: 4px solid var(--pst-white);
	border-radius: 50%;
	background: #23A55A;
}

@container pst (max-width: 450px) {
	.pst-pp[data-pp-preview="centered"] .pst-pp__avatar--l {
		width: 72px;
		height: 72px;
	}

	.pst-pp[data-pp-preview="youtube"] .pst-pp__avatar--l {
		width: 56px;
		height: 56px;
	}

	.pst-pp__yt-head {
		gap: 8px;
	}

	.pst-pp__presence {
		margin-top: -38px;
	}

	.pst-pp__presence i {
		right: 2px;
		bottom: 2px;
		width: 18px;
		height: 18px;
		border-width: 3px;
	}
}