/**
 * TikTok Video Downloader.
 *
 * Loads after pfp.css and reuses its tokens, form and button styling. Only the
 * bits that differ from the profile picture tool live here: a portrait
 * thumbnail rather than a square avatar, and a stack of download buttons.
 */

/* The link input is long, so the field wraps to its own row sooner. */
.tkf-vid .tkf-input {
	flex: 1 1 18rem;
	font-size: .98rem;
}

.tkf-vid-result {
	/* Thumbnail beside the details, unlike the avatar tool where the picture
	   is the product and leads on its own. */
	flex-direction: row;
	align-items: flex-start;
	text-align: left;
	gap: clamp(1.1rem, 3vw, 1.85rem);
}

.tkf-vid-cover {
	position: relative;
	flex: 0 0 auto;
	width: min(15rem, 38%);
	margin: 0;
	border-radius: var(--tkf-radius, 16px);
	overflow: hidden;
	background: var(--wash, #F3E7FA);
	aspect-ratio: 9 / 16;
}

.tkf-vid-cover[hidden] {
	display: none;
}

.tkf-vid-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tkf-vid-duration {
	position: absolute;
	right: .5rem;
	bottom: .5rem;
	padding: .15rem .45rem;
	border-radius: 999px;
	background: #1E1233CC;
	color: #fff;
	font-size: .74rem;
	font-weight: 650;
	letter-spacing: .02em;
}

.tkf-vid-duration[hidden] {
	display: none;
}

.tkf-vid .tkf-meta {
	text-align: left;
}

.tkf-vid .tkf-handle {
	justify-content: flex-start;
	margin-top: 0;
	font-size: clamp(1.15rem, 2.6vw, 1.4rem);
}

.tkf-vid-title {
	margin: .45rem 0 0;
	color: var(--tkf-ink-2, #4C3D66);
	font-size: .97rem;
	line-height: 1.55;
	/* Captions can be very long; keep the card compact. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tkf-vid-title[hidden] {
	display: none;
}

.tkf-vid-downloads {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.15rem;
}

.tkf-vid-dl {
	flex-direction: column;
	gap: .1rem;
	padding-block: .7rem;
	line-height: 1.2;
}

.tkf-vid-size {
	font-size: .74rem;
	font-weight: 500;
	opacity: .78;
}

.tkf-vid-degraded {
	margin: 1rem 0 0;
	padding: .7rem .9rem;
	border-radius: var(--r-sm, 10px);
	background: var(--wash, #F3E7FA);
	color: var(--tkf-ink-2, #4C3D66);
	font-size: .88rem;
}

.tkf-vid-degraded[hidden] {
	display: none;
}

.tkf-vid .tkf-note {
	margin-inline: 0;
	text-align: left;
}

@media (max-width: 640px) {
	.tkf-vid-result {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.tkf-vid-cover {
		width: min(13rem, 62vw);
	}

	.tkf-vid .tkf-meta,
	.tkf-vid .tkf-note {
		text-align: center;
	}

	.tkf-vid .tkf-handle,
	.tkf-vid-downloads {
		justify-content: center;
	}

	.tkf-vid-dl {
		flex: 1 1 12rem;
	}
}