/**
 * Email typo prompt. Deliberately quieter than .contact-form-notice - this is
 * a nudge, not an error state, so it borrows the same left-accent-bar shape
 * on a neutral background rather than the notice's success/error palette.
 */

.pl-email-typo {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: 0.5rem;
	padding: 0.6rem 0.85rem;
	border-radius: var(--radius-sm);
	border-left: 4px solid var(--color-text-muted);
	background: var(--color-bg-alt);
	color: var(--color-text);
	font-size: 0.9rem;
	line-height: 1.4;
}

/* Author display rules override the browser's default [hidden] styling. */
.pl-email-typo[hidden] {
	display: none;
}

/* Lead-in, address and question mark flow as one sentence, so the flex gap
   only ever separates that sentence from the decline button. */
.pl-email-typo__message {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
}

/* Space after the lead-in only. A gap on the message would also push the
   question mark away from the address it belongs to. */
.pl-email-typo__text {
	margin-right: 0.35rem;
}

.pl-email-typo__accept,
.pl-email-typo__keep {
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	padding: 0.3rem 0.65rem;
	font-family: inherit;
	font-size: 0.85rem;
	line-height: 1.3;
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition);
}

/* The suggested address itself: primary action, styled like a small link-button
   so it reads as the obvious thing to click. */
.pl-email-typo__accept {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
	font-weight: 600;
}

.pl-email-typo__accept:hover {
	background: var(--color-primary-dark);
	border-color: var(--color-primary-dark);
}

/* The decline: secondary, quiet - present but clearly not the recommended path. */
.pl-email-typo__keep {
	background: transparent;
	border-color: var(--color-border);
	color: var(--color-text-muted);
}

.pl-email-typo__keep:hover {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-on-primary);
}

.pl-email-typo__accept:focus-visible,
.pl-email-typo__keep:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(213, 154, 99, 0.35);
}