/*
 * The highlighter device. A mention is a highlight.
 * One per screen, max two per page. Never on a button.
 * See docs/design-system.md.
 */

.pmm-mark {
	position: relative;
	white-space: nowrap;
}

.pmm-mark::before {
	content: "";
	position: absolute;
	inset: 12% -4px 8% -4px;
	background: var(--wp--preset--color--highlighter);
	transform: rotate(-0.6deg);
	z-index: -1;
	/* Uneven radius is what stops it looking like a rectangle. */
	border-radius: 2px 6px 3px 5px;
}

/* Second instance on a page leans the other way, so two never look stamped. */
.pmm-mark.pmm-mark--alt::before {
	transform: rotate(0.5deg);
	border-radius: 5px 3px 6px 2px;
}

/*
 * Focus visibility floor. Never removed, on anything interactive.
 * See docs/design-system.md accessibility floor.
 */
a:focus-visible,
button:focus-visible,
.wp-element-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--marigold-deep);
	outline-offset: 2px;
}

/*
 * Answer-first block. The 40 to 60 word direct answer at the top of every page.
 * Visually a lead paragraph, structurally the thing AI lifts as the answer.
 */
.pmm-answer {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body-lg);
	line-height: 1.6;
	color: var(--wp--preset--color--ink);
	max-width: 680px;
	border-left: 3px solid var(--wp--preset--color--marigold);
	padding-left: 1.25rem;
	margin: 0 0 2rem;
}

/* Tap target floor. */
a.wp-element-button,
.wp-block-button__link {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}