/**
 * Free DMARC check, in the ARMD theme's palette: the box (a label and one white control holding the
 * input and the Check button) and, under it, the result card or an error.
 *
 * Gilroy comes as one family per weight (Regular 400, Medium 500, Bold 600); each is used at its own
 * weight so the browser never fakes a heavier one.
 *
 * The colours an admin can change under Settings › DMARC Checker are read from --armd-v-*, --armd-s-*,
 * --armd-p-* and --armd-btn*, which Dmarc_Check_Settings::css() sets on the box for changed colours only.
 * Each falls back to today's colour, so a site that never changed one looks exactly as before.
 *
 * @package armd-enhancements
 */

.armd-dmarc-check {
	--armd-navy: var(--wp--preset--color--accent-1, #052c53);
	--armd-navy-hover: var(--wp--preset--color--custom-accent-5, #144372);
	--armd-sky: var(--wp--preset--color--custom-light-blue, #00b2f4);
	--armd-ink: #3d5166;
	--armd-muted: #5b6b7c;
	--armd-edge: #dbe4ec;
	--armd-line: #e7edf3;
	--armd-wash: #f6f9fc;
	--armd-bone: #edf2f7;
	--armd-red: #b42318;
	--armd-red-ink: #8a1c12;
	--armd-red-wash: #fdeeec;
	--armd-medium: var(--wp--preset--font-family--gilroy-medium), sans-serif;
	--armd-bold: var(--wp--preset--font-family--gilroy-bold), sans-serif;
	container: armd-dmarc-box / inline-size;
	max-width: 720px;
	color: var(--armd-navy);
}

.armd-dmarc-check svg {
	flex: none;
}

/* The box */

.armd-dmarc-check__form {
	margin: 0;
}

.armd-dmarc-check__label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--armd-bold);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

.armd-dmarc-check__control {
	display: flex;
	align-items: center;
	gap: 6px;
	box-sizing: border-box;
	min-height: 58px;
	padding: 5px;
	border: 1px solid #c9d5e1;
	border-radius: 8px;
	background: #fff;
	transition: box-shadow 0.15s ease;
}

.armd-dmarc-check .armd-dmarc-check__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 46px;
	margin: 0;
	padding: 0 12px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	box-shadow: none;
	color: var(--armd-navy);
	font-family: var(--armd-medium);
	font-size: 18px;
	font-weight: 500;
	line-height: normal;
}

.armd-dmarc-check .armd-dmarc-check__input::placeholder {
	color: #7a8a9a;
	opacity: 1;
}

/* The ring goes on the whole control; browsers without :has() keep the input's own outline. */
@supports selector(:has(a)) {
	.armd-dmarc-check .armd-dmarc-check__input:focus {
		outline: none;
	}

	.armd-dmarc-check__control:has(.armd-dmarc-check__input:focus) {
		outline: 2px solid transparent; /* Shows in forced-colours mode, where shadows don't. */
		box-shadow: 0 0 0 3px color-mix(in srgb, var(--armd-sky) 55%, transparent);
	}

	.armd-dmarc-check__control.is-invalid:has(.armd-dmarc-check__input:focus) {
		box-shadow: 0 0 0 3px #f2a39a;
	}
}

.armd-dmarc-check__control.is-invalid {
	box-shadow: 0 0 0 3px #f2a39a;
}

.armd-dmarc-check .armd-dmarc-check__button {
	display: grid;
	flex: none;
	height: 46px;
	margin: 0;
	padding: 0 22px;
	border: 0;
	border-radius: 6px;
	background: var(--armd-btn, var(--armd-navy));
	box-shadow: none;
	color: #fff;
	font-family: var(--armd-bold);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.armd-dmarc-check .armd-dmarc-check__button:hover {
	background: var(--armd-btn-hover, var(--armd-navy-hover));
	color: #fff;
}

.armd-dmarc-check .armd-dmarc-check__button:focus-visible {
	outline: 2px solid var(--armd-sky);
	outline-offset: 2px;
}

/* The three labels share one grid cell, so the button keeps its width as it changes. */
.armd-dmarc-check__idle,
.armd-dmarc-check__busy,
.armd-dmarc-check__done {
	display: inline-flex;
	grid-area: 1 / 1;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.armd-dmarc-check__idle svg {
	transition: transform 0.15s ease;
}

.armd-dmarc-check__button:hover .armd-dmarc-check__idle svg {
	transform: translateX(2px);
}

.armd-dmarc-check__busy,
.armd-dmarc-check__done {
	visibility: hidden;
}

.armd-dmarc-check__busy svg {
	animation: armd-dmarc-spin 0.8s linear infinite;
}

/* While checking: today's hand-picked navy, or the hover colour once that's been changed. */
.armd-dmarc-check .armd-dmarc-check__button[aria-disabled="true"] {
	background: var(--armd-btn-hover, #1d4670);
	cursor: wait;
}

.armd-dmarc-check__button[aria-disabled="true"] .armd-dmarc-check__idle {
	visibility: hidden;
}

.armd-dmarc-check__button[aria-disabled="true"] .armd-dmarc-check__busy {
	visibility: visible;
}

/* After a result, Clear: a quieter tint of the button's colour, so the card's own button leads. */
.armd-dmarc-check .armd-dmarc-check__button.is-done {
	background: color-mix(in srgb, var(--armd-btn, var(--armd-navy)) 9%, #fff);
	color: var(--armd-btn, var(--armd-navy));
}

.armd-dmarc-check .armd-dmarc-check__button.is-done:hover {
	background: color-mix(in srgb, var(--armd-btn, var(--armd-navy)) 16%, #fff);
	color: var(--armd-btn, var(--armd-navy));
}

.armd-dmarc-check__button.is-done .armd-dmarc-check__idle {
	visibility: hidden;
}

.armd-dmarc-check__button.is-done .armd-dmarc-check__done {
	visibility: visible;
}

.armd-dmarc-check__error {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 12px 0 0;
	padding: 12px 14px;
	border-radius: 8px;
	background: var(--armd-red-wash);
	color: var(--armd-red-ink);
	font-family: var(--armd-medium);
	font-size: 15.5px;
	font-weight: 500;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.armd-dmarc-check__error svg {
	width: 20px;
	height: 20px;
	margin-top: 1px;
	color: var(--armd-red);
	stroke-width: 2.2;
}

/* A narrow box (a phone): a tighter button, and just the spinner while checking, leave the input room. */
@container armd-dmarc-box (max-width: 360px) {
	.armd-dmarc-check .armd-dmarc-check__input {
		padding: 0 8px 0 10px;
		font-size: 17px;
	}

	.armd-dmarc-check .armd-dmarc-check__button {
		padding: 0 16px;
		font-size: 16px;
	}

	.armd-dmarc-check__idle,
	.armd-dmarc-check__busy,
	.armd-dmarc-check__done {
		gap: 6px;
	}

	.armd-dmarc-check__checking {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Read out by screen readers only. */
.armd-dmarc-check__status {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* The result card, and its placeholder while checking */

.armd-dmarc-check-card {
	container: armd-dmarc-card / inline-size;
	overflow: hidden;
	margin-top: 20px;
	border: 1px solid var(--armd-edge);
	border-radius: 10px;
	background: #fff;
	color: var(--armd-navy);
	font-family: var(--armd-medium);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
}

/* The placeholder fades in; the card's white stays put while its parts follow one another in. */
.armd-dmarc-check-card.is-loading {
	animation: armd-dmarc-fade 0.2s ease-out;
}

.armd-dmarc-check-card:not(.is-loading) > * {
	animation: armd-dmarc-in 0.35s ease-out backwards;
}

.armd-dmarc-check-card:not(.is-loading) > :nth-child(2) {
	animation-delay: 0.06s;
}

.armd-dmarc-check-card:not(.is-loading) > :nth-child(3) {
	animation-delay: 0.12s;
}

.armd-dmarc-check-card svg {
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Margins only: a padding reset here would outweigh the rows' own padding. */
.armd-dmarc-check-card p,
.armd-dmarc-check-card h3,
.armd-dmarc-check-card ul,
.armd-dmarc-check-card li {
	margin: 0;
}

.armd-dmarc-check-card ul {
	padding: 0;
}

/* Header: verdict, domain and summary on a tint of the verdict's colour. */
.armd-dmarc-check-card__head {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border-bottom: 1px solid var(--armd-tint-edge, var(--armd-line));
	background: var(--armd-tint, var(--armd-wash));
}

.armd-dmarc-check-card.is-at_risk {
	--armd-tone: var(--armd-v-at-risk, #b42318);
	--armd-tint: var(--armd-v-at-risk-tint, #fdeeec);
	--armd-tint-edge: var(--armd-v-at-risk-edge, #f4d3ce);
	--armd-pill: var(--armd-v-at-risk-pill, #fbd9d4);
	--armd-pill-ink: var(--armd-v-at-risk-ink, #912018);
}

.armd-dmarc-check-card.is-partial {
	--armd-tone: var(--armd-v-partial, #c2410c);
	--armd-tint: var(--armd-v-partial-tint, #fff4ea);
	--armd-tint-edge: var(--armd-v-partial-edge, #f3dccb);
	--armd-pill: var(--armd-v-partial-pill, #ffe0c7);
	--armd-pill-ink: var(--armd-v-partial-ink, #9a3412);
}

.armd-dmarc-check-card.is-protected {
	--armd-tone: var(--armd-v-protected, #1a7f37);
	--armd-tint: var(--armd-v-protected-tint, #ebf7ef);
	--armd-tint-edge: var(--armd-v-protected-edge, #cfe9d7);
	--armd-pill: var(--armd-v-protected-pill, #cdebd6);
	--armd-pill-ink: var(--armd-v-protected-ink, #14612a);
}

.armd-dmarc-check-card__badge {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--armd-tone);
	color: #fff;
}

.armd-dmarc-check-card__badge svg {
	width: 22px;
	height: 22px;
	stroke-width: 2;
}

.armd-dmarc-check-card__heading {
	flex: 1;
	min-width: 0;
}

.armd-dmarc-check-card__title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.armd-dmarc-check-card .armd-dmarc-check-card__domain {
	max-width: 100%;
	color: inherit;
	font-family: var(--armd-bold);
	font-size: 19px;
	/* Down to 16px on the smallest phones, so a domain's first label still fits beside the badge. */
	font-size: clamp(16px, 7.2cqi, 19px);
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: normal;
	text-transform: none;
	overflow-wrap: anywhere;
}

/* A domain wraps as a whole; see withDomain() in the script. */
.armd-dmarc-check-card__name {
	display: inline-block;
	max-width: 100%;
}

.armd-dmarc-check-card__pill {
	flex: none;
	box-sizing: border-box;
	max-width: 100%; /* On the very narrowest phones its words wrap rather than run out of the card. */
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--armd-pill);
	color: var(--armd-pill-ink);
	font-family: var(--armd-bold);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/*
 * The DMARC policy badge, beside the pill: a white capsule the pill's height, edged in the header's tint.
 * Each part (p=, then sp=, pct= or t= when they weaken it) has a dot and a value in its own colour; the
 * key stays a quiet grey, because the value is what matters. The value's ink is its colour mixed 80%
 * with black, so it stays readable on white.
 */
.armd-dmarc-check-card__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
	max-width: 100%;
}

.armd-dmarc-check-card__policy {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 14px;
	box-sizing: border-box;
	max-width: 100%;
	padding: 3px 11px 3px 9px;
	border: 1px solid var(--armd-tint-edge, var(--armd-edge));
	border-radius: 12px;
	background: #fff;
	color: var(--armd-muted);
	font-family: var(--armd-medium);
	font-size: 13px;
	font-weight: 500;
	line-height: 15px;
	letter-spacing: 0.01em;
	cursor: help;
}

.armd-dmarc-check-card__policy-part {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.armd-dmarc-check-card__policy-part::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	margin-right: 6px;
	border-radius: 50%;
	background: var(--armd-policy);
}

.armd-dmarc-check-card__policy-value {
	color: var(--armd-policy-ink);
	font-family: var(--armd-bold);
	font-weight: 600;
}

/* Words instead of a policy wrap like text on a narrow card, the dot staying beside the first line. */
.armd-dmarc-check-card__policy-part.is-words {
	align-items: flex-start;
	min-width: 0;
	white-space: normal;
}

.armd-dmarc-check-card__policy-part.is-words::before {
	margin-top: 4px;
}

.armd-dmarc-check-card__policy-part.is-words .armd-dmarc-check-card__policy-value {
	min-width: 0;
	overflow-wrap: anywhere;
}

.armd-dmarc-check-card__policy-part.is-reject {
	--armd-policy: var(--armd-p-reject, #1a7f37);
	--armd-policy-ink: var(--armd-p-reject-ink, #15662c);
}

.armd-dmarc-check-card__policy-part.is-quarantine {
	--armd-policy: var(--armd-p-quarantine, #b45309);
	--armd-policy-ink: var(--armd-p-quarantine-ink, #904207);
}

.armd-dmarc-check-card__policy-part.is-none {
	--armd-policy: var(--armd-p-none, #c2410c);
	--armd-policy-ink: var(--armd-p-none-ink, #9b340a);
}

.armd-dmarc-check-card__policy-part.is-missing {
	--armd-policy: var(--armd-p-missing, #b42318);
	--armd-policy-ink: var(--armd-p-missing-ink, #901c13);
}

.armd-dmarc-check-card .armd-dmarc-check-card__summary {
	margin-top: 8px;
	color: var(--armd-ink);
	font-size: 15px;
}

/* Checks: rows here; tiles when the card has room, below. */
.armd-dmarc-check-card__checks {
	list-style: none;
}

.armd-dmarc-check-card__check {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	grid-template-areas:
		"icon label"
		"icon state"
		"icon text";
	align-content: start;
	column-gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--armd-line);
}

.armd-dmarc-check-card__icon {
	display: flex;
	grid-area: icon;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
}

.armd-dmarc-check-card__icon svg {
	width: 16px;
	height: 16px;
	stroke-width: 2.6;
}

.armd-dmarc-check-card__check.is-good .armd-dmarc-check-card__icon {
	background: var(--armd-s-good-bg, #e6f4ea);
	color: var(--armd-s-good, #1a7f37);
}

.armd-dmarc-check-card__check.is-warn .armd-dmarc-check-card__icon {
	background: var(--armd-s-warn-bg, #fff1e6);
	color: var(--armd-s-warn, #c2410c);
}

.armd-dmarc-check-card__check.is-bad .armd-dmarc-check-card__icon {
	background: var(--armd-s-bad-bg, #fdeeec);
	color: var(--armd-s-bad, #b42318);
}

.armd-dmarc-check-card__check.is-info .armd-dmarc-check-card__icon {
	background: var(--armd-s-info-bg, #e3f0fa);
	color: var(--armd-s-info, var(--armd-navy-hover));
}

.armd-dmarc-check-card__label {
	grid-area: label;
	align-self: center;
	color: var(--armd-muted);
	font-family: var(--armd-bold);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.armd-dmarc-check-card__state {
	grid-area: state;
	margin: 2px 0;
	font-family: var(--armd-bold);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.3;
}

.armd-dmarc-check-card__text {
	grid-area: text;
	color: var(--armd-ink);
	font-size: 14.5px;
	overflow-wrap: anywhere;
}

/* Footer: the way to fix it, the card's full width. */
.armd-dmarc-check-card__foot {
	display: flex;
	flex-direction: column;
	padding: 14px 16px 16px;
	background: var(--armd-wash);
}

/* Two classes, so the theme's link colours for the navy block don't win. */
.armd-dmarc-check-card .armd-dmarc-check-card__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 48px;
	padding: 10px 16px;
	border-radius: 6px;
	background: var(--armd-btn, var(--armd-navy));
	color: #fff;
	font-family: var(--armd-bold);
	font-size: 16px;
	font-size: clamp(14px, 6.4cqi, 16px); /* As the domain heading: smaller only on the smallest phones. */
	font-weight: 600;
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	overflow-wrap: anywhere;
	transition: background-color 0.15s ease;
}

.armd-dmarc-check-card .armd-dmarc-check-card__cta:hover,
.armd-dmarc-check-card .armd-dmarc-check-card__cta:focus {
	background: var(--armd-btn-hover, var(--armd-navy-hover));
	color: #fff;
	text-decoration: none;
}

.armd-dmarc-check-card .armd-dmarc-check-card__cta:focus-visible {
	outline: 2px solid var(--armd-sky);
	outline-offset: 2px;
}

.armd-dmarc-check-card__cta svg {
	width: 18px;
	height: 18px;
	stroke-width: 2.2;
	transition: transform 0.15s ease;
}

.armd-dmarc-check-card__cta:hover svg {
	transform: translateX(2px);
}

/* Wider cards: domain and pill share a line, and the checks are tiles. */
@container armd-dmarc-card (min-width: 480px) {
	.armd-dmarc-check-card__head {
		align-items: center;
		gap: 16px;
		padding: 18px 20px;
	}

	.armd-dmarc-check-card__badge {
		width: 44px;
		height: 44px;
	}

	.armd-dmarc-check-card__badge svg {
		width: 24px;
		height: 24px;
	}

	.armd-dmarc-check-card__title {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
	}

	.armd-dmarc-check-card .armd-dmarc-check-card__domain {
		font-size: 21px;
	}

	.armd-dmarc-check-card__pill {
		font-size: 12.5px;
	}

	.armd-dmarc-check-card__policy {
		font-size: 13.5px;
	}

	.armd-dmarc-check-card .armd-dmarc-check-card__summary {
		margin-top: 3px;
		font-size: 15.5px;
	}

	.armd-dmarc-check-card__foot {
		padding: 14px 20px;
		border-top: 1px solid var(--armd-line);
	}

	.armd-dmarc-check-card .armd-dmarc-check-card__cta {
		min-height: 46px;
		padding: 10px 20px;
	}

	.armd-dmarc-check-card__checks {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.armd-dmarc-check-card__check {
		grid-template-areas:
			"icon label"
			"state state"
			"text text";
		column-gap: 8px;
		padding: 16px 18px 18px;
		border-bottom: 0;
	}

	.armd-dmarc-check-card__check + .armd-dmarc-check-card__check {
		border-left: 1px solid var(--armd-line);
	}

	.armd-dmarc-check-card__state {
		margin: 10px 0 4px;
	}
}

/* Placeholder: grey bones in the card's shape, with a slow shimmer. */
.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__head {
	border-bottom-color: var(--armd-line);
	background: var(--armd-wash);
}

.armd-dmarc-check-card__bone,
.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__badge,
.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__icon {
	background: linear-gradient(90deg, var(--armd-bone) 40%, #f7fafc 50%, var(--armd-bone) 60%);
	background-size: 300% 100%;
	animation: armd-dmarc-shimmer 1.4s ease-in-out infinite;
}

.armd-dmarc-check-card__bone {
	display: block;
	max-width: 100%;
	height: 12px;
	border-radius: 6px;
}

.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__heading,
.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__heading {
	gap: 10px;
	padding-top: 2px;
}

.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__state {
	margin: 6px 0;
}

/* Rows hold a line or two of text, tiles two or three. */
.armd-dmarc-check-card__text .armd-dmarc-check-card__bone:nth-child(3) {
	display: none;
}

.armd-dmarc-check-card__bone.is-button {
	width: 100%;
	height: 48px;
}

@container armd-dmarc-card (min-width: 480px) {
	.armd-dmarc-check-card__bone.is-button {
		height: 46px;
	}

	.armd-dmarc-check-card__text .armd-dmarc-check-card__bone:nth-child(3) {
		display: block;
	}

	.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__state {
		margin: 10px 0 4px;
	}
}

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

@keyframes armd-dmarc-shimmer {
	from {
		background-position: 100% 0;
	}

	to {
		background-position: 0 0;
	}
}

@keyframes armd-dmarc-fade {
	from {
		opacity: 0;
	}
}

@keyframes armd-dmarc-in {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.armd-dmarc-check-card.is-loading,
	.armd-dmarc-check-card:not(.is-loading) > *,
	.armd-dmarc-check-card__bone,
	.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__badge,
	.armd-dmarc-check-card.is-loading .armd-dmarc-check-card__icon {
		animation: none;
	}

	.armd-dmarc-check__control,
	.armd-dmarc-check .armd-dmarc-check__button,
	.armd-dmarc-check svg,
	.armd-dmarc-check-card .armd-dmarc-check-card__cta,
	.armd-dmarc-check-card__cta svg {
		transition: none;
	}
}

/* On ARMD's navy blocks (white text): a white label, and the control and card need no border. */
.has-base-color .armd-dmarc-check,
.has-accent-1-background-color .armd-dmarc-check {
	color: #fff;
}

.has-base-color .armd-dmarc-check__control,
.has-accent-1-background-color .armd-dmarc-check__control,
.has-base-color .armd-dmarc-check-card,
.has-accent-1-background-color .armd-dmarc-check-card {
	border-color: transparent;
}