/**
 * TikTok Profile Picture Viewer/Downloader.
 *
 * Reads the theme's design tokens where they exist and falls back to literals
 * where they do not, so the tool still looks deliberate under another theme.
 * Light only, matching the site: no dark-mode blocks.
 *
 * Note on buttons: this file never writes a bare `.tkf a { color }` rule.
 * A broad descendant colour rule outranks .btn-primary and turns every button
 * into coloured text on a coloured background.
 */

.tkf {
	--tkf-ink: var(--ink, #1E1233);
	--tkf-ink-2: var(--ink-2, #4C3D66);
	--tkf-muted: var(--muted, #7C6B94);
	--tkf-surface: var(--surface, #FFFFFF);
	--tkf-hairline: var(--hairline, #E7D8F2);
	--tkf-hairline-2: var(--hairline-2, #D8C2E8);
	--tkf-violet: var(--violet, #9B23D4);
	--tkf-danger: var(--danger, #C02B3C);
	--tkf-radius: var(--r, 16px);
	--tkf-grad: var(--grad, linear-gradient(120deg, #E056FD 0%, #E530B5 100%));

	max-width: 54rem;
	margin-inline: auto;
	color: var(--tkf-ink);
	font-family: var(--sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}

/**
 * The theme renders page content inside `.entry.measure`, a ~68ch reading
 * column that is far too narrow for the result layout. Break out of it while
 * staying centred on the same axis. Scoped to `.entry` so the tool keeps its
 * ordinary width anywhere else it is placed.
 */
/**
 * Page-level layout, applied only where the shortcode renders.
 *
 * The theme's `.measure` reading column has no auto margins, so it sits hard
 * left inside `.shell` and leaves the page looking lopsided. Centring the
 * column centres the tool with it, and the tool's own breakout then stays
 * centred for free.
 */
.tkf-tool-page .entry.measure {
	margin-inline: auto;
}

.tkf-tool-page .page-head {
	text-align: center;
	/* Was clamp(1.25rem, 3vw, 2rem). The lede reads as part of the title
	   block, so it should sit close under it. */
	padding-bottom: .35rem;
}

/* The breadcrumb's flex container is the inner <ol>, so centring the <nav>
   does nothing. */
.tkf-tool-page .page-head .crumbs ol {
	justify-content: center;
}

/* The opening line: a semi-bold standfirst, not body copy. */
.tkf-lede {
	margin-top: .85rem;
	font-size: clamp(1.02rem, 1.6vw, 1.15rem);
	font-weight: 600;
	line-height: 1.5;
	text-align: center;
	color: var(--ink, #1E1233);
	text-wrap: balance;
}

.entry .tkf {
	width: min(54rem, calc(100vw - 2 * var(--pad, 2.25rem)));
	max-width: none;
	margin-inline: auto;
}

/* ---------------- page copy ---------------- */

/*
 * Rules below are prefixed with `.tkf-tool-page .entry` on purpose. The theme's
 * own `.entry > * + *` rhythm has the same specificity as a bare class, so a
 * plain `.tkf-panel { margin }` would win or lose on stylesheet order alone.
 */
.tkf-tool-page .entry p,
.tkf-tool-page .entry li {
	font-size: 1.04rem;
	line-height: 1.72;
}

/* Numbered steps, rather than the browser's default list numerals. */
.tkf-tool-page .entry ol.tkf-steps {
	list-style: none;
	counter-reset: tkf-step;
	padding-left: 0;
	display: grid;
	gap: .8rem;
	margin-top: 1.4rem;
}

.tkf-tool-page .entry ol.tkf-steps > li {
	counter-increment: tkf-step;
	position: relative;
	margin-top: 0;
	padding: .1rem 0 .1rem 3.1rem;
	min-height: 2.2rem;
	display: flex;
	align-items: center;
}

.tkf-tool-page .entry ol.tkf-steps > li::before {
	content: counter(tkf-step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 50%;
	background: var(--grad, linear-gradient(120deg, #E056FD 0%, #E530B5 100%));
	color: #fff;
	font-weight: 700;
	font-size: .95rem;
	display: grid;
	place-items: center;
}

/* Dot markers for prose lists. `.tkf-stats` lives inside the tool, not the
   copy, so it must keep its own layout. */
.tkf-tool-page .entry ul:not(.tkf-stats) {
	list-style: none;
	padding-left: 0;
}

.tkf-tool-page .entry ul:not(.tkf-stats) > li {
	position: relative;
	padding-left: 1.6rem;
}

.tkf-tool-page .entry ul:not(.tkf-stats) > li::before {
	content: "";
	position: absolute;
	left: .3rem;
	top: .68em;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--violet, #9B23D4);
}

/* ---------------- tinted section ---------------- */

.tkf-tool-page .entry .tkf-panel {
	margin-block: 2.6rem;
	/* Tighter horizontal padding than a plain card: the space is worth more
	   to the illustration than to the panel's margins. */
	padding: clamp(1.4rem, 3vw, 2rem) clamp(1.2rem, 2.5vw, 1.75rem);
	border-radius: var(--r, 16px);
	border: 1px solid var(--hairline, #E7D8F2);
	background: linear-gradient(145deg, var(--paper-2, #FBF7FD) 0%, var(--wash, #F3E7FA) 100%);
}

/* First heading in the panel should not push off the panel's own padding. */
.tkf-tool-page .entry .tkf-panel > :first-child,
.tkf-tool-page .entry .tkf-split-text > :first-child {
	margin-top: 0;
}

/* The illustration carries more of the explanation than the copy does, so it
   gets the wider column. */
.tkf-tool-page .entry .tkf-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
	gap: clamp(1.25rem, 2.5vw, 1.75rem);
	align-items: center;
}

/* The heading sits in the narrower column, so it needs to run smaller than a
   full-width h2 or it wraps to three cramped lines. */
.tkf-tool-page .entry .tkf-split-text h2 {
	font-size: clamp(1.3rem, 2.4vw, 1.7rem);
	line-height: 1.18;
}

/* Let the picture run into the panel's padding on its own side, which buys it
   real width without squeezing the copy. Must stay a single rule: a later
   `margin: 0` shorthand at equal specificity would silently cancel it. */
.tkf-tool-page .entry .tkf-split-media {
	margin: 0 calc(-1 * clamp(1.2rem, 2.5vw, 1.75rem)) 0 0;
}

.tkf-tool-page .entry .tkf-split-media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 0;
}

.tkf-tool-page .entry .tkf-split-media figcaption {
	margin-top: .7rem;
	font-size: .82rem;
	line-height: 1.5;
	color: var(--muted, #7C6B94);
	text-align: center;
}

@media (max-width: 780px) {
	.tkf-tool-page .entry .tkf-split {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Picture first on a phone: it explains the idea faster than the copy.
	   The bleed is dropped here, since there is no side column to bleed into. */
	.tkf-tool-page .entry .tkf-split-media {
		order: -1;
		margin: 0;
	}
}

/* ---------------- paired text boxes ---------------- */

/*
 * Two text blocks side by side. Pairs that answer related questions read
 * faster this way than stacked, and it takes a lot of height out of the page.
 */
.tkf-tool-page .entry .tkf-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(1rem, 2.5vw, 1.5rem);
	margin-block: 2.4rem;
}

.tkf-tool-page .entry .tkf-box {
	margin: 0;
	padding: clamp(1.15rem, 2.5vw, 1.6rem);
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--hairline, #E7D8F2);
	border-radius: var(--r, 16px);
	box-shadow: var(--sh-sm, 0 1px 2px #1E123310, 0 2px 6px #1E12330A);
}

.tkf-tool-page .entry .tkf-box > :first-child {
	margin-top: 0;
}

.tkf-tool-page .entry .tkf-box h3 {
	font-size: 1.14rem;
	line-height: 1.3;
}

.tkf-tool-page .entry .tkf-box p,
.tkf-tool-page .entry .tkf-box li {
	font-size: .97rem;
	line-height: 1.65;
}

@media (max-width: 780px) {
	.tkf-tool-page .entry .tkf-duo {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------- FAQ accordion ---------------- */

/*
 * Unprefixed so the shortcode still styles itself on any page or theme. Only
 * the breakout width below is tied to the tool page.
 *
 * Two columns with `align-items: start` so an opened item grows on its own
 * instead of stretching its neighbour.
 */
.tkf-faq {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: start;
	gap: .8rem;
	margin-block: 1.6rem;
}

.tkf-faq-item {
	background: var(--surface, #FFFFFF);
	border: 1px solid var(--hairline, #E7D8F2);
	border-radius: var(--r-sm, 10px);
	padding: .95rem 1.15rem;
	transition: border-color .16s, box-shadow .16s;
}

.tkf-faq-item[open] {
	border-color: var(--hairline-2, #D8C2E8);
	box-shadow: var(--sh-sm, 0 1px 2px #1E123310, 0 2px 6px #1E12330A);
}

.tkf-faq-item summary {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .9rem;
	cursor: pointer;
	font-weight: 650;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--ink, #1E1233);
	list-style: none;
}

/* Both are needed: the pseudo-element for WebKit, `list-style` for the rest. */
.tkf-faq-item summary::-webkit-details-marker {
	display: none;
}

.tkf-faq-item summary:hover {
	color: var(--violet, #9B23D4);
}

.tkf-faq-item summary::after {
	content: "";
	flex: 0 0 auto;
	width: .5rem;
	height: .5rem;
	margin-top: .35rem;
	border-right: 2px solid var(--violet, #9B23D4);
	border-bottom: 2px solid var(--violet, #9B23D4);
	transform: rotate(45deg);
	transition: transform .18s ease;
}

.tkf-faq-item[open] summary::after {
	transform: rotate(-135deg);
}

.tkf-faq-answer {
	padding-top: .55rem;
}

.tkf-faq-answer > :first-child {
	margin-top: 0;
}

.tkf-tool-page .entry .tkf-faq-answer p {
	margin: 0;
	font-size: .95rem;
	line-height: 1.62;
}

@media (prefers-reduced-motion: reduce) {
	.tkf-faq-item summary::after {
		transition: none;
	}
}

@media (max-width: 780px) {
	.tkf-faq {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------------- call to action ---------------- */

.tkf-tool-page .entry .tkf-cta {
	margin-block: 2.75rem;
	padding: clamp(1.6rem, 4vw, 2.6rem);
	border-radius: var(--r, 16px);
	background: var(--grad, linear-gradient(120deg, #E056FD 0%, #E530B5 100%));
	box-shadow: var(--sh-glow, 0 18px 46px -14px #9B23D455);
	text-align: center;
}

.tkf-tool-page .entry .tkf-cta-eyebrow {
	margin: 0 0 .55rem;
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #ffffffcc;
}

.tkf-tool-page .entry .tkf-cta-title {
	margin: 0 0 .7rem;
	color: #fff;
	font-size: clamp(1.35rem, 2.8vw, 1.85rem);
	line-height: 1.2;
}

.tkf-tool-page .entry .tkf-cta p {
	margin: 0 auto;
	max-width: 40rem;
	color: #fff;
}

/* Styled by class, never by a descendant `a` rule: a broad `.tkf-cta a { color }`
   would outrank .btn-primary and repaint every button on the page. */
.tkf-tool-page .entry .tkf-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-top: 1.4rem;
	padding: .85rem 1.9rem;
	border-radius: 999px;
	background: #fff;
	color: var(--violet, #9B23D4);
	font-weight: 700;
	font-size: 1.02rem;
	text-decoration: none;
	box-shadow: 0 10px 26px -10px #1E123366;
	transition: transform .16s cubic-bezier(.2,.8,.3,1), box-shadow .16s;
}

.tkf-tool-page .entry .tkf-cta-btn:hover,
.tkf-tool-page .entry .tkf-cta-btn:focus-visible {
	color: var(--violet, #9B23D4);
	transform: translateY(-2px);
	box-shadow: 0 16px 34px -12px #1E123377;
}

.tkf-tool-page .entry .tkf-cta-note {
	margin-top: .9rem;
	font-size: .84rem;
	color: #ffffffd9;
}

/* ---------------- centring the wide blocks ---------------- */

/*
 * The tool, the tinted panel and the CTA all break out past the theme's
 * reading column to the same width, and all three must stay centred on the
 * page rather than on that column.
 *
 * `margin-inline: auto` cannot do this: once an element is wider than its
 * containing block, CSS resolves auto margins to zero, so the block silently
 * left-aligns and overflows to the right instead of centring. Pulling back
 * half its own width from the parent's centre works at any width.
 *
 * Declared last so it wins over the per-block rules above.
 */
.tkf-tool-page .entry .tkf,
.tkf-tool-page .entry .tkf-panel,
.tkf-tool-page .entry .tkf-duo,
.tkf-tool-page .entry .tkf-faq,
.tkf-tool-page .entry .tkf-cta {
	/* `--pad` is the theme's own shell gutter, clamp(1.1rem, 4vw, 2.25rem).
	   Hardcoding the desktop value would leave these blocks needlessly narrow
	   on a phone, where that gutter is much smaller. */
	--tkf-wide: min(54rem, calc(100vw - 2 * var(--pad, 2.25rem)));
	width: var(--tkf-wide);
	max-width: none;
	margin-left: calc(50% - var(--tkf-wide) / 2);
	margin-right: 0;
}

/* ---------------- form ---------------- */

.tkf-form {
	background: var(--tkf-surface);
	border: 1px solid var(--tkf-hairline);
	border-radius: var(--tkf-radius);
	box-shadow: var(--sh-md, 0 2px 6px #1E123312, 0 14px 34px -10px #1E123326);
	padding: clamp(1.1rem, 3vw, 1.6rem);
}

.tkf-label {
	display: block;
	font-weight: 650;
	font-size: .95rem;
	margin-bottom: .6rem;
}

.tkf-field {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
	background: var(--tkf-surface);
	border: 1.5px solid var(--tkf-hairline-2);
	border-radius: 999px;
	padding: .35rem .35rem .35rem 1rem;
	transition: border-color .16s, box-shadow .16s;
}

.tkf-field:focus-within {
	border-color: var(--tkf-violet);
	box-shadow: 0 0 0 4px var(--violet-soft, #9B23D414);
}

.tkf-at {
	font-weight: 700;
	color: var(--tkf-muted);
	font-size: 1.05rem;
	line-height: 1;
}

/*
 * Deliberately over-specified. The theme styles `input[type="text"]` with its
 * own border, radius, padding and width:100% at specificity 0-1-1, which beats
 * a bare `.tkf-input` at 0-1-0. Losing that fight drew a second bordered box
 * inside the pill and pushed the button onto its own line. Three classes puts
 * this at 0-3-0, and the type selectors cover the url input in the video tool.
 */
.tkf .tkf-field .tkf-input,
.tkf .tkf-field input[type="text"],
.tkf .tkf-field input[type="url"] {
	flex: 1 1 8rem;
	width: auto;
	min-width: 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	box-shadow: none;
	background: transparent;
	font: inherit;
	font-size: 1.05rem;
	color: var(--tkf-ink);
	padding: .6rem 0;
	-webkit-appearance: none;
	appearance: none;
}

/* The theme's `input:focus` sets a border colour; the pill draws focus itself. */
.tkf .tkf-field .tkf-input:focus {
	border: 0;
	box-shadow: none;
}

.tkf-input::placeholder { color: var(--tkf-muted); opacity: .75; }

.tkf-submit { flex: 0 0 auto; }

/*
 * Phones: the pill becomes a rounded panel with the field on one line and a
 * full-width button beneath. A capsule that wraps looks broken, and a
 * full-width button is a better tap target anyway.
 */
@media (max-width: 560px) {
	.tkf .tkf-field {
		flex-wrap: wrap;
		border-radius: 1rem;
		padding: .55rem .55rem .55rem .9rem;
		row-gap: .55rem;
	}

	.tkf .tkf-field .tkf-input {
		flex: 1 1 auto;
		font-size: 1rem;
	}

	.tkf .tkf-field .tkf-submit {
		flex: 1 0 100%;
		width: 100%;
	}
}

.tkf-hint {
	margin: .75rem .25rem 0;
	font-size: .85rem;
	color: var(--tkf-muted);
}

/* ---------------- status ---------------- */

.tkf-status {
	margin: 1rem 0 0;
	font-size: .95rem;
	color: var(--tkf-ink-2);
	min-height: 1.4em;
}

.tkf-status:empty { margin: 0; min-height: 0; }
.tkf-status-error { color: var(--tkf-danger); font-weight: 600; }

/* ---------------- result ---------------- */

/* The picture is the point of the page, so it leads: one centred column with
   the actions directly beneath it, rather than a photo beside a text block. */
.tkf-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	margin-top: 1.5rem;
	padding: clamp(1.25rem, 3.5vw, 2.25rem);
	background: var(--tkf-surface);
	border: 1px solid var(--tkf-hairline);
	border-radius: var(--tkf-radius);
	box-shadow: var(--sh-lg, 0 6px 14px #1E123314, 0 30px 64px -14px #1E123336);
}

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

.tkf-photo {
	margin: 0;
	position: relative;
	width: min(28rem, 100%);
	border-radius: var(--tkf-radius);
	overflow: hidden;
	background: var(--wash, #F3E7FA);
	aspect-ratio: 1 / 1;
}

/* The gradient hairline reads as a frame without tinting the picture. */
.tkf-photo::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px #1E123314;
	pointer-events: none;
}

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

.tkf-meta { min-width: 0; width: 100%; }

.tkf-handle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .4rem;
	margin: 1.15rem 0 0;
	font-size: clamp(1.35rem, 3.5vw, 1.75rem);
	font-weight: 750;
	line-height: 1.2;
	overflow-wrap: anywhere;
}

.tkf-verified { color: var(--tkf-violet); display: inline-flex; }
.tkf-verified[hidden] { display: none; }

.tkf-nickname {
	margin: .3rem 0 0;
	color: var(--tkf-ink-2);
	font-size: 1.02rem;
	overflow-wrap: anywhere;
}

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

.tkf-stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1.75rem;
	list-style: none;
	margin: 1.1rem 0 0;
	padding: 0;
}

.tkf-stat { display: flex; flex-direction: column; gap: .1rem; }
.tkf-stat[hidden] { display: none; }
.tkf-stat-value { font-size: 1.2rem; font-weight: 750; line-height: 1.1; }
.tkf-stat-label { font-size: .78rem; color: var(--tkf-muted); text-transform: uppercase; letter-spacing: .06em; }

.tkf-private {
	margin: 1.1rem auto 0;
	max-width: 34rem;
	padding: .7rem .9rem;
	border-radius: var(--r-sm, 10px);
	background: var(--wash, #F3E7FA);
	color: var(--tkf-ink-2);
	font-size: .88rem;
}

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

.tkf-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .7rem;
	margin-top: 1.4rem;
}

.tkf-note {
	margin: 1rem auto 0;
	max-width: 34rem;
	font-size: .82rem;
	color: var(--tkf-muted);
}

.tkf-note:empty { margin: 0; }

/* ---------------- busy state ---------------- */

.tkf-spinner {
	display: none;
	width: 1em;
	height: 1em;
	border-radius: 50%;
	border: 2px solid currentColor;
	border-top-color: transparent;
	animation: tkf-spin .7s linear infinite;
}

.tkf .is-busy .tkf-spinner { display: inline-block; }
.tkf .is-busy { cursor: progress; }
.tkf button[disabled] { opacity: .72; }

@keyframes tkf-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.tkf-spinner { animation-duration: 2.4s; }
}

/* ---------------- narrow ---------------- */

@media (max-width: 720px) {
	/* The layout is already a centred column; only the picture and the stat
	   spacing need to come in. */
	.tkf-photo { width: min(22rem, 82vw); }
	.tkf-stats { gap: 1.25rem; }
	.tkf-actions > .btn { flex: 1 1 12rem; }
}