/*
 * CloudPilar Apps Marketplace & Affiliates — front-end styles.
 *
 * The palette is the CloudPilar theme's (theme.json), and follows the theme
 * through its own --cp-* custom properties. Generic preset names such as
 * --wp--preset--color--accent are deliberately NOT used: other themes define
 * them with different meanings (often a pale accent), which would put white
 * button text on a light background. Everything is scoped under .cpaff.
 * Mobile first.
 */

.cpaff {
	--cpaff-ink: var(--cp-ink, #0b1020);
	--cpaff-ink-2: #141b33;
	--cpaff-paper: var(--cp-paper, #fbfaf8);
	--cpaff-paper-2: #f4f2ee;
	--cpaff-rule: var(--cp-rule, #e0dcd3);
	--cpaff-text: #12172a;
	--cpaff-muted: #545c73;
	--cpaff-on-ink: #f5f6fa;
	--cpaff-on-ink-muted: #a8b0c6;
	--cpaff-accent: var(--cp-accent, #1b6fe8);
	--cpaff-accent-text: #1560d0;
	--cpaff-accent-deep: #0f4fb0;
	--cpaff-accent-soft: #e9f1fe;
	--cpaff-success: #136f3a;
	--cpaff-success-soft: #e6f4ec;
	--cpaff-warn: #8a5300;
	--cpaff-warn-soft: #fdf3e2;
	--cpaff-danger: #a4161a;
	--cpaff-danger-soft: #fdecec;
	--cpaff-radius: 16px;
	--cpaff-ease: var(--cp-ease, cubic-bezier(0.16, 1, 0.3, 1));
	--cpaff-display: var(--wp--preset--font-family--display, Georgia, serif);
	--cpaff-body: var(--wp--preset--font-family--body, system-ui, -apple-system, "Segoe UI", sans-serif);
	color: var(--cpaff-text);
	font-family: var(--cpaff-body);
}

.cpaff *,
.cpaff *::before,
.cpaff *::after {
	box-sizing: border-box;
}

/* Theme-independent fallbacks for the theme's layout primitives. */
.cpaff .cpaff-container {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(1rem, 5vw, 2.5rem);
}

.cpaff .cpaff-section {
	padding-block: clamp(2.5rem, 6vw, 4.5rem);
}

.cpaff .cpaff-pagehead {
	background: var(--cpaff-ink);
	color: var(--cpaff-on-ink);
	padding-block: clamp(2.75rem, 7vw, 5rem) clamp(2.25rem, 5vw, 3.75rem);
}

.cpaff .cpaff-pagehead a {
	color: var(--cpaff-on-ink);
}

.cpaff .cpaff-breadcrumb {
	font-size: 0.875rem;
	color: var(--cpaff-on-ink-muted);
	margin: 0 0 1rem;
}

/*
 * Full touch target for breadcrumb links (WCAG 2.2 target size), and an
 * underline so they are not told apart from the muted text by colour alone
 * (WCAG 1.4.1).
 */
.cpaff .cpaff-breadcrumb a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpaff-h2 {
	font-family: var(--cpaff-display);
	font-size: clamp(1.375rem, 2.6vw, 1.875rem);
	line-height: 1.2;
	margin: 0 0 1rem;
}

.cpaff .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.cpaff-icon {
	flex: none;
	width: 1.15em;
	height: 1.15em;
}

/* Visible keyboard focus everywhere. */
.cpaff a:focus-visible,
.cpaff button:focus-visible,
.cpaff input:focus-visible,
.cpaff select:focus-visible,
.cpaff textarea:focus-visible,
.cpaff [tabindex]:focus-visible {
	outline: 3px solid var(--cpaff-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

.cpaff-pagehead a:focus-visible,
.cpaff-pagehead button:focus-visible {
	outline-color: #fff;
}

/* Buttons: inherit .cp-btn when the theme provides it; otherwise this. */
.cpaff-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	min-height: 48px;
	padding: 0.85rem 1.5rem;
	border-radius: 999px;
	border: 1px solid transparent;
	font: 600 0.9375rem/1 var(--cpaff-body);
	text-decoration: none;
	cursor: pointer;
}

/* Scoped under .cpaff so it outranks `.cpaff .cpaff-pagehead a` (light link
   text on the dark header): white on the accent is 4.68:1, off-white is not. */
.cpaff .cpaff-btn:not([class*="cp-btn--"]),
.cpaff .cpaff-btn.cp-btn--primary {
	background: var(--cpaff-accent);
	color: #fff;
}

.cpaff .cpaff-btn:not([class*="cp-btn--"]):hover,
.cpaff .cpaff-btn.cp-btn--primary:hover {
	background: var(--cpaff-accent-deep);
}

.cpaff-btn.cp-btn--outline {
	background: transparent;
	color: var(--cpaff-text);
	border-color: var(--cpaff-rule);
}

.cpaff-btn.cp-btn--ink {
	background: var(--cpaff-ink);
	color: var(--cpaff-on-ink);
}

.cpaff-btn[disabled],
.cpaff-btn[aria-disabled="true"] {
	opacity: 0.55;
	cursor: not-allowed;
}

/* ------------------------------------------------------------------
   Catalogue filters
   ------------------------------------------------------------------ */

.cpaff-filters {
	display: grid;
	gap: 1rem;
	padding: clamp(1rem, 3vw, 1.5rem);
	background: #fff;
	border: 1px solid var(--cpaff-rule);
	border-radius: var(--cpaff-radius);
	margin-bottom: 1.5rem;
}

.cpaff-field {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	min-width: 0;
}

.cpaff-field label,
.cpaff-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cpaff-text);
}

.cpaff-field input[type="search"],
.cpaff-field input[type="text"],
.cpaff-field input[type="email"],
.cpaff-field input[type="password"],
.cpaff-field input[type="url"],
.cpaff-field select,
.cpaff-field textarea {
	width: 100%;
	min-height: 48px;
	padding: 0.65rem 0.85rem;
	font: 1rem/1.4 var(--cpaff-body);
	color: var(--cpaff-text);
	background: #fff;
	border: 1px solid #b9b3a7;
	border-radius: 10px;
}

.cpaff-field textarea {
	min-height: 120px;
	resize: vertical;
}

.cpaff-input-icon {
	position: relative;
}

.cpaff-input-icon .cpaff-icon {
	position: absolute;
	left: 0.85rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--cpaff-muted);
	pointer-events: none;
}

.cpaff-input-icon input {
	padding-left: 2.6rem !important;
}

.cpaff-filters__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.cpaff-reset {
	color: var(--cpaff-accent-text);
	font-weight: 600;
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.cpaff-results {
	color: var(--cpaff-muted);
	font-size: 0.9375rem;
	margin: 0 0 1rem;
}

@media (min-width: 720px) {
	.cpaff-filters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.cpaff-field--search {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1024px) {
	.cpaff-filters {
		grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
		align-items: end;
	}
}

/* One row only when every select has room for its full label. */
@media (min-width: 1280px) {
	.cpaff-filters {
		grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(160px, 1fr)) auto;
	}

	.cpaff-field--search {
		grid-column: auto;
	}
}

/* ------------------------------------------------------------------
   Grid and cards
   ------------------------------------------------------------------ */

.cpaff-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 640px) {
	.cpaff-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cpaff-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cpaff-grid__item {
	display: flex;
}

.cpaff-card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	background: #fff;
	border: 1px solid var(--cpaff-rule);
	border-radius: var(--cpaff-radius);
	padding: clamp(1.25rem, 3vw, 1.75rem);
	gap: 0.75rem;
	transition: border-color 200ms var(--cpaff-ease), box-shadow 200ms var(--cpaff-ease);
}

.cpaff-card:hover,
.cpaff-card:focus-within {
	border-color: var(--cpaff-accent);
	box-shadow: 0 10px 30px -18px rgba(11, 16, 32, 0.45);
}

.cpaff-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem;
}

.cpaff-card__icon {
	width: 64px;
	height: 64px;
	border-radius: 15px;
	object-fit: cover;
	border: 1px solid var(--cpaff-rule);
	background: var(--cpaff-paper-2);
}

.cpaff-card__icon--monogram {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--cpaff-display);
	font-size: 1.75rem;
	color: var(--cpaff-accent-deep);
	background: var(--cpaff-accent-soft);
}

.cpaff-card__title {
	font-family: var(--cpaff-display);
	font-size: 1.3rem;
	line-height: 1.25;
	margin: 0.25rem 0 0;
}

.cpaff-card__link {
	color: var(--cpaff-text);
	text-decoration: none;
}

/* The whole card is clickable via the title link, without nesting links. */
.cpaff-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--cpaff-radius);
}

.cpaff-card__tagline {
	color: var(--cpaff-muted);
	margin: 0;
	line-height: 1.5;
}

.cpaff-card__foot {
	margin-top: auto;
	padding-top: 0.75rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	border-top: 1px solid var(--cpaff-rule);
}

.cpaff-card__price {
	margin: 0;
	font-weight: 600;
	font-size: 0.9375rem;
}

.cpaff-card__more {
	color: var(--cpaff-accent-text);
	font-weight: 600;
	font-size: 0.9375rem;
	margin-left: auto;
	white-space: nowrap;
	flex: none;
}

.cpaff-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.cpaff-chip {
	font-size: 0.8125rem;
	padding: 0.3rem 0.65rem;
	border-radius: 999px;
	background: var(--cpaff-paper-2);
	color: var(--cpaff-text);
	border: 1px solid var(--cpaff-rule);
}

.cpaff-badge {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 600;
	padding: 0.3rem 0.7rem;
	border-radius: 999px;
	white-space: nowrap;
}

.cpaff-badge--accent {
	background: var(--cpaff-accent-soft);
	color: var(--cpaff-accent-deep);
}

.cpaff-badge--muted {
	background: var(--cpaff-paper-2);
	color: var(--cpaff-muted);
}

.cpaff-badge--success { background: var(--cpaff-success-soft); color: var(--cpaff-success); }
.cpaff-badge--warn { background: var(--cpaff-warn-soft); color: var(--cpaff-warn); }
.cpaff-badge--danger { background: var(--cpaff-danger-soft); color: var(--cpaff-danger); }

.cpaff-badge--onink {
	margin-top: 0.75rem;
}

.cpaff-empty {
	text-align: center;
	padding: clamp(2rem, 6vw, 3.5rem) 1rem;
	border: 1px dashed var(--cpaff-rule);
	border-radius: var(--cpaff-radius);
	background: #fff;
}

.cpaff-empty h2 {
	font-family: var(--cpaff-display);
	margin-top: 0;
}

.cpaff-pagination ul {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

.cpaff-pagination a,
.cpaff-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.85rem;
	border-radius: 10px;
	border: 1px solid var(--cpaff-rule);
	text-decoration: none;
	color: var(--cpaff-text);
	background: #fff;
}

.cpaff-pagination .current {
	background: var(--cpaff-ink);
	border-color: var(--cpaff-ink);
	color: var(--cpaff-on-ink);
}

.cpaff-cta-band__inner {
	display: grid;
	gap: 1.25rem;
	align-items: center;
}

.cpaff-cta-band p {
	color: var(--cpaff-muted);
	margin: 0;
	max-width: 60ch;
}

@media (min-width: 860px) {
	.cpaff-cta-band__inner {
		grid-template-columns: 1fr auto;
	}
}

/* ------------------------------------------------------------------
   App detail page
   ------------------------------------------------------------------ */

.cpaff-apphead__id {
	display: flex;
	gap: clamp(1rem, 3vw, 1.75rem);
	align-items: flex-start;
}

.cpaff-apphead__icon {
	width: clamp(72px, 14vw, 112px);
	height: clamp(72px, 14vw, 112px);
	border-radius: 24%;
	object-fit: cover;
	flex: none;
	background: #fff;
}

.cpaff-apphead__title {
	margin: 0;
}

.cpaff-apphead__lede {
	margin: 0.5rem 0 0;
}

.cpaff-apphead__meta {
	color: var(--cpaff-on-ink-muted);
	font-size: 0.9375rem;
	margin: 0.75rem 0 0;
}

.cpaff-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: clamp(1.5rem, 4vw, 2.25rem);
}

.cpaff-pagehead .cpaff-btn.cp-btn--ghost,
.cpaff-pagehead .cpaff-btn:not(.cp-btn--primary) {
	background: rgba(255, 255, 255, 0.08);
	color: var(--cpaff-on-ink);
	border-color: rgba(255, 255, 255, 0.36);
}

.cpaff-apphead__note {
	color: var(--cpaff-on-ink-muted);
	margin: 1rem 0 0;
	font-size: 0.9375rem;
}

.cpaff-app-layout {
	display: grid;
	gap: clamp(2rem, 5vw, 3.5rem);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 960px) {
	.cpaff-app-layout {
		grid-template-columns: minmax(0, 1fr) 340px;
		align-items: start;
	}

	.cpaff-app-aside {
		position: sticky;
		top: calc(var(--cp-header-h, 76px) + 24px);
	}
}

.cpaff-app-aside {
	display: grid;
	gap: 1rem;
}

.cpaff-shots {
	list-style: none;
	margin: 0 0 2.5rem;
	padding: 0 0 0.75rem;
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
}

.cpaff-shots li {
	flex: 0 0 auto;
	scroll-snap-align: start;
}

.cpaff-shots img {
	display: block;
	height: clamp(320px, 55vw, 520px);
	width: auto;
	border-radius: 18px;
	border: 1px solid var(--cpaff-rule);
}

.cpaff-panel {
	background: #fff;
	border: 1px solid var(--cpaff-rule);
	border-radius: var(--cpaff-radius);
	padding: 1.25rem 1.35rem;
}

.cpaff-panel__title {
	font-family: var(--cpaff-display);
	font-size: 1.125rem;
	margin: 0 0 0.85rem;
}

.cpaff-panel__note {
	margin: 0.85rem 0 0;
	font-size: 0.9375rem;
}

.cpaff-panel__fine {
	margin: 0.75rem 0 0;
	font-size: 0.8125rem;
	color: var(--cpaff-muted);
}

.cpaff-panel--promo {
	background: var(--cpaff-accent-soft);
	border-color: transparent;
}

.cpaff-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem 1rem;
	margin: 0;
	font-size: 0.9375rem;
}

.cpaff-facts dt {
	color: var(--cpaff-muted);
}

.cpaff-facts dd {
	margin: 0;
	font-weight: 600;
}

.cpaff-plans {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}

.cpaff-plans li {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.6rem 0;
	border-bottom: 1px solid var(--cpaff-rule);
}

.cpaff-plans li:last-child {
	border-bottom: 0;
}

.cpaff-plans__price {
	font-weight: 600;
	text-align: right;
}

.cpaff-linklist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cpaff-linklist a,
.cpaff-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	min-height: 44px;
	color: var(--cpaff-accent-text);
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Notices, forms and dashboard (shared)
   ------------------------------------------------------------------ */

.cpaff-notice {
	border-radius: 12px;
	padding: 1rem 1.15rem;
	margin: 0 0 1.25rem;
	border: 1px solid transparent;
}

.cpaff-notice--success { background: var(--cpaff-success-soft); color: var(--cpaff-success); border-color: #b9dfc8; }
.cpaff-notice--error { background: var(--cpaff-danger-soft); color: var(--cpaff-danger); border-color: #f2c2c3; }
.cpaff-notice--info { background: var(--cpaff-accent-soft); color: var(--cpaff-accent-deep); border-color: #c9dcfb; }
.cpaff-notice--warn { background: var(--cpaff-warn-soft); color: var(--cpaff-warn); border-color: #f1d9ad; }

.cpaff-notice p { margin: 0; }
.cpaff-notice ul { margin: 0.5rem 0 0 1.25rem; padding: 0; }

.cpaff-form {
	display: grid;
	gap: 1.1rem;
}

.cpaff-form__row {
	display: grid;
	gap: 1.1rem;
}

@media (min-width: 720px) {
	.cpaff-form__row--2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.cpaff-help {
	font-size: 0.8125rem;
	color: var(--cpaff-muted);
	margin: 0;
}

.cpaff-check {
	display: flex;
	gap: 0.65rem;
	align-items: flex-start;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.cpaff-check input {
	width: 24px;
	height: 24px;
	margin-top: 0;
	flex: none;
}

.cpaff-hp {
	position: absolute !important;
	left: -10000px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.cpaff-field__error {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cpaff-danger);
}

.cpaff-field [aria-invalid="true"] {
	border-color: var(--cpaff-danger) !important;
	box-shadow: 0 0 0 1px var(--cpaff-danger);
}

.cpaff-notice a {
	color: inherit;
	font-weight: 600;
}

/* ------------------------------------------------------------------
   Affiliate pages
   ------------------------------------------------------------------ */

.cpaff-lede p {
	margin: 0;
}

.cpaff-steps {
	list-style: none;
	counter-reset: cpaff-step;
	margin: 0 0 clamp(2rem, 5vw, 3rem);
	padding: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 860px) {
	.cpaff-steps {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.cpaff-steps li {
	counter-increment: cpaff-step;
	background: #fff;
	border: 1px solid var(--cpaff-rule);
	border-radius: var(--cpaff-radius);
	padding: 1.25rem 1.35rem;
}

.cpaff-steps li::before {
	content: counter(cpaff-step);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--cpaff-accent-soft);
	color: var(--cpaff-accent-deep);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

.cpaff-steps h3 {
	font-family: var(--cpaff-display);
	font-size: 1.125rem;
	margin: 0 0 0.35rem;
}

.cpaff-steps p {
	margin: 0;
	color: var(--cpaff-muted);
}

.cpaff-applist {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.cpaff-applist__item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.25rem 1rem;
	align-items: center;
	padding: 1rem 1.15rem;
	background: #fff;
	border: 1px solid var(--cpaff-rule);
	border-radius: 12px;
}

.cpaff-applist__name {
	font-weight: 700;
	color: var(--cpaff-text);
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

.cpaff-applist__note {
	grid-column: 1 / -1;
	color: var(--cpaff-muted);
	font-size: 0.9375rem;
}

.cpaff-split {
	display: grid;
	gap: 1.5rem;
	align-items: start;
}

@media (min-width: 960px) {
	.cpaff-split {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	}
}

.cpaff-panel--form {
	padding: clamp(1.25rem, 3vw, 2rem);
}

.cpaff-prose {
	max-width: 760px;
}

.cpaff-prose h2 {
	font-family: var(--cpaff-display);
	font-size: 1.375rem;
	margin: 2rem 0 0.75rem;
}

.cpaff-prose ul {
	padding-left: 1.25rem;
	line-height: 1.6;
}

.cpaff-prose li + li {
	margin-top: 0.4rem;
}

/* WordPress login form inside our panel. */
.cpaff #cpaff-loginform p {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

.cpaff #cpaff-loginform label {
	font-size: 0.875rem;
	font-weight: 600;
}

.cpaff #cpaff-loginform input[type="text"],
.cpaff #cpaff-loginform input[type="password"] {
	min-height: 48px;
	padding: 0.65rem 0.85rem;
	border: 1px solid #b9b3a7;
	border-radius: 10px;
	font: 1rem/1.4 var(--cpaff-body);
}

.cpaff #cpaff-loginform .login-remember label {
	flex-direction: row;
	display: flex;
	gap: 0.5rem;
	align-items: center;
	font-weight: 400;
}

.cpaff #cpaff-loginform .login-remember input {
	width: 24px;
	height: 24px;
	margin: 0;
}

/* Standalone link, so it needs a full-size touch target (WCAG 2.5.8). */
.cpaff-lostpassword a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.cpaff #cpaff-login-submit {
	min-height: 48px;
	padding: 0.85rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--cpaff-ink);
	color: var(--cpaff-on-ink);
	font: 600 0.9375rem/1 var(--cpaff-body);
	cursor: pointer;
}

/* ------------------------------------------------------------------
   Dashboard
   ------------------------------------------------------------------ */

.cpaff-pagehead--compact {
	padding-block: clamp(2rem, 5vw, 3rem);
}

.cpaff-code {
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	background: rgba(255, 255, 255, 0.1);
	padding: 0.15rem 0.45rem;
	border-radius: 6px;
	letter-spacing: 0.05em;
}

.cpaff-signout {
	margin: 0.75rem 0 0;
}

.cpaff-signout a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--cpaff-on-ink);
}

.cpaff-dashboard .cpaff-panel + .cpaff-panel,
.cpaff-dash-block + .cpaff-dash-block,
.cpaff-dash-block + .cpaff-panel {
	margin-top: 1.5rem;
}

.cpaff-muted {
	color: var(--cpaff-muted);
}

.cpaff-fine {
	font-size: 0.875rem;
	color: var(--cpaff-muted);
}

/* Overview figures. */
.cpaff-stats {
	list-style: none;
	margin: 0 0 1.25rem;
	padding: 0;
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.cpaff-stat {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.25rem;
	background: #fff;
	border: 1px solid var(--cpaff-rule);
	border-radius: var(--cpaff-radius);
}

.cpaff-stat__label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--cpaff-muted);
}

.cpaff-stat__value {
	font-family: var(--cpaff-display);
	font-size: clamp(1.75rem, 4vw, 2.25rem);
	line-height: 1.1;
}

.cpaff-stat__note {
	font-size: 0.8125rem;
	color: var(--cpaff-muted);
}

/* Tables: scroll sideways on narrow screens instead of breaking the page. */
.cpaff-table-wrap {
	overflow-x: auto;
	margin-block: 1rem;
	border: 1px solid var(--cpaff-rule);
	border-radius: 12px;
	background: #fff;
}

.cpaff-table-wrap:focus-visible {
	outline: 3px solid var(--cpaff-accent);
	outline-offset: 2px;
}

.cpaff-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.cpaff-table caption {
	text-align: left;
	font-weight: 600;
	padding: 0.85rem 1rem 0.35rem;
}

.cpaff-table th,
.cpaff-table td {
	padding: 0.7rem 1rem;
	text-align: left;
	border-top: 1px solid var(--cpaff-rule);
	white-space: nowrap;
	vertical-align: middle;
}

.cpaff-table thead th {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--cpaff-muted);
	background: var(--cpaff-paper-2);
	border-top: 0;
}

/* Referral links. */
.cpaff-linklist {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.cpaff-linkrow {
	padding-block: 1.1rem;
	border-top: 1px solid var(--cpaff-rule);
}

.cpaff-linkrow__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.cpaff-linkrow__name {
	font-weight: 600;
	font-size: 1.0625rem;
}

.cpaff-linkrow__note,
.cpaff-linkrow__stats {
	margin: 0.35rem 0;
	font-size: 0.875rem;
	color: var(--cpaff-muted);
}

.cpaff-copy {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-block: 0.5rem;
}

.cpaff-copy__input {
	flex: 1 1 16rem;
	min-width: 0;
	min-height: 48px;
	padding: 0.65rem 0.85rem;
	font: 0.9375rem/1.4 var(--wp--preset--font-family--mono, ui-monospace, monospace);
	color: var(--cpaff-text);
	background: var(--cpaff-paper-2);
	border: 1px solid #b9b3a7;
	border-radius: 10px;
}

.cpaff-copy__button {
	flex: 0 0 auto;
}

/* Payouts. */
.cpaff-payout {
	padding-block: 1rem;
	border-top: 1px solid var(--cpaff-rule);
}

.cpaff-payout__amount {
	margin: 0 0 0.75rem;
	font-size: 1.0625rem;
	font-weight: 600;
}

/* Commission list controls. */
.cpaff-panel__headrow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
}

.cpaff-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 1rem;
}

.cpaff-filter select {
	min-height: 48px;
	padding: 0.5rem 0.75rem;
	font: 1rem var(--cpaff-body);
	border: 1px solid #b9b3a7;
	border-radius: 10px;
	background: #fff;
}

.cpaff-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

@media (prefers-reduced-motion: reduce) {
	.cpaff *,
	.cpaff *::before,
	.cpaff *::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* /account/: one column on phones, two from tablets up. */
.cpaff-account-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	gap: 1rem;
}

@media (min-width: 700px) {
	.cpaff-account-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}