/* affiliatewp: sign-up, log in and the affiliate area, only where its markup renders (functions.php); the field and button looks are shared in theme.css */

/* affiliatewp puts every field in one fieldset, each in its own p; minmax keeps the column to the card's width, an auto one grows to turnstile's 300px box on phones */
.affwp-form fieldset {
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem;
}

.affwp-form fieldset > p {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

/* each field's label starts a new group */
.fp-form form > :is(label, fieldset):not(:first-child) {
	margin-top: 1rem;
}

/* affiliatewp's legend is the form's intro line, not a field label */
.affwp-form legend {
	margin-bottom: 1.5rem;
	padding: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--custom--font-size--body);
}

/* affiliatewp's notices (pending approval, log in) and errors, as the store's notice cards */
:is(.affwp-notice, .affwp-errors) {
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
}

:is(.affwp-errors, .affwp-notice-error) {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
}

.affwp-errors .affwp-error {
	padding: 0;
}

/* a warning icon, so an error doesn't rely on red alone */
.affwp-errors {
	position: relative;
	padding-left: 3.25rem;
}

.affwp-errors::before {
	content: "";
	position: absolute;
	top: 1rem;
	left: 1.25rem;
	width: 1.25rem;
	height: 1.25rem;
	height: 1lh;
	background: var(--wp--preset--color--accent-dark);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm-8-80V80a8,8,0,0,1,16,0v56a8,8,0,0,1-16,0Zm20,36a12,12,0,1,1-12-12A12,12,0,0,1,140,172Z'/%3E%3C/svg%3E") center / 1.25rem no-repeat;
}

/* inside the form card (moved there in functions.php), the form's row gap spaces it */
.affwp-form .affwp-errors {
	margin: 0;
}

/* show/hide password (affiliate.js): the eye sits inside the field's right end */
.fp-password {
	position: relative;
}

:is(.fp-form, .affwp-form) .fp-password > input {
	padding-right: 3.25rem;
}

/* edge's own reveal button would make a second eye */
.fp-password > input::-ms-reveal {
	display: none;
}

.fp-password__toggle {
	--fp-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M247.31,124.76c-.35-.79-8.82-19.58-27.65-38.41C194.57,61.26,162.88,48,128,48S61.43,61.26,36.34,86.35C17.51,105.18,9,124,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208s66.57-13.26,91.66-38.34c18.83-18.83,27.3-37.61,27.65-38.4A8,8,0,0,0,247.31,124.76ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.47,133.47,0,0,1,25,128,133.33,133.33,0,0,1,48.07,97.25C70.33,75.19,97.22,64,128,64s57.67,11.19,79.93,33.25A133.46,133.46,0,0,1,231.05,128C223.84,141.46,192.43,192,128,192Zm0-112a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Z'/%3E%3C/svg%3E");
	position: absolute;
	top: 50%;
	right: 0.5rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: none;
	color: var(--wp--preset--color--body-grey);
	cursor: pointer;
	translate: 0 -50%;
}

.fp-password__toggle[aria-pressed="true"] {
	--fp-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M53.92,34.62A8,8,0,1,0,42.08,45.38L61.32,66.55C25,88.84,9.38,123.2,8.69,124.76a8,8,0,0,0,0,6.5c.35.79,8.82,19.57,27.65,38.4C61.43,194.74,93.12,208,128,208a127.11,127.11,0,0,0,52.07-10.83l22,24.21a8,8,0,1,0,11.84-10.76Zm47.33,75.84,41.67,45.85a32,32,0,0,1-41.67-45.85ZM128,192c-30.78,0-57.67-11.19-79.93-33.25A133.16,133.16,0,0,1,25,128c4.69-8.79,19.66-33.39,47.35-49.38l18,19.75a48,48,0,0,0,63.66,70l14.73,16.2A112,112,0,0,1,128,192Zm6-95.43a8,8,0,0,1,3-15.72,48.16,48.16,0,0,1,38.77,42.64,8,8,0,0,1-7.22,8.71,6.39,6.39,0,0,1-.75,0,8,8,0,0,1-8-7.26A32.09,32.09,0,0,0,134,96.57Zm113.28,34.69c-.42.94-10.55,23.37-33.36,43.8a8,8,0,1,1-10.67-11.92A132.77,132.77,0,0,0,231.05,128a133.15,133.15,0,0,0-23.12-30.77C185.67,75.19,158.78,64,128,64a118.37,118.37,0,0,0-19.36,1.57A8,8,0,1,1,106,49.79,134,134,0,0,1,128,48c34.88,0,66.57,13.26,91.66,38.35,18.83,18.83,27.3,37.62,27.65,38.41A8,8,0,0,1,247.31,131.26Z'/%3E%3C/svg%3E");
}

.fp-password__toggle:hover {
	color: var(--wp--preset--color--ink);
}

.fp-password__toggle::before {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	-webkit-mask: var(--fp-eye) center / contain no-repeat;
	mask: var(--fp-eye) center / contain no-repeat;
}

/* affiliate area: shape rule is cards and tables 1rem, tiles, row cards and fields 8px, tabs and buttons pills */
#affwp-affiliate-dashboard {
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

#affwp-affiliate-dashboard > * {
	min-width: 0;
	margin: 0;
}

/* tabs: the search page's filter pills, in one row that scrolls sideways on phones (affiliate.js keeps the current one in view), wrapped from 768px */
#affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs {
	position: relative;
	display: flex;
	gap: 0.5rem;
	margin: 0 calc(-1 * var(--wp--style--root--padding-left, 1.5rem));
	padding: 0.25rem var(--wp--style--root--padding-left, 1.5rem);
	overflow-x: auto;
	list-style: none;
	scroll-padding-inline: var(--wp--style--root--padding-left, 1.5rem);
	scrollbar-width: none;
}

#affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs::-webkit-scrollbar {
	display: none;
}

#affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li {
	flex: none;
	margin: 0;
	padding: 0;
}

#affwp-affiliate-dashboard-tabs a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	padding: 0 1.125rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color 0.2s, background-color 0.2s;
}

#affwp-affiliate-dashboard-tabs a {
	gap: 0.5rem;
}

/* each section's icon (phosphor regular), drawn in the link's own colour */
#affwp-affiliate-dashboard-tabs a::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--fp-icon, none) center / contain no-repeat;
	mask: var(--fp-icon, none) center / contain no-repeat;
}

#affwp-affiliate-dashboard-tabs a[href*="tab=dashboard"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M219.31,108.68l-80-80a16,16,0,0,0-22.62,0l-80,80A15.87,15.87,0,0,0,32,120v96a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V160h32v56a8,8,0,0,0,8,8h64a8,8,0,0,0,8-8V120A15.87,15.87,0,0,0,219.31,108.68ZM208,208H160V152a8,8,0,0,0-8-8H104a8,8,0,0,0-8,8v56H48V120l80-80,80,80Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=urls"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,88.23a54.43,54.43,0,0,1-16,37L189.25,160a54.27,54.27,0,0,1-38.63,16h-.05A54.63,54.63,0,0,1,96,119.84a8,8,0,0,1,16,.45A38.62,38.62,0,0,0,150.58,160h0a38.39,38.39,0,0,0,27.31-11.31l34.75-34.75a38.63,38.63,0,0,0-54.63-54.63l-11,11A8,8,0,0,1,135.7,59l11-11A54.65,54.65,0,0,1,224,48,54.86,54.86,0,0,1,240,88.23ZM109,185.66l-11,11A38.41,38.41,0,0,1,70.6,208h0a38.63,38.63,0,0,1-27.29-65.94L78,107.31A38.63,38.63,0,0,1,144,135.71a8,8,0,0,0,16,.45A54.86,54.86,0,0,0,144,96a54.65,54.65,0,0,0-77.27,0L32,130.75A54.62,54.62,0,0,0,70.56,224h0a54.28,54.28,0,0,0,38.64-16l11-11A8,8,0,0,0,109,185.66Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=creatives"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,40H40A16,16,0,0,0,24,56V200a16,16,0,0,0,16,16H216a16,16,0,0,0,16-16V56A16,16,0,0,0,216,40Zm0,16V158.75l-26.07-26.06a16,16,0,0,0-22.63,0l-20,20-44-44a16,16,0,0,0-22.62,0L40,149.37V56ZM40,172l52-52,80,80H40Zm176,28H194.63l-36-36,20-20L216,181.38V200ZM144,100a12,12,0,1,1,12,12A12,12,0,0,1,144,100Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=stats"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,200h-8V40a8,8,0,0,0-8-8H152a8,8,0,0,0-8,8V80H96a8,8,0,0,0-8,8v40H48a8,8,0,0,0-8,8v64H32a8,8,0,0,0,0,16H224a8,8,0,0,0,0-16ZM160,48h40V200H160ZM104,96h40V200H104ZM56,144H88v56H56Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=graphs"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232,208a8,8,0,0,1-8,8H32a8,8,0,0,1-8-8V48a8,8,0,0,1,16,0V156.69l50.34-50.35a8,8,0,0,1,11.32,0L128,132.69,180.69,80H160a8,8,0,0,1,0-16h40a8,8,0,0,1,8,8v40a8,8,0,0,1-16,0V91.31l-58.34,58.35a8,8,0,0,1-11.32,0L96,123.31l-56,56V200H224A8,8,0,0,1,232,208Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=referrals"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M254.3,107.91,228.78,56.85a16,16,0,0,0-21.47-7.15L182.44,62.13,130.05,48.27a8.14,8.14,0,0,0-4.1,0L73.56,62.13,48.69,49.7a16,16,0,0,0-21.47,7.15L1.7,107.9a16,16,0,0,0,7.15,21.47l27,13.51,55.49,39.63a8.06,8.06,0,0,0,2.71,1.25l64,16a8,8,0,0,0,7.6-2.1l55.07-55.08,26.42-13.21a16,16,0,0,0,7.15-21.46Zm-54.89,33.37L165,113.72a8,8,0,0,0-10.68.61C136.51,132.27,116.66,130,104,122L147.24,80h31.81l27.21,54.41ZM41.53,64,62,74.22,36.43,125.27,16,115.06Zm116,119.13L99.42,168.61l-49.2-35.14,28-56L128,64.28l9.8,2.59-45,43.68-.08.09a16,16,0,0,0,2.72,24.81c20.56,13.13,45.37,11,64.91-5L188,152.66Zm62-57.87-25.52-51L214.47,64,240,115.06Zm-87.75,92.67a8,8,0,0,1-7.75,6.06,8.13,8.13,0,0,1-1.95-.24L80.41,213.33a7.89,7.89,0,0,1-2.71-1.25L51.35,193.26a8,8,0,0,1,9.3-13l25.11,17.94L126,208.24A8,8,0,0,1,131.82,217.94Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=payouts"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,64H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,56V184a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64Zm0,128H56a8,8,0,0,1-8-8V78.63A23.84,23.84,0,0,0,56,80H216Zm-48-60a12,12,0,1,1,12,12A12,12,0,0,1,168,132Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=visits"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M88,24V16a8,8,0,0,1,16,0v8a8,8,0,0,1-16,0ZM16,104h8a8,8,0,0,0,0-16H16a8,8,0,0,0,0,16ZM124.42,39.16a8,8,0,0,0,10.74-3.58l8-16a8,8,0,0,0-14.31-7.16l-8,16A8,8,0,0,0,124.42,39.16Zm-96,81.69-16,8a8,8,0,0,0,7.16,14.31l16-8a8,8,0,1,0-7.16-14.31ZM219.31,184a16,16,0,0,1,0,22.63l-12.68,12.68a16,16,0,0,1-22.63,0L132.7,168,115,214.09c0,.1-.08.21-.13.32a15.83,15.83,0,0,1-14.6,9.59l-.79,0a15.83,15.83,0,0,1-14.41-11L32.8,52.92A16,16,0,0,1,52.92,32.8L213,85.07a16,16,0,0,1,1.41,29.8l-.32.13L168,132.69ZM208,195.31,156.69,144h0a16,16,0,0,1,4.93-26l.32-.14,45.95-17.64L48,48l52.2,159.86,17.65-46c0-.11.08-.22.13-.33a16,16,0,0,1,11.69-9.34,16.72,16.72,0,0,1,3-.28,16,16,0,0,1,11.3,4.69L195.31,208Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=coupons"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M232,104a8,8,0,0,0,8-8V64a16,16,0,0,0-16-16H32A16,16,0,0,0,16,64V96a8,8,0,0,0,8,8,24,24,0,0,1,0,48,8,8,0,0,0-8,8v32a16,16,0,0,0,16,16H224a16,16,0,0,0,16-16V160a8,8,0,0,0-8-8,24,24,0,0,1,0-48ZM32,167.2a40,40,0,0,0,0-78.4V64H88V192H32Zm192,0V192H104V64H224V88.8a40,40,0,0,0,0,78.4Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="tab=settings"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160Zm109.94-52.79a8,8,0,0,0-3.89-5.4l-29.83-17-.12-33.62a8,8,0,0,0-2.83-6.08,111.91,111.91,0,0,0-36.72-20.67,8,8,0,0,0-6.46.59L128,41.85,97.88,25a8,8,0,0,0-6.47-.6A112.1,112.1,0,0,0,54.73,45.15a8,8,0,0,0-2.83,6.07l-.15,33.65-29.83,17a8,8,0,0,0-3.89,5.4,106.47,106.47,0,0,0,0,41.56,8,8,0,0,0,3.89,5.4l29.83,17,.12,33.62a8,8,0,0,0,2.83,6.08,111.91,111.91,0,0,0,36.72,20.67,8,8,0,0,0,6.46-.59L128,214.15,158.12,231a7.91,7.91,0,0,0,3.9,1,8.09,8.09,0,0,0,2.57-.42,112.1,112.1,0,0,0,36.68-20.73,8,8,0,0,0,2.83-6.07l.15-33.65,29.83-17a8,8,0,0,0,3.89-5.4A106.47,106.47,0,0,0,237.94,107.21Zm-15,34.91-28.57,16.25a8,8,0,0,0-3,3c-.58,1-1.19,2.06-1.81,3.06a7.94,7.94,0,0,0-1.22,4.21l-.15,32.25a95.89,95.89,0,0,1-25.37,14.3L134,199.13a8,8,0,0,0-3.91-1h-.19c-1.21,0-2.43,0-3.64,0a8.08,8.08,0,0,0-4.1,1l-28.84,16.1A96,96,0,0,1,67.88,201l-.11-32.2a8,8,0,0,0-1.22-4.22c-.62-1-1.23-2-1.8-3.06a8.09,8.09,0,0,0-3-3.06l-28.6-16.29a90.49,90.49,0,0,1,0-28.26L61.67,97.63a8,8,0,0,0,3-3c.58-1,1.19-2.06,1.81-3.06a7.94,7.94,0,0,0,1.22-4.21l.15-32.25a95.89,95.89,0,0,1,25.37-14.3L122,56.87a8,8,0,0,0,4.1,1c1.21,0,2.43,0,3.64,0a8.08,8.08,0,0,0,4.1-1l28.84-16.1A96,96,0,0,1,188.12,55l.11,32.2a8,8,0,0,0,1.22,4.22c.62,1,1.23,2,1.8,3.06a8.09,8.09,0,0,0,3,3.06l28.6,16.29A90.49,90.49,0,0,1,222.9,142.12Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a[href*="action=logout"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M120,216a8,8,0,0,1-8,8H48a8,8,0,0,1-8-8V40a8,8,0,0,1,8-8h64a8,8,0,0,1,0,16H56V208h56A8,8,0,0,1,120,216Zm109.66-93.66-40-40a8,8,0,0,0-11.32,11.32L204.69,120H112a8,8,0,0,0,0,16h92.69l-26.35,26.34a8,8,0,0,0,11.32,11.32l40-40A8,8,0,0,0,229.66,122.34Z'/%3E%3C/svg%3E");
}

#affwp-affiliate-dashboard-tabs a:hover {
	border-color: var(--wp--preset--color--line-strong);
}

#affwp-affiliate-dashboard-tabs .active > a {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

/* log out isn't a section, so it reads as a quiet link at the end */
#affwp-affiliate-dashboard-tabs a[href*="action=logout"] {
	border-color: transparent;
	background: transparent;
	color: var(--wp--preset--color--body-grey);
}

#affwp-affiliate-dashboard-tabs a[href*="action=logout"]:hover {
	color: var(--wp--preset--color--ink);
}

@media (min-width: 768px) {
	#affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs {
		flex-wrap: wrap;
		margin: 0;
		padding: 0;
		overflow: visible;
	}

	#affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li:has(> a[href*="action=logout"]) {
		margin-left: auto;
	}
}

/* phones: the sections behind one button that opens them as a sheet from the bottom (a native popover, so no script); browsers without popover keep the pills */
.fp-tabs-toggle,
.fp-tabs-sheet__head {
	display: none;
}

@media (min-width: 768px) {
	.fp-tabs-sheet {
		display: contents;
	}
}

@supports selector(:popover-open) {
	@media (max-width: 767px) {
		.fp-tabs-toggle {
			display: flex;
			align-items: center;
			gap: 0.75rem;
			box-sizing: border-box;
			width: 100%;
			min-height: 3rem;
			padding: 0 2.75rem 0 1rem;
			border: 1px solid var(--wp--preset--color--line-strong);
			border-radius: 8px;
			background: var(--wp--preset--color--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%231c1917'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") right 1rem center / 1rem no-repeat;
			color: var(--wp--preset--color--ink);
			font-family: inherit;
			font-size: var(--wp--preset--font-size--medium);
			text-align: left;
			cursor: pointer;
		}

		.fp-tabs-toggle__label {
			color: var(--wp--preset--color--body-grey);
			font-family: var(--wp--preset--font-family--dm-mono);
			font-size: var(--wp--custom--font-size--label);
			font-weight: 500;
			letter-spacing: 0.1em;
			text-transform: uppercase;
		}

		.fp-tabs-sheet {
			inset: auto 0 0;
			box-sizing: border-box;
			width: 100%;
			max-width: none;
			height: auto;
			max-height: 85dvh;
			margin: 0;
			padding: 0.5rem var(--wp--style--root--padding-left, 1.5rem) calc(1.5rem + env(safe-area-inset-bottom));
			overflow-y: auto;
			border: 0;
			border-radius: 1rem 1rem 0 0;
			background: var(--wp--preset--color--white);
			color: var(--wp--preset--color--ink);
			translate: 0 100%;
		}

		.fp-tabs-sheet:popover-open {
			translate: 0 0;
		}

		/* a literal colour: older browsers don't pass custom properties to ::backdrop */
		.fp-tabs-sheet::backdrop {
			background: rgb(28 25 23 / 0.5);
		}

		html:has(.fp-tabs-sheet:popover-open) {
			overflow: hidden;
		}

		.fp-tabs-sheet__head {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 1rem;
			margin-bottom: 0.5rem;
		}

		.fp-tabs-sheet__title {
			margin: 0;
			font-family: var(--wp--preset--font-family--marcellus);
			font-size: var(--wp--preset--font-size--large);
		}

		.fp-tabs-sheet__close {
			display: inline-flex;
			align-items: center;
			gap: 0.5rem;
			min-height: 2.75rem;
			margin-right: -0.5rem;
			padding: 0 0.5rem;
			border: 0;
			background: none;
			color: var(--wp--preset--color--ink);
			font-family: var(--wp--preset--font-family--dm-mono);
			font-size: var(--wp--custom--font-size--label);
			font-weight: 500;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			cursor: pointer;
		}

		.fp-tabs-sheet__close::before {
			content: "";
			width: 1.125rem;
			height: 1.125rem;
			background: currentColor;
			-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
			mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E") center / contain no-repeat;
		}

		/* in the sheet: one section per full-width row, in sentence case at body size */
		#affwp-affiliate-dashboard .fp-tabs-sheet #affwp-affiliate-dashboard-tabs {
			flex-direction: column;
			gap: 0.25rem;
			margin: 0;
			padding: 0;
			overflow: visible;
		}

		#affwp-affiliate-dashboard .fp-tabs-sheet #affwp-affiliate-dashboard-tabs a {
			display: flex;
			gap: 0.875rem;
			min-height: 3rem;
			padding: 0 1rem;
			border: 0;
			border-radius: 8px;
			background: none;
			color: var(--wp--preset--color--ink);
			font-family: inherit;
			font-size: var(--wp--custom--font-size--body);
			font-weight: 400;
			letter-spacing: normal;
			text-transform: none;
		}

		#affwp-affiliate-dashboard .fp-tabs-sheet #affwp-affiliate-dashboard-tabs a::before {
			width: 1.25rem;
			height: 1.25rem;
		}

		/* touch screens keep :hover on the row under the tap that opened the sheet */
		@media (hover: hover) {
			#affwp-affiliate-dashboard .fp-tabs-sheet #affwp-affiliate-dashboard-tabs a:hover {
				background: var(--wp--preset--color--surface);
			}
		}

		#affwp-affiliate-dashboard .fp-tabs-sheet #affwp-affiliate-dashboard-tabs .active > a {
			background: var(--wp--preset--color--tint);
			font-weight: 500;
		}

		#affwp-affiliate-dashboard .fp-tabs-sheet #affwp-affiliate-dashboard-tabs li:has(> a[href*="action=logout"]) {
			margin-top: 0.5rem;
			padding-top: 0.5rem;
			border-top: 1px solid var(--wp--preset--color--line);
		}

		#affwp-affiliate-dashboard .fp-tabs-sheet #affwp-affiliate-dashboard-tabs a[href*="action=logout"] {
			color: var(--wp--preset--color--body-grey);
		}
	}

	@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
		.fp-tabs-sheet {
			transition: translate 0.3s var(--fp-ease-power2-out), display 0.3s allow-discrete, overlay 0.3s allow-discrete;
		}

		@starting-style {
			.fp-tabs-sheet:popover-open {
				translate: 0 100%;
			}
		}
	}
}

#affwp-affiliate-dashboard h4 {
	margin: 0 0 1rem;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 400;
	line-height: 1.2;
}

/* cards (affiliate link, link generator): the site's white card */
#affwp-affiliate-dashboard-url-generator {
	display: grid;
	gap: 1.5rem;
}

#affwp-affiliate-dashboard .affwp-card {
	--affwp-card-padding: clamp(1.25rem, 4vw, 1.75rem);
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
	box-shadow: none;
}

#affwp-affiliate-dashboard .affwp-card__header {
	padding: var(--affwp-card-padding) var(--affwp-card-padding) 1.25rem;
}

#affwp-affiliate-dashboard .affwp-card__header h3 {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.2;
}

#affwp-affiliate-dashboard .affwp-card__header p {
	margin-top: 0.375rem;
	color: var(--wp--preset--color--body-grey);
	font-size: var(--wp--preset--font-size--medium);
}

#affwp-affiliate-dashboard .affwp-card__tooltip {
	color: var(--wp--preset--color--body-grey);
}

/* tippy puts the help bubble inside the ? icon, which would hand it the icon's grey */
#affwp-affiliate-dashboard .tippy-box[data-theme~="affwp"] {
	border-radius: 0.5rem;
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--on-night);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.55;
	box-shadow: 0 8px 24px rgb(28 25 23 / 0.25);
}

#affwp-affiliate-dashboard .tippy-box[data-theme~="affwp"] .tippy-content p {
	margin-top: 0;
	color: inherit;
	font-size: inherit;
}

#affwp-affiliate-dashboard .tippy-box[data-theme~="affwp"] strong {
	color: var(--wp--preset--color--white);
}

#affwp-affiliate-dashboard .tippy-box[data-theme~="affwp"] > .tippy-arrow {
	color: var(--wp--preset--color--night);
}

/* copy link and other plain buttons: the site's outline pill; submits stay the red pill (theme.css) */
#affwp-affiliate-dashboard button.button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-height: 3rem;
	padding: 0 28px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

#affwp-affiliate-dashboard button.button:is(:hover, :focus-visible) {
	border-color: var(--wp--custom--color--outline-hover);
	background: var(--wp--custom--color--outline-hover);
	color: var(--wp--preset--color--white);
}

/* tables: one bordered card with mono column labels */
#affwp-affiliate-dashboard .affwp-table {
	width: 100%;
	margin: 0;
	border: 1px solid var(--wp--preset--color--line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	font-variant-numeric: tabular-nums;
	overflow: hidden;
}

#affwp-affiliate-dashboard .affwp-table :is(th, td) {
	padding: 0.875rem 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

#affwp-affiliate-dashboard .affwp-table th {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
	overflow-wrap: normal;
}

#affwp-affiliate-dashboard .affwp-table td.affwp-table-no-data {
	padding-block: 1.25rem;
	color: var(--wp--preset--color--body-grey);
}

#affwp-affiliate-dashboard .affwp-table:not(.affwp-table-responsive) tbody tr:last-child td {
	border-bottom: 0;
}

/* visits: affiliatewp's fixed column widths broke "converted" mid-word */
#affwp-affiliate-dashboard table#affwp-affiliate-dashboard-visits {
	table-layout: auto;
}

/* phones: each row is its own card, its cells labelled from affiliatewp's data-th */
#affwp-affiliate-dashboard .affwp-table-responsive:not(.affwp-hidden) {
	display: block;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

#affwp-affiliate-dashboard .affwp-table-responsive thead {
	display: none;
}

#affwp-affiliate-dashboard .affwp-table-responsive tbody {
	display: grid;
	gap: 0.75rem;
}

#affwp-affiliate-dashboard .affwp-table-responsive tr {
	display: grid;
	padding: 0.25rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
}

#affwp-affiliate-dashboard .affwp-table-responsive td {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 0.75rem 0;
	background: none;
	text-align: right;
}

#affwp-affiliate-dashboard .affwp-table-responsive td:last-child {
	border-bottom: 0;
}

#affwp-affiliate-dashboard .affwp-table-responsive td::before {
	content: attr(data-th);
	display: block;
	flex: none;
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-align: left;
	text-transform: uppercase;
}

#affwp-affiliate-dashboard .affwp-table-responsive td.affwp-table-no-data {
	display: block;
	padding-block: 1rem;
	text-align: left;
}

#affwp-affiliate-dashboard .affwp-table-responsive td.affwp-table-no-data::before {
	content: none;
}

@media (min-width: 768px) {
	#affwp-affiliate-dashboard .affwp-table-responsive:not(.affwp-hidden) {
		display: table;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 1rem;
		background: var(--wp--preset--color--white);
		overflow: hidden;
	}

	#affwp-affiliate-dashboard .affwp-table-responsive thead {
		display: table-header-group;
	}

	#affwp-affiliate-dashboard .affwp-table-responsive tbody {
		display: table-row-group;
	}

	#affwp-affiliate-dashboard .affwp-table-responsive tr {
		display: table-row;
	}

	#affwp-affiliate-dashboard .affwp-table-responsive td {
		display: table-cell;
		padding: 0.875rem 1.25rem;
		text-align: left;
	}

	#affwp-affiliate-dashboard .affwp-table-responsive td:last-child {
		border-bottom: 1px solid var(--wp--preset--color--line);
	}

	#affwp-affiliate-dashboard .affwp-table-responsive tbody tr:last-child td {
		border-bottom: 0;
	}

	#affwp-affiliate-dashboard .affwp-table-responsive td::before {
		content: none;
	}

	/* an empty table's message spans the whole row again */
	#affwp-affiliate-dashboard .affwp-table-responsive td.affwp-table-no-data {
		display: table-cell;
		padding: 1.25rem;
	}
}

/* statistics and payouts: each figure is a tile, label over value, like the facts strip */
#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) .affwp-table {
	display: block;
	border: 0;
	border-radius: 0;
	background: none;
	overflow: visible;
}

#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) thead {
	display: none;
}

#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) tbody {
	display: block;
}

#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) tr {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	padding: 0;
	border: 0;
	background: none;
}

#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) td,
#affwp-affiliate-dashboard .affwp-payout-summary__stat,
.fp-dash__stat {
	display: grid;
	gap: 0.375rem;
	align-content: space-between;
	padding: 1rem 1.25rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--marcellus);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.1;
	text-align: left;
}

/* an odd last tile takes the whole row instead of leaving an empty cell */
#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) td:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) td::before {
	content: attr(data-th);
}

#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) td::before,
#affwp-affiliate-dashboard .affwp-payout-summary__label,
.fp-dash__stat dt {
	display: block;
	margin: 0;
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

#affwp-affiliate-dashboard .affwp-payout-summary {
	gap: 0.75rem;
	margin: 0 0 1.5rem;
}

#affwp-affiliate-dashboard .affwp-payout-summary__value {
	font-size: inherit;
	font-weight: 400;
}

@media (min-width: 768px) {
	#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) tr {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	#affwp-affiliate-dashboard :is(#affwp-affiliate-dashboard-referral-counts, #affwp-affiliate-dashboard-earnings-stats) td:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* graphs: the period filter sits on one row; the chart below is our own (functions.php) */
#affwp-affiliate-dashboard #affwp-graphs-filter {
	margin: 0 0 1rem;
}

#affwp-graphs-filter .tablenav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

#affwp-graphs-filter select {
	flex: 1 1 12rem;
	width: auto;
	max-width: 20rem;
}

#affwp-graphs-filter [type="submit"] {
	margin-top: 0;
}

#affwp-date-range-options {
	flex-basis: 100%;
}

/* "custom" shows the from and to fields (affiliatewp's chart script used to; its inline display:none needs the !important) */
#affwp-graphs-filter:has(option[value="other"]:checked) #affwp-date-range-options {
	display: block !important;
}

#affwp-date-range-options .affwp-search-date {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

#affwp-date-range-options .affwp-search-date > span {
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

#affwp-date-range-options input {
	flex: 1 1 9rem;
	width: auto;
}

/* earnings chart: bars stacked paid, unpaid, pending from the bottom; the shades differ in lightness as well as hue, and a bar's amounts show on hover or focus */
.fp-earnings {
	--fp-paid: var(--wp--custom--color--status-good);
	--fp-unpaid: var(--wp--preset--color--line-strong);
	--fp-pending: color-mix(in srgb, var(--wp--custom--color--status-attention) 55%, var(--wp--preset--color--white));
	--fp-chart-height: 11rem;
}

.fp-earnings__totals {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin: 0 0 1rem;
}

.fp-earnings__total {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.fp-earnings__total dt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fp-earnings__total:not(.fp-earnings__total--rejected) dt::before {
	content: "";
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 3px;
	background: var(--fp-swatch);
}

.fp-earnings__total dd {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

.fp-earnings__total--paid,
.fp-earnings__segment--paid {
	--fp-swatch: var(--fp-paid);
}

.fp-earnings__total--unpaid,
.fp-earnings__segment--unpaid {
	--fp-swatch: var(--fp-unpaid);
}

.fp-earnings__total--pending,
.fp-earnings__segment--pending {
	--fp-swatch: var(--fp-pending);
}

.fp-earnings__chart {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.75rem;
	margin: 0;
	padding: 1.5rem 1rem 0.75rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
}

.fp-earnings__axis {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: var(--fp-chart-height);
	margin-top: -0.6em;
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	line-height: 1.2;
	text-align: right;
}

.fp-earnings__bars {
	display: flex;
	align-items: stretch;
	gap: 3px;
	height: var(--fp-chart-height);
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
	background:
		linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) top / 100% 1px no-repeat,
		linear-gradient(var(--wp--preset--color--line), var(--wp--preset--color--line)) center / 100% 1px no-repeat,
		linear-gradient(var(--wp--preset--color--line-strong), var(--wp--preset--color--line-strong)) bottom / 100% 1px no-repeat;
}

.fp-earnings__bars--dense {
	gap: 1px;
}

.fp-earnings__bar {
	position: relative;
	flex: 1;
	display: flex;
	flex-direction: column-reverse;
	min-width: 0;
	margin: 0;
	border-radius: 4px 4px 0 0;
	outline-offset: 2px;
}

.fp-earnings__bar[tabindex]:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--surface);
}

.fp-earnings__segment {
	flex: none;
	background: var(--fp-swatch);
}

.fp-earnings__segment:last-of-type {
	border-radius: 3px 3px 0 0;
}

.fp-earnings__tip {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 50%;
	z-index: 2;
	display: grid;
	gap: 0.125rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity 0.15s;
}

.fp-earnings__bar--start .fp-earnings__tip {
	left: 0;
	transform: none;
}

.fp-earnings__bar--end .fp-earnings__tip {
	right: 0;
	left: auto;
	transform: none;
}

.fp-earnings__bar:is(:hover, :focus-visible) .fp-earnings__tip {
	opacity: 1;
}

.fp-earnings__tip strong {
	font-weight: 500;
}

.fp-earnings__label {
	position: absolute;
	top: calc(100% + 0.5rem);
	left: 50%;
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	line-height: 1.2;
	white-space: nowrap;
	transform: translateX(-50%);
}

/* dates sit centred under their bar; the first and last line up with the chart's edges */
.fp-earnings__bar:first-child .fp-earnings__label {
	left: 0;
	transform: none;
}

.fp-earnings__bar:last-child .fp-earnings__label {
	right: 0;
	left: auto;
	transform: none;
}

/* phones show every other date */
@media (max-width: 767px) {
	.fp-earnings__label--minor {
		display: none;
	}
}

@media (min-width: 768px) {
	.fp-earnings {
		--fp-chart-height: 15rem;
	}

	.fp-earnings__chart {
		padding: 1.75rem 1.5rem 1rem;
	}
}

/* empty tabs (no creatives, no coupons): a quiet panel rather than a stray line */
#affwp-affiliate-dashboard :is(.affwp-no-results, #affwp-affiliate-dashboard-coupons > p:only-of-type) {
	margin: 0;
	padding: 1.5rem;
	border-radius: 1rem;
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--body-grey);
}

/* creatives: the view switch beside the heading, the filter pills under it; the list is one card (a card per creative on phones), the grid a set of cards */
#affwp-affiliate-dashboard-creatives {
	container-type: inline-size;
	--fp-icon-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M165.66,90.34a8,8,0,0,1,0,11.32l-64,64a8,8,0,0,1-11.32-11.32l64-64A8,8,0,0,1,165.66,90.34ZM215.6,40.4a56,56,0,0,0-79.2,0L106.34,70.45a8,8,0,0,0,11.32,11.32l30.06-30a40,40,0,0,1,56.57,56.56l-30.07,30.06a8,8,0,0,0,11.31,11.32L215.6,119.6a56,56,0,0,0,0-79.2ZM138.34,174.22l-30.06,30.06a40,40,0,1,1-56.56-56.57l30.05-30.05a8,8,0,0,0-11.32-11.32L40.4,136.4a56,56,0,0,0,79.2,79.2l30.06-30.07a8,8,0,0,0-11.32-11.31Z'/%3E%3C/svg%3E");
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1rem 1.5rem;
}

#affwp-affiliate-dashboard-creatives > * {
	grid-column: 1 / -1;
	margin: 0;
}

#affwp-affiliate-dashboard #affwp-affiliate-dashboard-creatives > h4 {
	grid-row: 1;
	grid-column: 1;
	margin: 0;
}

#affwp-affiliate-dashboard-creatives > .affwp-creatives-filters {
	grid-row: 1;
	grid-column: 2;
	justify-content: end;
	margin: 0;
}

/* the type filter: the dashboard's pills, the current one red */
#affwp-affiliate-dashboard-creatives .affwp-creatives-types-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	background: none;
	list-style: none;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-types-menu a {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.75rem;
	padding: 0 1.125rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-types-menu a:hover {
	border-color: var(--wp--preset--color--line-strong);
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-types-menu a span {
	color: var(--wp--preset--color--body-grey);
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-types-menu .active a {
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-types-menu .active a span {
	color: inherit;
}

/* list or grid: two round buttons in one pill, the current one shaded */
#affwp-affiliate-dashboard-creatives .affwp-view-switcher {
	display: flex;
	margin: 0;
	padding: 0.1875rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
}

#affwp-affiliate-dashboard-creatives .affwp-view-switcher li,
#affwp-affiliate-dashboard-creatives .affwp-view-switcher li:hover:not(.active) {
	background: none;
}

#affwp-affiliate-dashboard-creatives .affwp-view-switcher .affwp-view-switcher__button {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	color: var(--wp--preset--color--body-grey);
	transition: background-color 0.2s, color 0.2s;
}

#affwp-affiliate-dashboard-creatives .affwp-view-switcher svg {
	color: inherit;
}

#affwp-affiliate-dashboard-creatives .affwp-view-switcher a:hover,
#affwp-affiliate-dashboard-creatives .affwp-view-switcher .active .affwp-view-switcher__button {
	background: var(--wp--preset--color--tint);
	color: var(--wp--preset--color--ink);
}

/* previews: a stone tile; a text link shows a link icon in the list, where its words would be too small */
#affwp-affiliate-dashboard-creatives .affwp-creative-preview {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding: 0.375rem;
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--tint);
}

#affwp-affiliate-dashboard-creatives .affwp-creative-preview :is(img, canvas) {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative-preview {
	flex: none;
	width: 4.5rem;
	height: 4.5rem;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative[data-type="text_link"] .affwp-creative-preview {
	font-size: 0;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative[data-type="text_link"] .affwp-creative-preview::before {
	content: "";
	width: 1.75rem;
	height: 1.75rem;
	background: var(--wp--preset--color--ink);
	-webkit-mask: var(--fp-icon-link) center / contain no-repeat;
	mask: var(--fp-icon-link) center / contain no-repeat;
}

#affwp-affiliate-dashboard-creatives .affwp-creative-name {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: 1.35;
}

#affwp-affiliate-dashboard-creatives :is(.affwp-creative-id, .affwp-creative-size, .affwp-creatives-list-column-label) {
	margin: 0;
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

#affwp-affiliate-dashboard-creatives .affwp-creative-id {
	margin-top: 0.25rem;
}

#affwp-affiliate-dashboard-creatives :is(.affwp-creative-type, .affwp-creative-last-updated) {
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
}

#affwp-affiliate-dashboard-creatives .affwp-creative-last-updated {
	color: var(--wp--preset--color--body-grey);
}

/* view details: the dashboard's outline pill, always shown (affiliatewp shows it on hover only, which keyboards and touch screens never get) */
#affwp-affiliate-dashboard-creatives .affwp-creatives-item-actions button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	visibility: visible;
	opacity: 1;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-item-actions button:is(:hover, :focus-visible),
#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative:hover .affwp-creatives-item-actions button {
	border-color: var(--wp--custom--color--outline-hover);
	background: var(--wp--custom--color--outline-hover);
	color: var(--wp--preset--color--white);
}

/* until the list has room for a table: each creative is a card, the thumbnail beside its name, type and date side by side, the button across */
#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	gap: 0.75rem;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-list-header {
	display: none;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creatives-table-cell,
#affwp-affiliate-dashboard-creatives .affwp-creatives-list-column-label {
	display: block;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative > .affwp-creatives-item-actions {
	position: static;
	display: block;
	width: auto;
	height: auto;
	padding: 0;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: auto 1fr auto;
	align-items: start;
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative > [data-column="name"],
#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creatives-item-actions {
	grid-column: 1 / -1;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative-name-wrap {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

#affwp-affiliate-dashboard-creatives .affwp-creative-name-details > .affwp-creatives-list-column-label {
	display: none;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-list-column-label {
	margin-bottom: 0.25rem;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creatives-item-actions button {
	width: 100%;
	min-height: 3rem;
}

/* grid: cards with the preview on top and the name allowed two lines */
#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid {
	--gap: 0.75rem;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid .affwp-creative {
	padding: 0.625rem;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
	transition: border-color 0.2s;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid .affwp-creative:is(:hover, :focus-within) {
	border-color: var(--wp--preset--color--line-strong);
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid .affwp-creative > [data-modal] {
	display: grid;
	gap: 0.5rem;
	height: 100%;
	align-content: start;
	border-radius: 0.5rem;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid .affwp-creative-preview {
	height: auto;
	margin: 0;
	padding: 0.75rem;
	aspect-ratio: 1;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid .affwp-creative[data-type="text_link"] .affwp-creative-preview {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid .affwp-creative-name {
	display: -webkit-box;
	overflow: hidden;
	padding: 0 0.25rem;
	white-space: normal;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid [data-content="type"] {
	display: flex;
	flex-wrap: wrap;
	gap: 0 0.75rem;
	padding: 0 0.25rem 0.25rem;
}

#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid .affwp-creative-type {
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* a list 50rem wide or more: one card with a header row; every row keeps a column for the button, which affiliatewp lays over the whole row so a click anywhere opens it */
@container (min-width: 50rem) {
	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list {
		display: block;
		overflow: hidden;
		border: 1px solid var(--wp--preset--color--line);
		border-radius: 1rem;
		background: var(--wp--preset--color--white);
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creatives-table-row {
		display: grid;
		grid-template-columns: minmax(0, 3fr) minmax(0, 1.25fr) minmax(0, 1.5fr) 10rem;
		grid-template-rows: none;
		align-items: center;
		gap: 1.5rem;
		padding: 1rem 1.25rem;
		border: 0;
		border-radius: 0;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative {
		border-top: 1px solid var(--wp--preset--color--line);
		background: none;
		transition: background-color 0.2s;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative:hover {
		background: var(--wp--preset--color--surface);
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative > [data-column="name"] {
		grid-column: auto;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-list-header {
		padding-block: 0.875rem;
		background: var(--wp--preset--color--surface);
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-list-header a {
		color: var(--wp--preset--color--body-grey);
		font-family: var(--wp--preset--font-family--dm-mono);
		font-size: var(--wp--custom--font-size--label);
		font-weight: 500;
		letter-spacing: 0.1em;
		line-height: 1.4;
		text-decoration: none;
		text-transform: uppercase;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-list-header a:hover,
	#affwp-affiliate-dashboard-creatives .affwp-creatives-list-header [data-sorted="true"] a {
		color: var(--wp--preset--color--ink);
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-list-header a:hover {
		text-decoration: underline;
		text-underline-offset: 0.2em;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creatives-table-cell {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 0.25rem;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-list-column-label {
		display: none;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative-preview {
		width: 5rem;
		height: 5rem;
	}

	/* the whole row, padding included, is the overlay's box */
	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creative > .affwp-creatives-item-actions {
		position: absolute;
		inset: 0;
		grid-column: auto;
		display: flex;
		align-items: center;
		justify-content: end;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 0 1.25rem;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creatives-item-actions button {
		width: auto;
		min-height: 2.75rem;
	}
}

@media (min-width: 768px) {
	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-list .affwp-creatives-table-row:hover .affwp-creative-last-updated {
		opacity: 1;
	}

	#affwp-affiliate-dashboard-creatives .affwp-creatives-view--as-grid {
		--gap: 1.25rem;
	}
}

/* creative details: affiliatewp's fancybox modal, printed in the footer outside the dashboard; a white sheet on a night backdrop */
#affwp-modal-container .fancybox__backdrop {
	--fancybox-bg: rgb(28 25 23 / 0.6);
}

#affwp-modal-container .fancybox__slide {
	padding: 1rem 1rem 5.5rem;
}

#affwp-modal-container #affwp-creatives-modal {
	box-sizing: border-box;
	width: 100%;
	max-width: 46rem;
	gap: 1.5rem;
	padding: clamp(1.25rem, 5vw, 2.5rem);
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.6;
}

#affwp-creatives-modal h1.affwp-creative-name {
	margin: 0 3rem 0.5rem 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--marcellus);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
}

#affwp-creatives-modal .affwp-creative-subtitle {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0 0.5rem;
	color: var(--wp--preset--color--body-grey);
	font-size: var(--wp--preset--font-size--medium);
}

#affwp-creatives-modal .affwp-creative-separator {
	margin: 0;
}

/* small phones: the date takes its own line rather than leaving a dot at the end of one */
@media (max-width: 479px) {
	#affwp-creatives-modal .affwp-creative-separator:has(+ [data-column="date_updated"]) {
		display: none;
	}

	#affwp-creatives-modal .affwp-creative-subtitle > [data-column="date_updated"] {
		flex-basis: 100%;
	}
}

#affwp-creatives-modal .affwp-creative-description {
	max-width: 60ch;
	font-size: var(--wp--custom--font-size--body);
}

#affwp-creatives-modal .affwp-creative-section-preview {
	gap: 0.75rem;
}

#affwp-creatives-modal .affwp-creative-section-title {
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.4;
	text-transform: uppercase;
}

#affwp-creatives-modal .affwp-creative-preview {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 6rem;
	padding: clamp(1rem, 4vw, 2rem);
	border: 0;
	border-radius: 8px;
	background: var(--wp--preset--color--tint);
}

#affwp-creatives-modal .affwp-creative-preview :is(img, canvas) {
	display: block;
	max-width: 100%;
	max-height: min(22rem, 45vh);
	width: auto;
	height: auto;
	object-fit: contain;
}

#affwp-creatives-modal[data-type="text_link"] .affwp-creative-preview {
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--custom--font-size--body);
	text-align: center;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

#affwp-creatives-modal .affwp-creative-details {
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
}

#affwp-creatives-modal .affwp-creative-file-extension {
	font-weight: 500;
}

#affwp-creatives-modal .affwp-creative-file-details {
	flex-wrap: wrap;
	gap: 0 0.5rem;
	color: var(--wp--preset--color--body-grey);
}

/* download and print: outline pills; copy code: the red primary pill, since pasting the code is what an affiliate came for */
#affwp-creatives-modal :is(.affwp-download-button, .affwp-print-button, [data-action="copy"]) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 1.25rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.2s, background-color 0.2s, color 0.2s, transform 0.2s;
}

#affwp-creatives-modal :is(.affwp-download-button, .affwp-print-button):is(:hover, :focus-visible) {
	border-color: var(--wp--custom--color--outline-hover);
	background: var(--wp--custom--color--outline-hover);
	color: var(--wp--preset--color--white);
}

#affwp-creatives-modal :is(.affwp-download-button, .affwp-print-button, [data-action="copy"])::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: var(--fp-icon) center / contain no-repeat;
	mask: var(--fp-icon) center / contain no-repeat;
}

#affwp-creatives-modal .affwp-download-button {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,144v64a8,8,0,0,1-8,8H40a8,8,0,0,1-8-8V144a8,8,0,0,1,16,0v56H208V144a8,8,0,0,1,16,0Zm-101.66,5.66a8,8,0,0,0,11.32,0l40-40a8,8,0,0,0-11.32-11.32L136,124.69V32a8,8,0,0,0-16,0v92.69L93.66,98.34a8,8,0,0,0-11.32,11.32Z'/%3E%3C/svg%3E");
}

#affwp-creatives-modal .affwp-print-button {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M214.67,72H200V40a8,8,0,0,0-8-8H64a8,8,0,0,0-8,8V72H41.33C27.36,72,16,82.77,16,96v80a8,8,0,0,0,8,8H56v32a8,8,0,0,0,8,8H192a8,8,0,0,0,8-8V184h32a8,8,0,0,0,8-8V96C240,82.77,228.64,72,214.67,72ZM72,48H184V72H72ZM184,208H72V160H184Zm40-40H200V152a8,8,0,0,0-8-8H64a8,8,0,0,0-8,8v16H32V96c0-4.41,4.19-8,9.33-8H214.67c5.14,0,9.33,3.59,9.33,8Zm-24-52a12,12,0,1,1-12-12A12,12,0,0,1,200,116Z'/%3E%3C/svg%3E");
	margin-left: auto;
}

#affwp-creatives-modal [data-action="copy"] {
	--fp-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,32H88a8,8,0,0,0-8,8V80H40a8,8,0,0,0-8,8V216a8,8,0,0,0,8,8H168a8,8,0,0,0,8-8V176h40a8,8,0,0,0,8-8V40A8,8,0,0,0,216,32ZM160,208H48V96H160Zm48-48H176V88a8,8,0,0,0-8-8H96V48H208Z'/%3E%3C/svg%3E");
	align-self: start;
	min-height: 3rem;
	padding: 0 1.75rem;
	border-color: var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

#affwp-creatives-modal [data-action="copy"]:hover {
	border-color: var(--wp--preset--color--accent-dark);
	background: var(--wp--preset--color--accent-dark);
}

@media (prefers-reduced-motion: no-preference) {
	#affwp-creatives-modal :is(.affwp-download-button, .affwp-print-button, [data-action="copy"]):active {
		transform: scale(0.98);
	}
}

#affwp-creatives-modal .affwp-creative-section-code {
	margin: 0;
	padding-top: 1.5rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

#affwp-creatives-modal .affwp-creative-copy-form {
	align-items: stretch;
	gap: 0.75rem;
}

#affwp-creatives-modal .affwp-creative-copy-form p {
	margin: 0.25rem 0 0;
	color: var(--wp--preset--color--body-grey);
}

#affwp-creatives-modal .affwp-copy-textarea-content {
	box-sizing: border-box;
	min-height: 7.5rem;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: 0.9375rem;
	line-height: 1.6;
}

#affwp-creatives-modal .affwp-copy-textarea-content:focus {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}

/* the close button sits inside the sheet's corner at every width, 44px across */
#affwp-modal-container .fancybox__content > .f-button.is-close-btn {
	--f-button-width: 2.75rem;
	--f-button-height: 2.75rem;
	--f-button-border-radius: 999px;
	--f-button-color: var(--wp--preset--color--ink);
	--f-button-hover-color: var(--wp--preset--color--ink);
	--f-button-bg: var(--wp--preset--color--tint);
	--f-button-hover-bg: var(--wp--preset--color--line);
	--f-button-active-bg: var(--wp--preset--color--line);
	--f-button-svg-width: 1.125rem;
	--f-button-svg-height: 1.125rem;
	top: 0.75rem;
	right: 0.75rem;
	opacity: 1;
}

/* previous and next: white circles; on phones they sit in the screen's bottom corners, and the sheet leaves room for them at its foot */
#affwp-modal-container .fancybox__nav .f-button:is(.is-prev, .is-next) {
	--f-button-width: 3rem;
	--f-button-height: 3rem;
	--f-button-border-radius: 999px;
	--f-button-color: var(--wp--preset--color--ink);
	--f-button-hover-color: var(--wp--preset--color--ink);
	--f-button-bg: var(--wp--preset--color--white);
	--f-button-hover-bg: var(--wp--preset--color--tint);
	--f-button-svg-width: 1.25rem;
	--f-button-svg-height: 1.25rem;
	--f-button-svg-stroke-width: 2;
	--f-button-shadow: 0 2px 10px rgb(28 25 23 / 0.2);
	top: auto;
	bottom: 1rem;
	transform: none;
}

#affwp-modal-container .fancybox__nav .f-button.is-prev {
	left: 1rem;
}

#affwp-modal-container .fancybox__nav .f-button.is-next {
	right: 1rem;
}

#affwp-modal-container .fancybox__nav .f-button[disabled] {
	opacity: 0.4;
}

@media (min-width: 768px) {
	#affwp-modal-container .fancybox__slide {
		padding: 2.5rem 5rem;
	}

	#affwp-modal-container .fancybox__nav .f-button:is(.is-prev, .is-next) {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}

	/* 1.5rem beside the 46rem sheet */
	#affwp-modal-container .fancybox__nav .f-button.is-prev {
		left: max(1rem, calc(50% - 27.5rem));
	}

	#affwp-modal-container .fancybox__nav .f-button.is-next {
		right: max(1rem, calc(50% - 27.5rem));
	}
}

@media (max-width: 479px) {
	#affwp-creatives-modal .affwp-creative-details > button,
	#affwp-creatives-modal [data-action="copy"] {
		flex: 1 1 100%;
		align-self: stretch;
	}
}

/* settings */
#affwp-affiliate-dashboard-profile-form {
	display: grid;
	gap: 1.5rem;
	margin: 0;
}

#affwp-affiliate-dashboard-profile-form > * {
	margin: 0;
}

#affwp-affiliate-dashboard-profile-form h4 {
	margin: 0.5rem 0 -0.5rem;
}

#affwp-affiliate-dashboard .affwp-wrap {
	display: grid;
	gap: 0.5rem;
	margin: 0;
}

#affwp-affiliate-dashboard .affwp-wrap .description {
	margin: 0;
	color: var(--wp--preset--color--body-grey);
	font-size: var(--wp--preset--font-size--medium);
}

#affwp-affiliate-dashboard .affwp-send-notifications-wrap {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

#affwp-affiliate-dashboard input[type="checkbox"] {
	width: 1.25rem;
	height: 1.25rem;
	margin: 0;
	box-shadow: none;
	accent-color: var(--wp--preset--color--accent);
}

#affwp-affiliate-dashboard-profile-form [type="submit"] {
	margin-top: 0;
}

/* dashboard header (functions.php): a night card with the greeting and the affiliate's link, like the site's closing panels */
.fp-dash__hello {
	display: grid;
	gap: 1.25rem;
	padding: clamp(1.5rem, 4vw, 2rem);
	border-radius: 1rem;
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--on-night);
}

.fp-dash__hello :focus-visible {
	outline-color: var(--wp--preset--color--on-night);
}

.fp-dash__greeting {
	margin: 0;
	font-family: var(--wp--preset--font-family--marcellus);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}

.fp-dash__link {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.fp-dash__link label {
	color: var(--wp--preset--color--on-night-muted);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.fp-dash__link-row {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.fp-dash__link input {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	min-height: 3rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--wp--preset--color--on-night-muted);
	border-radius: 8px;
	background: transparent;
	color: var(--wp--preset--color--on-night);
	font: inherit;
	font-size: var(--wp--custom--font-size--body);
	cursor: pointer;
}

/* copy link is the dashboard's main action, so it's the site's red pill, as on the other forms */
.fp-dash__copy {
	min-height: 3rem;
	padding: 0 28px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.5;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.2s, background-color 0.2s;
}

.fp-dash__copy:hover {
	background: var(--wp--preset--color--accent-dark);
}

@media (prefers-reduced-motion: no-preference) {
	.fp-dash__copy:hover {
		transform: translateY(-1px);
	}

	.fp-dash__copy:active {
		transform: scale(0.98);
	}
}

@media (min-width: 480px) {
	.fp-dash__link-row {
		flex-direction: row;
	}

	.fp-dash__copy {
		flex: none;
	}
}

/* a tab's blocks (statistics has three) keep the dashboard's rhythm inside their panel */
.fp-dash__panel {
	display: grid;
	gap: 1.5rem;
	min-width: 0;
}

/* the overview's figures: two across on phones, one row from 768px (three or four tiles) */
.fp-dash__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin: 0;
}

.fp-dash__stat:last-child:nth-child(odd) {
	grid-column: 1 / -1;
}

.fp-dash__stat dd {
	margin: 0;
}

.fp-dash__stat .fp-dash__trend {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-sans);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.4;
}

/* with a trend line: label and figure at the top (so figures line up across tiles), the trend at the foot */
.fp-dash__stat:has(.fp-dash__trend) {
	grid-template-rows: auto auto 1fr;
	align-content: stretch;
}

.fp-dash__stat .fp-dash__trend {
	align-self: end;
}

/* the arrow carries the direction for everyone; green or red only when the change is clear (functions.php decides) */
.fp-dash__trend:is(.fp-dash__trend--up, .fp-dash__trend--down)::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--fp-trend-icon) center / contain no-repeat;
	mask: var(--fp-trend-icon) center / contain no-repeat;
}

.fp-dash__trend--up {
	--fp-trend-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,56v64a8,8,0,0,1-16,0V75.31l-82.34,82.35a8,8,0,0,1-11.32,0L96,123.31,29.66,189.66a8,8,0,0,1-11.32-11.32l72-72a8,8,0,0,1,11.32,0L136,140.69,212.69,64H168a8,8,0,0,1,0-16h64A8,8,0,0,1,240,56Z'/%3E%3C/svg%3E");
}

.fp-dash__trend--down {
	--fp-trend-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M240,128v64a8,8,0,0,1-8,8H168a8,8,0,0,1,0-16h44.69L136,107.31l-34.34,34.35a8,8,0,0,1-11.32,0l-72-72A8,8,0,0,1,29.66,58.34L96,124.69l34.34-34.35a8,8,0,0,1,11.32,0L224,172.69V128a8,8,0,0,1,16,0Z'/%3E%3C/svg%3E");
}

.fp-dash__stat .fp-dash__trend--up.fp-dash__trend--clear {
	color: var(--wp--custom--color--status-good);
}

.fp-dash__stat .fp-dash__trend--down.fp-dash__trend--clear {
	color: var(--wp--preset--color--accent-dark);
}

@media (min-width: 768px) {
	.fp-dash__stats {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
	}

	.fp-dash__stat:last-child:nth-child(odd) {
		grid-column: auto;
	}
}

/* overview sections: last 30 days, all-time, recent referrals */
#fp-dash-overview {
	display: grid;
	gap: 2.5rem;
}

.fp-dash__more {
	margin: 1rem 0 0;
}

/* status pills: an icon and a word, never colour alone; paid green, pending amber, rejected red (pale, so it never reads as a red button), unpaid neutral because it's money on its way */
#affwp-affiliate-dashboard .affwp-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.625rem;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 999px;
	background: none;
	color: var(--wp--preset--color--body-grey);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.08em;
	line-height: 1.6;
	text-transform: uppercase;
}

#affwp-affiliate-dashboard :is(.affwp-badge--success, .affwp-badge--warning, .affwp-badge--info, .affwp-badge--danger)::before {
	content: "";
	flex: none;
	width: 0.875rem;
	height: 0.875rem;
	background: currentColor;
	-webkit-mask: var(--fp-badge-icon) center / contain no-repeat;
	mask: var(--fp-badge-icon) center / contain no-repeat;
}

/* paid, completed */
#affwp-affiliate-dashboard .affwp-badge--success {
	--fp-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E");
	border-color: var(--wp--custom--color--status-good-soft);
	background: var(--wp--custom--color--status-good-soft);
	color: var(--wp--custom--color--status-good);
}

/* unpaid, partial: earned and waiting for the payout, so neutral */
#affwp-affiliate-dashboard .affwp-badge--warning {
	--fp-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M216,64H56a8,8,0,0,1,0-16H192a8,8,0,0,0,0-16H56A24,24,0,0,0,32,56V184a24,24,0,0,0,24,24H216a16,16,0,0,0,16-16V80A16,16,0,0,0,216,64Zm0,128H56a8,8,0,0,1-8-8V78.63A23.84,23.84,0,0,0,56,80H216Zm-48-60a12,12,0,1,1,12,12A12,12,0,0,1,168,132Z'/%3E%3C/svg%3E");
}

/* pending, processing */
#affwp-affiliate-dashboard .affwp-badge--info {
	--fp-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm0,192a88,88,0,1,1,88-88A88.1,88.1,0,0,1,128,216Zm64-88a8,8,0,0,1-8,8H128a8,8,0,0,1-8-8V72a8,8,0,0,1,16,0v48h48A8,8,0,0,1,192,128Z'/%3E%3C/svg%3E");
	border-color: var(--wp--custom--color--status-attention-soft);
	background: var(--wp--custom--color--status-attention-soft);
	color: var(--wp--custom--color--status-attention);
}

/* rejected, failed */
#affwp-affiliate-dashboard .affwp-badge--danger {
	--fp-badge-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z'/%3E%3C/svg%3E");
	border-color: var(--wp--preset--color--accent-soft);
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--accent-dark);
}

/* desktop on a normal page: wider than the reading column, header across the top, sidebar beside the tab; only for an active affiliate (a pending one sees just a notice) */
@media (min-width: 1024px) {
	body:has(.fp-prose #affwp-affiliate-dashboard-tabs) {
		--fp-dash-width: 72rem;
	}

	/* the page title lines up with the dashboard's left edge */
	body:has(.fp-prose #affwp-affiliate-dashboard-tabs) main > .is-style-section-light > .wp-block-post-title {
		max-width: var(--fp-dash-width);
	}

	.fp-prose #affwp-affiliate-dashboard:has(#affwp-affiliate-dashboard-tabs) {
		max-width: var(--fp-dash-width);
		grid-template-columns: 14rem minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;
		column-gap: clamp(2rem, 4vw, 4rem);
		row-gap: 0;
		align-items: start;
	}

	/* rows: header, notices (usually empty, so spacing is margins, not gaps), tab */
	.fp-prose #affwp-affiliate-dashboard:has(#affwp-affiliate-dashboard-tabs) > * {
		grid-column: 2;
		grid-row: 2;
		margin-bottom: 1.5rem;
	}

	.fp-prose #affwp-affiliate-dashboard:has(#affwp-affiliate-dashboard-tabs) > .fp-dash__hello {
		grid-column: 1 / -1;
		grid-row: 1;
		grid-template-columns: minmax(0, 1fr) minmax(0, 32rem);
		align-items: end;
		margin-bottom: 2.5rem;
	}

	.fp-prose #affwp-affiliate-dashboard:has(#affwp-affiliate-dashboard-tabs) > .fp-dash__panel {
		grid-row: 3;
		margin-bottom: 0;
	}

	/* the sidebar: the faq's topic rail with icons, the current section on the red marker */
	.fp-prose #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs {
		position: sticky;
		top: calc(var(--fp-header-height) + 2rem);
		grid-column: 1;
		grid-row: 2 / 4;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		border-left: 1px solid var(--wp--preset--color--line);
	}

	.fp-prose #affwp-affiliate-dashboard-tabs a {
		display: flex;
		gap: 0.75rem;
		min-height: 2.75rem;
		margin-left: -1px;
		padding: 0 0 0 1rem;
		border: 0;
		border-left: 2px solid transparent;
		border-radius: 0;
		background: none;
		color: var(--wp--preset--color--ink);
		font-family: inherit;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		transition: border-color 0.2s, color 0.2s;
	}

	.fp-prose #affwp-affiliate-dashboard-tabs a::before {
		width: 1.125rem;
		height: 1.125rem;
		color: var(--wp--preset--color--body-grey);
	}

	.fp-prose #affwp-affiliate-dashboard-tabs a:hover {
		border-color: var(--wp--preset--color--line-strong);
	}

	.fp-prose #affwp-affiliate-dashboard-tabs .active > a,
	.fp-prose #affwp-affiliate-dashboard-tabs .active > a:hover {
		border-color: var(--wp--preset--color--accent);
		background: none;
		color: var(--wp--preset--color--accent-dark);
		font-weight: 500;
	}

	.fp-prose #affwp-affiliate-dashboard-tabs .active > a::before {
		color: var(--wp--preset--color--accent);
	}

	/* log out sits apart at the foot of the rail */
	.fp-prose #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li:has(> a[href*="action=logout"]) {
		margin: 1rem 0 0;
		padding-top: 1rem;
		border-top: 1px solid var(--wp--preset--color--line);
	}
}

/* affiliate portal template (templates/page-affiliate-portal.html): the dashboard as its own full page, no site header or footer */
.fp-portal {
	--fp-side: 16rem;
	--fp-brand-height: 8rem;
	--fp-back-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z'/%3E%3C/svg%3E");
	min-height: 100dvh;
	background: var(--wp--preset--color--surface);
}

.fp-portal__brand {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875rem var(--wp--style--root--padding-left, 1.5rem);
	background: var(--wp--preset--color--night);
	color: var(--wp--preset--color--on-night);
}

.fp-portal__brand > * {
	margin: 0;
}

/* the footer's logo on the same night ground, a little smaller */
.fp-portal__brand .wp-block-site-logo img {
	width: 8.5rem;
	height: auto;
}

.fp-portal__brand :focus-visible {
	outline-color: var(--wp--preset--color--on-night);
}

.fp-portal__back a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.75rem;
	color: var(--wp--preset--color--on-night-muted);
	font-family: var(--wp--preset--font-family--dm-mono);
	font-size: var(--wp--custom--font-size--label);
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	text-transform: uppercase;
}

.fp-portal__back a::before {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--fp-back-icon) center / contain no-repeat;
	mask: var(--fp-back-icon) center / contain no-repeat;
}

.fp-portal__back a:hover {
	color: var(--wp--preset--color--on-night);
}

.fp-portal__main {
	padding: 1.5rem var(--wp--style--root--padding-left, 1.5rem) 4rem;
}

/* in the portal the greeting is the page's headline, on the page itself rather than a dark card */
.fp-portal .fp-dash__hello {
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--ink);
}

.fp-portal .fp-dash__hello :focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

.fp-portal .fp-dash__greeting {
	font-size: var(--wp--preset--font-size--xx-large);
}

.fp-portal .fp-dash__link label {
	color: var(--wp--preset--color--body-grey);
}

.fp-portal .fp-dash__link input {
	border-color: var(--wp--preset--color--line-strong);
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}

/* desktop: a dark sidebar down the left with the logo, back link and the section menu; the content beside it */
@media (min-width: 1024px) {
	.fp-portal::before {
		content: "";
		position: fixed;
		inset: 0 auto 0 0;
		width: var(--fp-side);
		background: var(--wp--preset--color--night);
	}

	.fp-portal__brand {
		position: fixed;
		top: var(--wp-admin--admin-bar--height, 0px);
		left: 0;
		z-index: 1;
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-start;
		gap: 0.75rem;
		width: var(--fp-side);
		height: var(--fp-brand-height);
		padding: 1.75rem 1.5rem 0;
		background: none;
	}

	.fp-portal__main {
		margin-left: var(--fp-side);
		padding: clamp(2rem, 4vw, 3rem) clamp(2rem, 4vw, 4rem) 4rem;
	}

	/* the dashboard column centred in the space beside the sidebar */
	.fp-portal__main:has(#affwp-affiliate-dashboard) > .wp-block-post-content {
		max-width: 72rem;
		margin-inline: auto;
	}

	.fp-portal .fp-dash__hello {
		grid-template-columns: minmax(0, 1fr) minmax(0, 30rem);
		align-items: end;
		margin-bottom: 1rem;
	}

	.fp-portal__brand .wp-block-site-logo img {
		width: 10rem;
	}

	/* the section menu leaves the content and fills the sidebar under the logo */
	.fp-portal #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs {
		position: fixed;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--fp-brand-height));
		bottom: 0;
		left: 0;
		z-index: 1;
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0.25rem;
		box-sizing: border-box;
		width: var(--fp-side);
		margin: 0;
		padding: 0.5rem 0.75rem 1.5rem;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.fp-portal #affwp-affiliate-dashboard-tabs a {
		box-sizing: border-box;
		display: flex;
		gap: 0.75rem;
		width: 100%;
		min-height: 2.75rem;
		padding: 0 0.875rem;
		border: 0;
		border-radius: 8px;
		background: none;
		color: var(--wp--preset--color--on-night-muted);
		font-family: inherit;
		font-size: var(--wp--preset--font-size--medium);
		font-weight: 400;
		letter-spacing: normal;
		text-transform: none;
		transition: background-color 0.2s, color 0.2s;
	}

	.fp-portal #affwp-affiliate-dashboard-tabs a::before {
		width: 1.125rem;
		height: 1.125rem;
	}

	.fp-portal #affwp-affiliate-dashboard-tabs a:hover {
		background: color-mix(in srgb, var(--wp--preset--color--on-night) 8%, transparent);
		color: var(--wp--preset--color--on-night);
	}

	.fp-portal #affwp-affiliate-dashboard-tabs .active > a,
	.fp-portal #affwp-affiliate-dashboard-tabs .active > a:hover {
		background: color-mix(in srgb, var(--wp--preset--color--on-night) 12%, transparent);
		color: var(--wp--preset--color--on-night);
		font-weight: 500;
	}

	.fp-portal #affwp-affiliate-dashboard-tabs :focus-visible {
		outline-color: var(--wp--preset--color--on-night);
	}

	/* log out sits at the foot of the sidebar */
	.fp-portal #affwp-affiliate-dashboard #affwp-affiliate-dashboard-tabs li:has(> a[href*="action=logout"]) {
		margin: auto 0 0;
		padding-top: 1rem;
		border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--on-night) 15%, transparent);
	}
}

/* sign-up marks the optional fields instead of the required ones, going by affiliatewp's own "(required)" marker (its account email prints a broken required attribute); the marker stays for screen readers */
.affwp-register-form label .required {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.affwp-register-form p:has(> :is(input, textarea, select):not([type="hidden"])) > label:not(:has(.required))::after {
	content: "Optional";
	margin-left: 0.5rem;
	color: var(--wp--preset--color--body-grey);
	font-size: var(--wp--custom--font-size--label);
	letter-spacing: 0.08em;
}

.affwp-form input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	accent-color: var(--wp--preset--color--accent);
}

/* plain paragraphs, not the form's label-over-field grid */
.affwp-form :is(.fp-auth__lede, .fp-auth__switch) {
	display: block;
}

.affwp-form :is(.affwp-lost-password, .affwp-login-link) a {
	font-size: var(--wp--preset--font-size--medium);
}

.fp-auth__lede,
.affwp-lost-password-form legend + p {
	margin: 0;
	color: var(--wp--preset--color--body-grey);
	font-size: var(--wp--preset--font-size--medium);
}

.fp-auth__switch {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--body-grey);
	font-size: var(--wp--preset--font-size--medium);
	text-align: center;
}

/* the html parser closes the submit's <p> at turnstile's <div>: a <p> of hidden inputs and an empty <p> are left over, and the box and button land in the fieldset itself; neither leftover takes a row */
:is(.affwp-login-form, .affwp-lost-password-form) fieldset > p:empty {
	display: none;
}

:is(.affwp-login-form, .affwp-lost-password-form) fieldset > p:has(> input[type="hidden"]):not(:has(> :not(input[type="hidden"], [type="submit"], .cf-turnstile))) {
	display: contents;
}

/* log in beside "lost your password?" (and send reset link beside "back to log in"), with or without turnstile's box on its own row above; small phones keep them stacked */
@media (min-width: 480px) {
	:is(.affwp-login-form, .affwp-lost-password-form) fieldset {
		grid-template-columns: auto minmax(0, 1fr);
		column-gap: 1.5rem;
	}

	:is(.affwp-login-form, .affwp-lost-password-form) fieldset > *,
	:is(.affwp-login-form, .affwp-lost-password-form) fieldset > p > * {
		grid-column: 1 / -1;
	}

	:is(.affwp-login-form, .affwp-lost-password-form) fieldset [type="submit"] {
		grid-column: 1;
		margin-top: 0;
	}

	:is(.affwp-login-form, .affwp-lost-password-form) :is(.affwp-lost-password, .affwp-login-link) {
		grid-column: 2;
		justify-self: end;
		align-self: center;
	}
}

/* turnstile's box can't shrink below 300px: on narrower cards it's centred, reaching evenly into the card's padding */
.affwp-form .cf-turnstile {
	margin-left: min(0px, (100% - 300px) / 2);
}

/* sign-up: two columns once the card is wide enough (name beside username, password beside its confirmation; every other field across); one column on phones */
.affwp-register-form {
	container-type: inline-size;
}

@container (min-width: 36rem) {
	.affwp-register-form fieldset {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}

	.affwp-register-form fieldset > * {
		grid-column: 1 / -1;
	}

	/* a name without a username field keeps the full row; the eye button's wrapper sits between p and the password input */
	.affwp-register-form fieldset > p:has(> #affwp-user-name):has(+ p > #affwp-user-login),
	.affwp-register-form fieldset > p:has(> #affwp-user-name) + p:has(> #affwp-user-login),
	.affwp-register-form fieldset > p:has(#affwp-user-pass, #affwp-user-pass2) {
		grid-column: auto;
	}

	.affwp-register-form textarea {
		height: 7rem;
	}
}

/* turnstile's 300px box and the register button share the last row once both fit */
@container (min-width: 40rem) {
	.affwp-register-form fieldset > .cf-turnstile {
		grid-column: 1;
	}

	.affwp-register-form fieldset:has(> .cf-turnstile) > [type="submit"] {
		grid-column: 2;
		justify-self: end;
		align-self: center;
		margin-top: 0;
	}
}

/* sign-in pages in the portal (log in, lost and new password, sign up): the form as one centred card, its legend the card's heading */
.fp-portal__main:not(:has(#affwp-affiliate-dashboard)) {
	display: grid;
	justify-items: center;
	align-content: start;
	padding-top: clamp(1.5rem, 6vh, 5rem);
}

/* no gap after the visually hidden page title */
.fp-portal__main:not(:has(#affwp-affiliate-dashboard)) > .wp-block-post-content {
	width: 100%;
	max-width: 28rem;
	margin-top: 0;
}

/* the sign-up card is wider; same weight as the rule above (its :not(:has(#id)) counts as an id) */
.fp-portal__main:not(:has(#affwp-affiliate-dashboard)):has(.affwp-register-form) > .wp-block-post-content {
	max-width: 52rem;
}

.fp-portal .wp-block-post-content > * + * {
	margin-top: 1.5rem;
}

.fp-portal .wp-block-post-content > .affwp-form {
	margin-bottom: 0;
	padding: clamp(1.5rem, 5vw, 2.25rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 1rem;
	background: var(--wp--preset--color--white);
}

.fp-portal .affwp-form legend {
	margin-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--marcellus);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.15;
}

/* desktop: no gap under the fixed brand, and the sign-up card tightens on shorter screens so it fits without scrolling */
@media (min-width: 1024px) {
	.fp-portal__main:not(:has(#affwp-affiliate-dashboard)) {
		margin-top: 0;
		padding-block: clamp(1.5rem, 4vh, 3rem);
	}

	.fp-portal .wp-block-post-content > .affwp-register-form {
		padding-block: clamp(1.5rem, 3.5vh, 2.25rem);
	}

	.fp-portal .affwp-register-form fieldset {
		row-gap: clamp(1rem, 2vh, 1.5rem);
	}
}