/*
 * Persona binding indicators for Gravity Forms.
 *
 * Two badges sit inside a bound field's label:
 *
 *   .pai-persona-badge--filled   the value came from the user's own Persona
 *   .pai-persona-badge--vaulted  the value is in their safe and we cannot read it
 *
 * The vaulted badge is the one that matters. It has to read as "this is yours
 * and it is safe", not as an error — so it borrows the form's accent colour
 * rather than a warning red, and it states the fact rather than complaining.
 */

.pai-persona-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-inline-start: 6px;
	padding: 1px 6px;
	border-radius: 999px;
	font-size: 0.75em;
	font-weight: 500;
	line-height: 1.6;
	vertical-align: middle;
	cursor: help;
}

.pai-persona-badge svg {
	flex: none;
	display: block;
}

.pai-persona-badge:focus-visible {
	outline: 2px solid var(--wp--preset--color--indigo-bright, #7f77dd);
	outline-offset: 2px;
}

/* In the safe: present, verified, and not ours to read. */
.pai-persona-badge--vaulted {
	color: var(--wp--preset--color--indigo-core, #3c3489);
	background-color: var(--wp--preset--color--indigo-tint, rgba(60, 52, 137, 0.08));
}

.pai-persona-badge__mask {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	letter-spacing: 0.02em;
}

/*
 * Filled from the Persona: a quiet acknowledgement, not an announcement. The
 * user should notice it only if they wonder where the value came from.
 */
.pai-persona-badge--filled {
	color: var(--wp--preset--color--contrast-2, #6b7280);
	background-color: transparent;
	padding-inline: 0;
}

/*
 * A vaulted field is empty on purpose and needs the user's attention, so its
 * input carries a hint of the same accent. It is deliberately not an error
 * state: nothing has gone wrong.
 */
.gform_wrapper .gfield.pai-persona-field--vaulted input[type="text"],
.gform_wrapper .gfield.pai-persona-field--vaulted input[type="email"],
.gform_wrapper .gfield.pai-persona-field--vaulted input[type="tel"],
.gform_wrapper .gfield.pai-persona-field--vaulted input[type="number"],
.gform_wrapper .gfield.pai-persona-field--vaulted textarea {
	border-color: var(--wp--preset--color--indigo-bright, #7f77dd);
}

@media (prefers-reduced-motion: no-preference) {
	.pai-persona-badge {
		transition: background-color 0.15s ease, color 0.15s ease;
	}
}