/**
 * Ghost audience check.
 *
 * Loads after pfp.css and inherits its tokens and buttons. Note the input
 * override below: the theme styles `input[type="number"]` at 0-1-1, so a bare
 * class here would lose, exactly as it did for the tool search fields.
 */

.tkf-aud {
	width: min(46rem, 100%);
	margin-inline: auto;
}

.tkf-aud-heading {
	margin: 0 0 1rem;
	text-align: center;
	font-size: clamp(1.4rem, 3vw, 1.9rem);
	font-weight: 800;
	line-height: 1.2;
	color: var(--tkf-ink, #1E1233);
}

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

.tkf-aud-fields {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .9rem;
}

.tkf-aud-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	min-width: 0;
}

.tkf-aud-field label {
	font-size: .84rem;
	font-weight: 650;
	color: var(--tkf-ink-2, #4C3D66);
	line-height: 1.3;
}

.tkf-aud-optional {
	font-weight: 400;
	color: var(--tkf-muted, #7C6B94);
}

/* Out-specifies the theme's `input[type="number"]` rule (0-1-1). */
.tkf-aud .tkf-aud-input,
.tkf-aud input[type="number"].tkf-aud-input {
	width: 100%;
	font: inherit;
	font-size: 1.05rem;
	font-weight: 650;
	color: var(--tkf-ink, #1E1233);
	background: var(--tkf-surface, #FFFFFF);
	border: 1.5px solid var(--tkf-hairline-2, #D8C2E8);
	border-radius: var(--r-sm, 10px);
	padding: .6rem .7rem;
	-webkit-appearance: none;
	appearance: none;
	-moz-appearance: textfield;
}

.tkf-aud .tkf-aud-input::-webkit-outer-spin-button,
.tkf-aud .tkf-aud-input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.tkf-aud .tkf-aud-input:focus {
	border-color: var(--tkf-violet, #9B23D4);
	box-shadow: 0 0 0 4px var(--violet-soft, #9B23D414);
	outline: none;
}

.tkf-aud-submit {
	width: 100%;
	margin-top: 1rem;
}

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

.tkf-aud-result {
	margin-top: 1.2rem;
}

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

.tkf-aud-metrics {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(1.5rem, 5vw, 3rem);
	padding: 1.1rem;
	background: var(--wash, #F3E7FA);
	border-radius: var(--tkf-radius, 16px) var(--tkf-radius, 16px) 0 0;
	text-align: center;
}

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

.tkf-aud-metric b {
	display: block;
	font-size: clamp(1.8rem, 5vw, 2.6rem);
	font-weight: 800;
	line-height: 1;
	color: var(--tkf-violet, #9B23D4);
}

.tkf-aud-metric span {
	display: block;
	margin-top: .3rem;
	font-size: .82rem;
	color: var(--tkf-ink-2, #4C3D66);
}

.tkf-aud-verdict {
	padding: clamp(1.1rem, 3vw, 1.6rem);
	border: 1px solid var(--tkf-hairline, #E7D8F2);
	border-top: 0;
	border-radius: 0 0 var(--tkf-radius, 16px) var(--tkf-radius, 16px);
	background: var(--tkf-surface, #FFFFFF);
	text-align: center;
}

/* Never colour alone: the badge always names the verdict in words. */
.tkf-aud-verdict.is-good { border-color: #0A8A7240; background: linear-gradient(160deg, #FFFFFF, #EAF7F3); }
.tkf-aud-verdict.is-ok   { border-color: var(--tkf-hairline, #E7D8F2); }
.tkf-aud-verdict.is-warn { border-color: #B0651F40; background: linear-gradient(160deg, #FFFFFF, #FDF3E8); }
.tkf-aud-verdict.is-bad  { border-color: #C02B3C40; background: linear-gradient(160deg, #FFFFFF, #FDEEF0); }

.tkf-aud-badge {
	display: inline-block;
	margin: 0 0 .5rem;
	padding: .26rem .68rem;
	border-radius: 999px;
	font-size: .71rem;
	font-weight: 750;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: #1E12330D;
	color: var(--tkf-ink-2, #4C3D66);
}

.is-good .tkf-aud-badge { background: #0A8A7218; color: var(--green, #0A8A72); }
.is-warn .tkf-aud-badge { background: #B0651F1A; color: var(--amber, #B0651F); }
.is-bad  .tkf-aud-badge { background: #C02B3C1A; color: var(--danger, #C02B3C); }

.tkf-aud-title {
	margin: 0 0 .5rem;
	font-size: clamp(1.15rem, 2.6vw, 1.45rem);
	font-weight: 800;
	line-height: 1.25;
	color: var(--tkf-ink, #1E1233);
}

.tkf-aud-body {
	margin: 0 auto;
	max-width: 38rem;
	font-size: .98rem;
	line-height: 1.62;
	color: var(--tkf-ink-2, #4C3D66);
}

.tkf-aud-caveat {
	margin: .9rem auto 0;
	max-width: 40rem;
	font-size: .84rem;
	line-height: 1.55;
	color: var(--tkf-muted, #7C6B94);
	text-align: center;
}

.tkf-aud-next {
	margin: .8rem auto 0;
	max-width: 40rem;
	font-size: .92rem;
	text-align: center;
	color: var(--tkf-ink-2, #4C3D66);
}

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