/* Partner reporting portal. Inherits the host theme's typography. */

.mmcq-portal {
	--mmcq-line: #e3e8ef;
	--mmcq-ink: #16202f;
	--mmcq-muted: #667085;
	--mmcq-accent: #23b06a;
	--mmcq-paper: #fff;
	max-width: 1040px;
	margin: 0 auto;
	color: var(--mmcq-ink);
}

.mmcq-portal * { box-sizing: border-box; }

.mmcq-portal-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--mmcq-line);
	margin-bottom: 22px;
}

.mmcq-portal-head h2 { margin: 0; font-size: 26px; line-height: 1.2; }
.mmcq-sub { margin: 4px 0 0; color: var(--mmcq-muted); }

.mmcq-signout {
	font-size: 14px;
	color: var(--mmcq-muted);
	text-decoration: none;
	border: 1px solid var(--mmcq-line);
	border-radius: 8px;
	padding: 8px 14px;
	white-space: nowrap;
}

.mmcq-signout:hover { color: var(--mmcq-ink); }

.mmcq-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin-bottom: 24px;
}

.mmcq-filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--mmcq-muted); }
.mmcq-filters input[type="date"] { padding: 8px 10px; border: 1px solid var(--mmcq-line); border-radius: 8px; }

.mmcq-filters button {
	padding: 9px 18px;
	border: none;
	border-radius: 8px;
	background: var(--mmcq-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.mmcq-export {
	padding: 9px 16px;
	border: 1px solid var(--mmcq-line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--mmcq-ink);
	font-size: 14px;
}

/* Sized by the space there actually is, not by the width of the window.
   A fixed column count off a media query is how "APPROVED COMMISSION" ends up
   printed one letter per line: the window says desktop, so it asks for six
   columns, while the box the portal is sitting in is 500px wide. auto-fit
   never asks for a column narrower than a label can live in, so the tiles
   reflow instead of shattering - at any container width, on any page. */
.mmcq-kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
	gap: 14px;
	margin-bottom: 26px;
}

.mmcq-kpi {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
}

.mmcq-kpi-accent { grid-column: auto; border-color: var(--mmcq-accent); background: rgba(35, 176, 106, .06); }
.mmcq-kpi-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mmcq-muted); }
.mmcq-kpi strong { display: block; font-size: 28px; line-height: 1.2; margin-top: 6px; }
.mmcq-kpi-note { font-size: 12px; color: var(--mmcq-muted); }

.mmcq-chart {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	height: 140px;
	padding: 14px;
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	background: #fff;
}

.mmcq-bar-wrap { flex: 1; height: 100%; display: flex; align-items: flex-end; }
.mmcq-bar { width: 100%; background: var(--mmcq-accent); border-radius: 3px 3px 0 0; }
.mmcq-chart-caption { font-size: 12px; color: var(--mmcq-muted); margin: 8px 0 26px; }

.mmcq-table-wrap { overflow-x: auto; border: 1px solid var(--mmcq-line); border-radius: 12px; }
.mmcq-table { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; }
.mmcq-table th,
.mmcq-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--mmcq-line); }
.mmcq-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--mmcq-muted); }
.mmcq-table tbody tr:last-child td { border-bottom: none; }
.mmcq-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Money and counts line up under one another, which is the only way a column
   of figures can be compared at a glance. */
.mmcq-table th.mmcq-num,
.mmcq-table td.mmcq-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.mmcq-table td .mmcq-muted { display: block; font-size: 12px; }
.mmcq-actions { margin: 16px 0 22px; }
.mmcq-empty { color: var(--mmcq-muted); text-align: center; padding: 26px; }

.mmcq-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: #eef1f6;
	color: #4a5568;
}

.mmcq-pill-approved { background: #dcf5e8; color: #17663d; }
.mmcq-pill-declined { background: #fde8e4; color: #9c3b28; }
.mmcq-pill-paid { background: #e2e9fb; color: #2d4691; }
.mmcq-reason { display: block; font-size: 12px; color: var(--mmcq-muted); margin-top: 4px; }

.mmcq-pager { display: flex; gap: 6px; margin: 18px 0; flex-wrap: wrap; }

.mmcq-pager a {
	padding: 7px 12px;
	border: 1px solid var(--mmcq-line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--mmcq-ink);
	font-size: 14px;
}

.mmcq-pager a.is-current { background: var(--mmcq-accent); color: #fff; border-color: var(--mmcq-accent); }

.mmcq-note {
	border: 1px solid var(--mmcq-line);
	border-radius: 10px;
	padding: 16px 18px;
	background: #fff;
}

.mmcq-note-quiet { color: var(--mmcq-muted); font-size: 13px; margin-top: 22px; }

.mmcq-portal-login { max-width: 420px; }
.mmcq-portal-login .login-username,
.mmcq-portal-login .login-password { margin-bottom: 14px; }
.mmcq-portal-login input[type="text"],
.mmcq-portal-login input[type="password"] {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--mmcq-line);
	border-radius: 8px;
}

.mmcq-portal-login .button,
.mmcq-portal-login input[type="submit"] {
	background: var(--mmcq-accent);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 22px;
	font-weight: 600;
	cursor: pointer;
}

.mmcq-forgot { margin-top: 14px; font-size: 14px; }

@media (max-width: 640px) {
	.mmcq-portal-head { flex-direction: column; }
	.mmcq-kpi strong { font-size: 24px; }
}

/* Links, banners and codes ------------------------------------------- */

.mmcq-assets {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
	margin-bottom: 30px;
}

.mmcq-asset {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
}

.mmcq-asset-code { border-color: var(--mmcq-accent); background: rgba(35, 176, 106, .06); }
.mmcq-asset-label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--mmcq-muted); margin-bottom: 8px; }
.mmcq-asset p { font-size: 13px; color: var(--mmcq-muted); margin: 8px 0 0; }

.mmcq-code {
	display: inline-block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 22px;
	letter-spacing: .06em;
	color: var(--mmcq-ink);
}

.mmcq-copy {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	padding: 9px 11px;
	border: 1px solid var(--mmcq-line);
	border-radius: 8px;
	background: #f7f9fc;
	color: var(--mmcq-ink);
	resize: vertical;
}

.mmcq-banners {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 16px;
	margin-bottom: 30px;
}

.mmcq-banner {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	padding: 16px 18px;
	background: #fff;
}

.mmcq-banner-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.mmcq-banner img { max-width: 100%; height: auto; display: block; border: 1px solid var(--mmcq-line); border-radius: 6px; margin-bottom: 12px; }
.mmcq-banner label { display: block; font-size: 12px; color: var(--mmcq-muted); margin-bottom: 5px; }
.mmcq-muted { color: var(--mmcq-muted); font-size: 12px; }

/* Administrator preview ------------------------------------------------
 *
 * An admin has no figures of their own, so rather than a dead end they get
 * a list of partners to look through. The bar has to be unmistakable: it is
 * the only thing distinguishing this from a partner's real view.
 */
.mmcq-preview-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
	background: #fff4e0;
	border: 1px solid #e8b96a;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 20px;
	font-size: 14px;
	color: #6b4a12;
}
.mmcq-preview-bar a { color: #6b4a12; font-weight: 600; }

.mmcq-preview-list { margin: 10px 0 0; padding-left: 18px; line-height: 1.9; }
.mmcq-preview-list em { color: #777; font-style: normal; font-size: 13px; }

/* Keep me signed in ---------------------------------------------------- */
.mmcq-portal-login .login-remember { margin: 4px 0 14px; font-size: 14px; }
.mmcq-portal-login .login-remember label { display: flex; align-items: center; gap: 8px; }

/* Password reset, on-brand ---------------------------------------------- */
.mmcq-portal-login form p { margin: 0 0 14px; }
.mmcq-portal-login label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.mmcq-portal-login input[type="text"],
.mmcq-portal-login input[type="password"] {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #cfd6dd;
	border-radius: 8px;
	font-size: 15px;
}
.mmcq-portal-login input[type="text"]:focus,
.mmcq-portal-login input[type="password"]:focus {
	outline: 2px solid #0d4f5c;
	outline-offset: 1px;
}
.mmcq-note-ok { border-color: #2c6e49; background: #edf4f0; color: #1d4c33; }
.mmcq-note-warn { border-color: #a1651b; background: #fdf3e5; color: #6d430d; }

/* Choosing a first password ------------------------------------------- */
.mmcq-portal-login label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}
.mmcq-portal-login .mmcq-hint {
	font-size: 13px;
	color: var(--mmcq-muted);
	margin: -6px 0 16px;
	line-height: 1.5;
}
.mmcq-portal-login .submit { margin: 4px 0 0; }
.mmcq-portal-login .mmcq-sub { margin-bottom: 20px; }
.mmcq-portal-login a.button { display: inline-block; text-decoration: none; }

/* Apply to become a partner --------------------------------------------- */
.mmcq-apply { max-width: 720px; }
.mmcq-apply h2 { margin: 0 0 6px; }
.mmcq-apply h3 {
	margin: 32px 0 6px;
	padding-top: 22px;
	border-top: 1px solid var(--mmcq-line);
	font-size: 17px;
}
.mmcq-apply-form p { margin: 0 0 16px; }
.mmcq-apply-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.mmcq-apply-form .req { color: #9c3b28; }
.mmcq-apply-form input[type="text"],
.mmcq-apply-form input[type="email"],
.mmcq-apply-form input[type="tel"],
.mmcq-apply-form input[type="url"],
.mmcq-apply-form select,
.mmcq-apply-form textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #cfd6dd;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--mmcq-ink);
}
.mmcq-apply-form input:focus,
.mmcq-apply-form select:focus,
.mmcq-apply-form textarea:focus {
	outline: 2px solid var(--mmcq-accent);
	outline-offset: 1px;
}

.mmcq-apply-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 18px;
}

.mmcq-apply-check,
.mmcq-apply .mmcq-type-choice {
	border: 1px solid var(--mmcq-line);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 0 0 18px;
	background: #fff;
}
.mmcq-apply-check legend,
.mmcq-apply .mmcq-type-choice legend {
	font-weight: 600;
	font-size: 14px;
	padding: 0 6px;
}
.mmcq-apply-check label {
	display: flex;
	align-items: center;
	gap: 9px;
	font-weight: 400;
	margin: 0 0 9px;
}
.mmcq-apply-check label:last-child { margin-bottom: 0; }
.mmcq-apply-check input[type="checkbox"] { margin: 0; flex: none; }

.mmcq-apply .mmcq-type-choice label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 10px;
	align-items: start;
	font-weight: 400;
	padding: 12px 0;
	border-bottom: 1px solid var(--mmcq-line);
	margin: 0;
}
.mmcq-apply .mmcq-type-choice label:last-child { border-bottom: none; padding-bottom: 0; }
.mmcq-apply .mmcq-type-choice input[type="radio"] { margin: 4px 0 0; }
.mmcq-apply .mmcq-type-choice .description {
	grid-column: 2;
	font-size: 13px;
	color: var(--mmcq-muted);
	line-height: 1.5;
}

.mmcq-apply-consent {
	border: 1px solid var(--mmcq-line);
	border-left: 3px solid var(--mmcq-accent);
	border-radius: 10px;
	padding: 16px 18px;
	margin: 26px 0 22px;
	background: #fbfcfd;
}
.mmcq-apply-consent .mmcq-agree {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	margin: 0;
}
.mmcq-apply-consent .mmcq-agree input { margin: 3px 0 0; flex: none; }
.mmcq-apply-consent .mmcq-sub { font-size: 13px; margin-top: 10px; }

.mmcq-apply-form .submit button {
	background: var(--mmcq-accent);
	border: 1px solid var(--mmcq-accent);
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	padding: 12px 26px;
	border-radius: 8px;
	cursor: pointer;
}
.mmcq-apply-form .submit button:hover { filter: brightness(.94); }

.mmcq-note-bad {
	border-color: #9c3b28;
	background: #fdf1ee;
	color: #7a2c1e;
	margin-bottom: 22px;
}

/* Honeypot: off-screen rather than display:none, which some browsers and
   password managers skip filling - a bot that fills it is the point. */
.mmcq-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Phones ---------------------------------------------------------------- *
 * Five columns of lead data do not fit on a phone. Rather than leave a
 * sideways scroll the partner has to discover, each row becomes a card with
 * the column heading printed against its value.                            */
@media (max-width: 600px) {
	.mmcq-portal { max-width: 100%; }

	.mmcq-table-wrap { border: none; border-radius: 0; overflow: visible; }
	.mmcq-table { font-size: 15px; background: transparent; }
	.mmcq-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	.mmcq-table tr {
		display: block;
		border: 1px solid var(--mmcq-line);
		border-radius: 12px;
		background: #fff;
		padding: 6px 14px;
		margin-bottom: 10px;
	}

	.mmcq-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		padding: 7px 0;
		border-bottom: 1px solid var(--mmcq-line);
		text-align: right;
	}
	.mmcq-table tr td:last-child { border-bottom: none; }

	.mmcq-table td::before {
		content: attr(data-label);
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--mmcq-muted);
		text-align: left;
		flex: none;
	}
	.mmcq-table td.mmcq-num { white-space: normal; }
	.mmcq-table td .mmcq-muted { display: inline; }
	.mmcq-table td.mmcq-empty { display: block; text-align: center; }
	.mmcq-table td.mmcq-empty::before { content: none; }
	.mmcq-reason { text-align: right; }

	/* Header, filters and the sign-out link stack rather than squeeze. */
	.mmcq-portal-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.mmcq-filters { flex-wrap: wrap; }
	.mmcq-filters label { flex: 1 1 140px; }
	.mmcq-filters button,
	.mmcq-export { flex: 1 1 auto; text-align: center; }

	/* One column for the asset and banner cards. */
	.mmcq-assets,
	.mmcq-banners { grid-template-columns: 1fr; }

	/* A touch target, not a hairline. */
	.mmcq-pager a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

/* Minimum payout notice --------------------------------------------------- */
.mmcq-alert {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	border: 1px solid #f0d9a8;
	border-left: 3px solid #d99a1a;
	background: #fdf8ec;
	border-radius: 10px;
	padding: 13px 16px;
	margin: 0 0 22px;
	font-size: 14px;
	color: #6b4a12;
}
.mmcq-alert-mark {
	flex: none;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #d99a1a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	margin-top: 1px;
}
.mmcq-alert-ok { border-color: #bcdfcb; border-left-color: #2c6e49; background: #f1f8f4; color: #1d4c33; }
.mmcq-alert-ok .mmcq-alert-mark { background: #2c6e49; }

/* Two side-by-side panels ------------------------------------------------- */
.mmcq-panels {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	/* Each panel is as tall as its own contents. Stretching them to match
	   leaves a pane of empty card under the shorter one, which reads as
	   something failing to load. */
	align-items: start;
	gap: 16px;
	margin-bottom: 26px;
}

.mmcq-panel {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	padding: 18px 20px;
	background: #fff;
}
.mmcq-panel h3 { margin: 0 0 4px; font-size: 16px; }
.mmcq-panel .mmcq-sub { font-size: 13px; margin-bottom: 14px; }
.mmcq-panel .mmcq-note-quiet { margin-top: 14px; }

/* Commission tracked ------------------------------------------------------ */
.mmcq-pulse { margin: 12px 0 0; }
.mmcq-pulse-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px solid var(--mmcq-line);
}
.mmcq-pulse-row:last-child { border-bottom: none; }
.mmcq-pulse dt { margin: 0; color: var(--mmcq-muted); font-size: 14px; }
.mmcq-pulse dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.mmcq-pulse dd .mmcq-muted { display: block; font-weight: 400; }

/* This month against last ------------------------------------------------- */
.mmcq-compare { display: flex; flex-direction: column; gap: 14px; }
.mmcq-compare-metric { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 12px; align-items: center; }
.mmcq-compare-label { font-size: 13px; color: var(--mmcq-muted); }
.mmcq-compare-bars { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.mmcq-compare-row { display: flex; align-items: center; gap: 10px; }
.mmcq-compare-track { flex: 1; height: 13px; background: #f1f4f8; border-radius: 3px; overflow: hidden; min-width: 0; }
.mmcq-compare-fill { display: block; height: 100%; border-radius: 3px; min-width: 2px; }
.mmcq-compare-old { background: #c3cbd6; }
.mmcq-compare-new { background: var(--mmcq-accent); }
.mmcq-compare-value { font-size: 13px; font-variant-numeric: tabular-nums; min-width: 68px; text-align: right; }

.mmcq-compare-key { display: flex; gap: 18px; flex-wrap: wrap; margin: 16px 0 0; font-size: 13px; color: var(--mmcq-muted); }
.mmcq-compare-key span { display: inline-flex; align-items: center; gap: 7px; }
.mmcq-key-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.mmcq-compare-words { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--mmcq-line); }
.mmcq-compare-words li { display: flex; align-items: baseline; gap: 9px; font-size: 14px; padding: 4px 0; }
.mmcq-change-mark { font-weight: 700; flex: none; width: 14px; text-align: center; }
.mmcq-change-up .mmcq-change-mark { color: #17663d; }
.mmcq-change-down .mmcq-change-mark { color: #9c3b28; }
.mmcq-change-same .mmcq-change-mark { color: var(--mmcq-muted); }

@media (max-width: 760px) {
	.mmcq-panels { grid-template-columns: 1fr; }
	.mmcq-compare-metric { grid-template-columns: 1fr; gap: 6px; }
	.mmcq-compare-label { font-weight: 600; color: var(--mmcq-ink); }
}

/* Section navigation ------------------------------------------------------ */
.mmcq-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	border-bottom: 1px solid var(--mmcq-line);
	margin: 0 0 24px;
	/* A long tab row scrolls sideways on a phone rather than wrapping into
	   three ragged lines. The page itself never scrolls; this strip does. */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.mmcq-nav a {
	flex: none;
	padding: 11px 16px;
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	color: var(--mmcq-muted);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.mmcq-nav a:hover { color: var(--mmcq-ink); }
.mmcq-nav a.is-current { color: var(--mmcq-ink); border-bottom-color: var(--mmcq-accent); font-weight: 600; }
.mmcq-nav a:focus-visible { outline: 2px solid var(--mmcq-accent); outline-offset: -2px; }

.mmcq-kpis-three { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.mmcq-kpis-three .mmcq-kpi-accent { grid-column: auto; }

.mmcq-panels-even { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) { .mmcq-panels-even { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Account form ------------------------------------------------------------ */
.mmcq-account-form p { margin: 0 0 16px; }
.mmcq-account-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.mmcq-account-form input[type="text"],
.mmcq-account-form input[type="email"],
.mmcq-account-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cfd6dd;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--mmcq-ink);
}
.mmcq-account-form input:disabled,
.mmcq-account-form textarea:disabled { background: #f4f6f9; color: var(--mmcq-muted); }
.mmcq-account-form input:focus,
.mmcq-account-form textarea:focus { outline: 2px solid var(--mmcq-accent); outline-offset: 1px; }
.mmcq-hint { display: block; font-size: 12px; color: var(--mmcq-muted); margin-top: 6px; line-height: 1.45; }

.mmcq-button {
	background: var(--mmcq-accent);
	border: 1px solid var(--mmcq-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	padding: 11px 24px;
	border-radius: 8px;
	cursor: pointer;
}
.mmcq-button:hover { filter: brightness(.94); }

.mmcq-table th[scope="row"] { font-weight: 600; width: 200px; color: var(--mmcq-muted); }

/* Activity feed ----------------------------------------------------------- */
.mmcq-feed { list-style: none; margin: 0; padding: 0; border: 1px solid var(--mmcq-line); border-radius: 12px; background: #fff; }
.mmcq-feed li {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: baseline;
	padding: 14px 18px;
	border-bottom: 1px solid var(--mmcq-line);
	font-size: 14px;
}
.mmcq-feed li:last-child { border-bottom: none; }
.mmcq-feed-tag {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mmcq-muted);
}
.mmcq-feed-when { color: var(--mmcq-muted); font-size: 13px; white-space: nowrap; }

@media (max-width: 640px) {
	.mmcq-feed li { grid-template-columns: 1fr; gap: 4px; }
	.mmcq-feed-when { white-space: normal; }
	.mmcq-table th[scope="row"] { width: auto; display: block; padding-bottom: 0; }
}

/* Help -------------------------------------------------------------------- */
.mmcq-help { max-width: 720px; }
.mmcq-help section { padding: 0 0 6px; margin: 0 0 26px; border-bottom: 1px solid var(--mmcq-line); }
.mmcq-help section:last-child { border-bottom: none; }
.mmcq-help h3 { margin: 0 0 10px; font-size: 17px; }
.mmcq-help p { margin: 0 0 12px; }

/* Link builder ------------------------------------------------------------ */
.mmcq-builder {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	padding: 20px 22px 8px;
	background: #fff;
	margin: 0 0 20px;
	max-width: 760px;
}
.mmcq-builder p { margin: 0 0 18px; }
.mmcq-builder label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.mmcq-builder input[type="url"],
.mmcq-builder input[type="text"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cfd6dd;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--mmcq-ink);
}
.mmcq-builder input:focus { outline: 2px solid var(--mmcq-accent); outline-offset: 1px; }
.mmcq-builder-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 18px; }
@media (min-width: 640px) { .mmcq-builder-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.mmcq-built {
	border: 1px solid var(--mmcq-accent);
	border-radius: 12px;
	padding: 18px 22px 22px;
	background: rgba(35, 176, 106, .05);
	max-width: 760px;
}
.mmcq-built h4 { margin: 0 0 12px; font-size: 15px; }

.mmcq-subnav { display: flex; gap: 2px; border-bottom: 1px solid var(--mmcq-line); margin: 0 0 16px; }
.mmcq-subnav a {
	padding: 8px 14px;
	font-size: 14px;
	text-decoration: none;
	color: var(--mmcq-muted);
	border-bottom: 2px solid transparent;
}
.mmcq-subnav a.is-current { color: var(--mmcq-ink); font-weight: 600; border-bottom-color: var(--mmcq-accent); }

.mmcq-qr { background: #fff; border: 1px solid var(--mmcq-line); border-radius: 10px; padding: 14px; display: inline-block; }
.mmcq-qr svg { display: block; }

/* Creative list with details ---------------------------------------------- */
.mmcq-creatives { display: flex; flex-direction: column; gap: 10px; margin-bottom: 30px; }

.mmcq-creative {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	background: #fff;
	overflow: hidden;
}
.mmcq-creative[open] { border-color: var(--mmcq-accent); }

.mmcq-creative summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
	cursor: pointer;
	list-style: none;
}
.mmcq-creative summary::-webkit-details-marker { display: none; }
.mmcq-creative summary:focus-visible { outline: 2px solid var(--mmcq-accent); outline-offset: -2px; }

.mmcq-creative-thumb {
	flex: none;
	width: 132px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--mmcq-line);
	border-radius: 6px;
	background: #f7f9fc;
	overflow: hidden;
}
.mmcq-creative-thumb img { max-width: 100%; max-height: 100%; display: block; }
.mmcq-creative-thumb .mmcq-muted { font-size: 11px; text-align: center; padding: 0 6px; }

.mmcq-creative-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mmcq-creative-meta strong { font-size: 15px; }
.mmcq-creative-meta .mmcq-muted { font-size: 13px; }

.mmcq-creative-open {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--mmcq-accent);
	white-space: nowrap;
}
.mmcq-creative[open] .mmcq-creative-open { color: var(--mmcq-muted); }
.mmcq-creative[open] .mmcq-creative-open::after { content: ""; }

.mmcq-creative-body { padding: 4px 18px 20px; border-top: 1px solid var(--mmcq-line); }
.mmcq-creative-body h4 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--mmcq-muted); }
.mmcq-creative-desc { margin: 0; font-size: 14px; }

.mmcq-copy-actions { display: flex; gap: 16px; justify-content: flex-end; margin: 8px 0 0; }
.mmcq-linkbutton {
	background: none;
	border: none;
	padding: 4px 2px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--mmcq-accent);
	cursor: pointer;
	text-decoration: underline;
}
.mmcq-linkbutton:hover { color: var(--mmcq-ink); }

/* The banner at its real size. The strip scrolls, the artwork does not
   shrink - a partner checking a 970x90 needs to see 970x90. */
.mmcq-creative-preview {
	border: 1px solid var(--mmcq-line);
	border-radius: 8px;
	background: #f7f9fc;
	padding: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.mmcq-creative-preview img { display: block; max-width: none; height: auto; }

@media (max-width: 600px) {
	/* The summary is three things in a row on a desktop; on a phone that
	   squeezes the title into a two-word column, so it stacks instead. */
	.mmcq-creative summary { flex-wrap: wrap; gap: 10px 14px; }
	.mmcq-creative-thumb { width: 96px; height: 34px; }
	.mmcq-creative-meta { flex: 1 1 140px; }
	.mmcq-creative-open { flex: 1 0 100%; text-align: right; }
	.mmcq-copy-actions { justify-content: flex-start; }
}

/* ---------------------------------------------------------------------------
 * Embed builder.
 *
 * Controls on the left, the real form underneath. The preview is the actual
 * embedded page loaded from the same address the snippet carries, so what a
 * partner sees here is what their visitors get - there is no separate mock-up
 * that can drift away from the truth.
 * ------------------------------------------------------------------------- */
.mmcq-embed-builder {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	padding: 20px 22px 22px;
	background: #fff;
	margin: 0 0 24px;
	max-width: 860px;
}

.mmcq-embed-builder h4 { margin: 22px 0 8px; font-size: 15px; }
.mmcq-embed-builder h4:first-of-type { margin-top: 4px; }

.mmcq-embed-controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 20px;
}

@media (min-width: 680px) {
	.mmcq-embed-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mmcq-embed-controls .mmcq-embed-colours { grid-column: 1 / -1; }
}

.mmcq-embed-controls p { margin: 0 0 16px; }

.mmcq-embed-controls label {
	display: block;
	font-weight: 600;
	font-size: 14px;
	margin-bottom: 6px;
}

.mmcq-embed-controls select,
.mmcq-embed-controls input[type="number"] {
	padding: 9px 11px;
	border: 1px solid #cfd6dd;
	border-radius: 8px;
	font-size: 15px;
	font-family: inherit;
	background: #fff;
	color: var(--mmcq-ink);
	max-width: 100%;
}

.mmcq-embed-controls select { width: 100%; }
.mmcq-embed-controls input[type="number"] { width: 90px; }

.mmcq-embed-controls input[type="color"] {
	width: 44px;
	height: 32px;
	padding: 2px;
	border: 1px solid #cfd6dd;
	border-radius: 7px;
	background: #fff;
	vertical-align: middle;
	cursor: pointer;
}

.mmcq-embed-colours span {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 18px 8px 0;
	font-size: 14px;
}

.mmcq-embed-colours .mmcq-hint { display: block; margin: 2px 0 0; }

.mmcq-embed-builder .mmcq-snippet {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	line-height: 1.5;
	padding: 12px 14px;
	border: 1px solid #cfd6dd;
	border-radius: 8px;
	background: #f7f9fb;
	color: var(--mmcq-ink);
	resize: vertical;
}

/*
 * A chequerboard behind the preview, because the useful default is a
 * transparent background and a partner needs to be able to see that it is
 * transparent rather than white.
 */
.mmcq-embed-preview {
	border: 1px solid var(--mmcq-line);
	border-radius: 10px;
	overflow: hidden;
	background-color: #eef2f6;
	background-image:
		linear-gradient(45deg, #dde5ec 25%, transparent 25%, transparent 75%, #dde5ec 75%),
		linear-gradient(45deg, #dde5ec 25%, transparent 25%, transparent 75%, #dde5ec 75%);
	background-size: 18px 18px;
	background-position: 0 0, 9px 9px;
}

.mmcq-embed-preview iframe {
	display: block;
	width: 100%;
	height: 620px;
	border: 0;
}

@media (max-width: 600px) {
	.mmcq-embed-builder { padding: 16px 14px 18px; }
	.mmcq-embed-preview iframe { height: 520px; }
}

/* ===========================================================================
 * The dashboard on a page that was built for a login card
 *
 * The sign-in screen wants a narrow column - it is one form. The dashboard
 * wants the screen: six figures, a chart, a leads table and a month-against-
 * month comparison do not belong in a 500px strip, and squeezing them there is
 * how a heading ends up printed one letter per line.
 *
 * The same page has to do both, so the plugin settles it rather than the page.
 * Signed in, the portal widens itself out of whatever column it was dropped
 * into and centres on that column's centre - which on any ordinary centred
 * layout is the centre of the window. It never grows past the window, so it
 * cannot introduce a sideways scrollbar.
 * ======================================================================== */
.mmcq-portal-wide {
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	width: min(1280px, calc(100vw - 48px));
	max-width: none;

	/*
	 * The base rule centres the portal with "margin: 0 auto". Once the width
	 * here is narrower than the column it is in - which is what happens on a
	 * phone - that auto margin resolves to a real number and is then added to
	 * the centring below, pushing the dashboard off to one side and flush
	 * against the edge. Only visible on small screens, which is exactly where
	 * nobody thinks to look.
	 */
	margin-left: 0;
	margin-right: 0;

	/*
	 * Its own surface, because it has just stepped outside whatever card the
	 * page was giving it. The headings, the navigation and the tile labels are
	 * near-black by design - readable on paper, invisible the moment the thing
	 * behind them turns out to be a dark brand background. Carrying the surface
	 * means the dashboard looks the same wherever it is dropped, which is the
	 * only way this works across partners' pages we have never seen.
	 */
	background: var(--mmcq-paper);
	border-radius: 16px;
	padding: 28px 32px 32px;
}

@media (max-width: 782px) {
	.mmcq-portal-wide {
		width: min(1280px, calc(100vw - 20px));
		padding: 20px 16px 24px;
		border-radius: 12px;
	}
}

/* ---------------------------------------------------------------------------
 * Layout that follows the box, not the window
 *
 * Every breakpoint above is a media query, and a media query cannot see the
 * container - it asks the window how wide it is and gets the wrong answer
 * whenever the portal has been dropped into a narrow column. These repeat the
 * ones that matter against the portal's own width, so the layout is right even
 * where the widening above is defeated - a section with overflow hidden on it,
 * say, or a deliberately narrow placement.
 *
 * Fallback is the media queries above: a browser without container queries
 * behaves exactly as it did before.
 * ------------------------------------------------------------------------ */
.mmcq-portal {
	container-type: inline-size;
	container-name: mmcqportal;
}

@container mmcqportal (max-width: 620px) {
	.mmcq-table-wrap { border: none; border-radius: 0; overflow: visible; }
	.mmcq-table { font-size: 15px; background: transparent; }
	.mmcq-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

	.mmcq-table tr {
		display: block;
		border: 1px solid var(--mmcq-line);
		border-radius: 12px;
		background: #fff;
		padding: 6px 14px;
		margin-bottom: 10px;
	}

	.mmcq-table td {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: 16px;
		padding: 7px 0;
		border-bottom: 1px solid var(--mmcq-line);
		text-align: right;
	}
	.mmcq-table tr td:last-child { border-bottom: none; }

	.mmcq-table td::before {
		content: attr(data-label);
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: .05em;
		color: var(--mmcq-muted);
		text-align: left;
		flex: none;
	}
	.mmcq-table td.mmcq-num { white-space: normal; }
	.mmcq-table td .mmcq-muted { display: inline; }
	.mmcq-table td.mmcq-empty { display: block; text-align: center; }
	.mmcq-table td.mmcq-empty::before { content: none; }
	.mmcq-reason { text-align: right; }

	.mmcq-portal-head { flex-direction: column; align-items: flex-start; gap: 10px; }
	.mmcq-filters { flex-wrap: wrap; }
	.mmcq-filters label { flex: 1 1 140px; }
	.mmcq-filters button,
	.mmcq-export { flex: 1 1 auto; text-align: center; }

	.mmcq-assets,
	.mmcq-banners { grid-template-columns: 1fr; }

	.mmcq-pager a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}

@container mmcqportal (max-width: 780px) {
	.mmcq-panels { grid-template-columns: 1fr; }
	.mmcq-panels-even { grid-template-columns: 1fr; }
	.mmcq-compare-metric { grid-template-columns: 1fr; gap: 6px; }
	.mmcq-embed-controls { grid-template-columns: minmax(0, 1fr); }
	.mmcq-builder-row { grid-template-columns: minmax(0, 1fr); }
}

@container mmcqportal (max-width: 660px) {
	.mmcq-feed li { grid-template-columns: 1fr; gap: 4px; }
}

/* The sub-navigation wraps rather than pushing the portal sideways. */
.mmcq-subnav { flex-wrap: wrap; }

/* On a narrow box the five tiles land 2-up, which strands the commission tile
   alone on the last row. It is the one a partner opens the page for, so it
   takes the whole row rather than half of one. */
@container mmcqportal (max-width: 520px) {
	.mmcq-kpi-accent { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
	.mmcq-kpi-accent { grid-column: 1 / -1; }
}

/* ===========================================================================
 * Undoing the card the page wrapped the sign-in form in
 *
 * A portal page is nearly always designed around the login form, because that
 * is what is on screen while you build it: a narrow column, rounded corners, a
 * shadow - and, to keep a coloured header clipped to those corners,
 * overflow:hidden. Signed in, the same shortcode puts a whole dashboard in
 * that column, and overflow:hidden is what stops it widening: the dashboard is
 * the right size, and the box it is in cuts it back off at the sides.
 *
 * A page cannot be asked to have known this in advance, so the stylesheet
 * settles it: while somebody is signed in, the wrapper immediately around the
 * dashboard stops clipping and stops capping the width. Scoped to the portal's
 * own body class and to a named wrapper, so it can only ever affect the one
 * element that actually contains the dashboard.
 * ======================================================================== */
body.mmcq-portal-signed-in .et_pb_column:has(.mmcq-portal-wide),
body.mmcq-portal-signed-in .et_pb_module:has(.mmcq-portal-wide),
body.mmcq-portal-signed-in .elementor-widget-container:has(.mmcq-portal-wide),
body.mmcq-portal-signed-in .wp-block-group:has(.mmcq-portal-wide),
body.mmcq-portal-signed-in .wp-block-group__inner-container:has(.mmcq-portal-wide),
body.mmcq-portal-signed-in .entry-content:has(.mmcq-portal-wide) {
	overflow: visible !important;
	max-width: none !important;

	/*
	 * And no surface of its own. The card was white because a login form looks
	 * better on white; the dashboard now carries its own white, wider, so what
	 * is left of the card shows as a pale strip above and below it - narrower
	 * than the dashboard, centred on the same axis, and baffling to look at.
	 */
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* The row or section a step further out, which is usually where a max-width
   lives. Only the one containing the dashboard, and only its width. */
body.mmcq-portal-signed-in .et_pb_row:has(.mmcq-portal-wide),
body.mmcq-portal-signed-in .elementor-container:has(.mmcq-portal-wide) {
	overflow: visible !important;
}

/* ===========================================================================
 * Keeping the sign-in card on the centre line
 *
 * Divi lays a row out in floated columns and closes the row off with
 *
 *     .et_pb_row .et_pb_column:last-child { margin-right: 0 !important; }
 *
 * which exists so the last column's gutter does not push the row wide. It is
 * three classes and an !important, so it beats anything a page's own custom
 * CSS can reasonably write.
 *
 * That is harmless while the column is the full width of the row. It stops
 * being harmless the moment the column is given a max-width - which is exactly
 * what a designed sign-in card is: a 520px box in a 1080px row, centred with
 * "margin: 0 auto". The auto on the right is overruled and pinned to zero, the
 * auto on the left is not, so it takes the whole 555px of slack on its own and
 * the card ends up flush against the right-hand edge of the row. The heading
 * above it, which is not a column, stays centred - so the page looks like the
 * card alone has slipped sideways, and nothing in the page's own stylesheet
 * explains it.
 *
 * Measured at 1344px: margin-left 555.188px, margin-right 0, card at x=690
 * with 134px to the right edge and 690px to the left.
 *
 * So the margins are restored as a pair on the one column that holds the
 * portal. Where the card was already centred this changes nothing - auto and
 * auto is what "margin: 0 auto" was asking for - and it is limited to a
 * full-width column, so a genuine two- or three-column row is never touched.
 * Both states: signed out it is the sign-in card, signed in it is the column
 * the dashboard measures its break-out against.
 * ======================================================================== */
body.mmcq-has-portal .et_pb_column_4_4:has(.mmcq-portal),
body.mmcq-has-portal .et_pb_module:has(> .mmcq-portal),
body.mmcq-has-portal .elementor-widget-container:has(> .mmcq-portal),
body.mmcq-has-portal .wp-block-group:has(> .mmcq-portal) {
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ===========================================================================
 * Moving between sections
 *
 * Each tab is an ordinary page load, which is the right way round - every
 * section is linkable, bookmarkable and survives a refresh, and none of it
 * depends on JavaScript. What it costs is the blink between the old page
 * going and the new one arriving, which reads as a flicker when the only
 * thing that actually changed is the panel under the tabs.
 *
 * Three things settle it: the new page brings the dashboard into view rather
 * than starting at the top of the page, the dashboard keeps a floor under it
 * so the page cannot collapse and snap back as the new one lays out, and the
 * tab that was pressed looks pressed straight away rather than waiting for the
 * round trip.
 * ======================================================================== */
/*
 * No cross-document view transition here, deliberately.
 *
 * It cross-fades the whole page, not only the part that changed - and on a
 * builder page with a hero, a menu and a footer, "the whole page fades out and
 * back" is not a smoother version of a page load, it is a flicker. It was a
 * nice-to-have; it made every link worse. Gone.
 */

.mmcq-portal-wide {
	/* A floor, not a height: a short section must not let the page shrink and
	   then jump back as the next one paints. */
	min-height: 60vh;
}


/* The tab responds to the press, not to the reply. */
.mmcq-nav a { transition: color .12s ease, border-color .12s ease; }
.mmcq-nav.is-loading { cursor: progress; }
.mmcq-nav.is-loading a:not(.is-current) { opacity: .55; }

@media (prefers-reduced-motion: reduce) {
	.mmcq-nav a { transition: none; }
	.mmcq-nav.is-loading a:not(.is-current) { opacity: 1; }
}

/* Whitelabel DNS records ------------------------------------------------- */
.mmcq-dns {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	padding: 18px 20px 16px;
	background: #fff;
	margin: 0 0 22px;
	max-width: 760px;
}

.mmcq-dns h4 { margin: 0 0 6px; font-size: 15px; }
.mmcq-dns .mmcq-hint { margin: 0 0 14px; }
.mmcq-dns .mmcq-hint:last-child { margin: 12px 0 0; }

.mmcq-dns-rows { display: grid; gap: 12px; }

.mmcq-dns-row {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	border: 1px solid var(--mmcq-line);
	border-radius: 10px;
	padding: 12px 14px;
	background: #f8fafc;
}

.mmcq-dns-type {
	display: inline-block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	padding: 5px 8px;
	border-radius: 6px;
	background: var(--mmcq-ink);
	color: #fff;
	text-align: center;
}

.mmcq-dns-fields { display: grid; gap: 10px; }
.mmcq-dns-fields label { display: block; }

.mmcq-dns-fields label span {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mmcq-muted);
	margin-bottom: 4px;
}

.mmcq-dns-fields input {
	width: 100%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
	padding: 9px 11px;
	border: 1px solid #cfd6dd;
	border-radius: 8px;
	background: #fff;
	color: var(--mmcq-ink);
}

@container mmcqportal (max-width: 520px) {
	.mmcq-dns-row { grid-template-columns: minmax(0, 1fr); }
	.mmcq-dns-type { justify-self: start; }
}

/* A field that needs attention, on the sign-in form -----------------------
 *
 * Marked rather than announced only: somebody scanning the form should be able
 * to see which box to go back to without reading the sentence above it.
 */
.mmcq-portal-login input.mmcq-invalid,
.mmcq-portal-login input[aria-invalid="true"] {
	border-color: #b3261e !important;
	background: #fdf2f1;
	box-shadow: 0 0 0 3px rgba(179, 38, 30, .12);
}

.mmcq-portal-login input.mmcq-invalid:focus,
.mmcq-portal-login input[aria-invalid="true"]:focus {
	outline: 2px solid #b3261e;
	outline-offset: 1px;
}

/* "What is this for" panels.
   Closed by default and quiet when closed: a partner who already knows what a
   deep link is should not have to read past an explanation of one every time
   they come to copy it. Wide enough to read, never as wide as a table. */
.mmcq-explain { margin: 10px 0 0; }
.mmcq-explain > summary {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	color: var(--mmcq-muted);
	list-style: none;
	padding: 6px 0;
}
.mmcq-explain > summary::-webkit-details-marker { display: none; }
.mmcq-explain > summary:hover { color: var(--mmcq-ink); }
.mmcq-explain > summary:focus-visible { outline: 2px solid var(--mmcq-accent); outline-offset: 2px; border-radius: 4px; }
.mmcq-explain-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
	border-radius: 50%;
	border: 1px solid currentColor;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.mmcq-explain-body {
	max-width: 62ch;
	margin: 4px 0 2px 26px;
	padding: 12px 16px;
	border-left: 2px solid var(--mmcq-line);
	background: rgba(0, 0, 0, .02);
	border-radius: 0 6px 6px 0;
}
.mmcq-explain-body p { font-size: 13px; line-height: 1.55; margin: 0 0 10px; color: var(--mmcq-muted); }
.mmcq-explain-body p:last-child { margin-bottom: 0; }
.mmcq-explain-body strong { color: var(--mmcq-ink); }

@media (max-width: 600px) {
	.mmcq-explain-body { margin-left: 0; padding: 12px; }
}

/* Requests: what a partner asks us for ---------------------------------
 *
 * A conversation, not a form that disappears. Their messages and ours are
 * told apart by where the accent sits rather than by colour alone, so it
 * still reads if the colours do not arrive.
 */
.mmcq-card {
	background: var(--mmcq-paper);
	border: 1px solid var(--mmcq-line);
	border-radius: 14px;
	padding: 20px 22px;
	margin: 0 0 24px;
}
.mmcq-card h3 { margin: 0 0 4px; font-size: 17px; }

.mmcq-thread { display: flex; flex-direction: column; gap: 14px; margin: 18px 0 22px; }
.mmcq-msg {
	border: 1px solid var(--mmcq-line);
	border-left: 3px solid #cbd5e1;
	border-radius: 0 12px 12px 0;
	padding: 13px 16px;
	background: #fbfcfe;
}
.mmcq-msg-them { border-left-color: var(--mmcq-accent); background: #f4fbf7; }
.mmcq-msg-who { margin: 0 0 6px; font-size: 13px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mmcq-msg-who span { color: var(--mmcq-muted); font-size: 12.5px; }
.mmcq-msg-body p { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; }
.mmcq-msg-body p:last-child { margin-bottom: 0; }

.mmcq-request-form label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.mmcq-request-form input[type="text"],
.mmcq-request-form select,
.mmcq-request-form textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #cfd6dd;
	border-radius: 10px;
	font: inherit;
	font-size: 15px;
	background: #fff;
	color: var(--mmcq-ink);
}
.mmcq-request-form textarea { resize: vertical; min-height: 96px; }
.mmcq-request-form p { margin: 0 0 16px; }
.mmcq-pill-new { background: #dcf5e8; color: #17663d; margin-left: 8px; }

/* A section they have applied for but we have not authorised yet -------
 *
 * Shown rather than hidden, on purpose: somebody who asked for a branded
 * form and sees no mention of one cannot tell whether we are working on it.
 */
.mmcq-locked {
	border: 1px dashed #c3ccd8;
	border-radius: 14px;
	background: #f7f9fc;
	padding: 20px 22px;
	margin: 0 0 24px;
}
.mmcq-locked-head { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; }
.mmcq-locked-mark { font-size: 16px; line-height: 1; }
.mmcq-locked p { font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; max-width: 70ch; }
.mmcq-locked p:last-child { margin-bottom: 0; }

.mmcq-btn {
	display: inline-block;
	padding: 11px 20px;
	border: none;
	border-radius: 10px;
	background: var(--mmcq-accent);
	color: #fff !important;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	text-decoration: none;
}
.mmcq-btn:hover { filter: brightness(1.07); }

/* Getting started.
   A details element so it opens itself for a partner with no leads yet and
   folds away once they have one, without any script. The summary marker is
   replaced rather than hidden, because a disclosure with no affordance reads
   as a heading and never gets opened. */
.mmcq-start {
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	background: var(--mmcq-paper);
	margin: 0 0 22px;
	overflow: hidden;
}

.mmcq-start[open] { border-color: var(--mmcq-accent); }

.mmcq-start > summary {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px 18px 16px 44px;
	cursor: pointer;
	position: relative;
	list-style: none;
}

.mmcq-start > summary::-webkit-details-marker { display: none; }
.mmcq-start > summary::marker { content: ""; }

.mmcq-start > summary::before {
	content: "";
	position: absolute;
	left: 18px;
	top: 22px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--mmcq-accent);
	border-bottom: 2px solid var(--mmcq-accent);
	transform: rotate(-45deg);
	transition: transform .15s ease;
}

.mmcq-start[open] > summary::before { transform: rotate(45deg); top: 19px; }
.mmcq-start > summary:hover { background: rgba(35, 176, 106, .05); }

.mmcq-start-title { font-weight: 700; font-size: 16px; }
.mmcq-start-sub { font-size: 13px; color: var(--mmcq-muted); }

.mmcq-start-body { padding: 4px 18px 18px; }

.mmcq-start-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 22px;
}

.mmcq-start-steps > li { display: flex; gap: 12px; margin: 0; }

.mmcq-start-n {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 8px;
	background: var(--mmcq-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mmcq-start-steps h4 { margin: 2px 0 4px; font-size: 14.5px; line-height: 1.35; }
.mmcq-start-steps p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--mmcq-muted); }

.mmcq-start-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
	margin: 18px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--mmcq-line);
	font-size: 14px;
	color: var(--mmcq-muted);
}

@media (max-width: 720px) {
	.mmcq-start-steps { grid-template-columns: minmax(0, 1fr); }
	.mmcq-start-body { padding: 4px 14px 16px; }
	.mmcq-start > summary { padding: 14px 14px 14px 38px; }
	.mmcq-start > summary::before { left: 14px; }
}

/* The lead list's own filters.
   Deliberately sits against the table rather than with the date filter at the
   top of the section: it changes what is directly underneath it. */
.mmcq-leadfilters {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px 16px;
	margin: 0 0 14px;
}

.mmcq-leadfilters label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: var(--mmcq-muted);
}

.mmcq-leadfilters select {
	padding: 8px 10px;
	border: 1px solid var(--mmcq-line);
	border-radius: 8px;
	background: var(--mmcq-paper);
	color: var(--mmcq-ink);
	font-size: 14px;
	min-height: 38px;
}

.mmcq-leadfilters button {
	padding: 9px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--mmcq-accent);
	color: #fff;
	font-weight: 600;
	font-size: 14px;
	min-height: 38px;
	cursor: pointer;
}

.mmcq-leadfilters-count {
	margin-left: auto;
	font-size: 13px;
	color: var(--mmcq-muted);
}

.mmcq-pager-gap { padding: 0 4px; color: var(--mmcq-muted); }

@media (max-width: 600px) {
	.mmcq-leadfilters { gap: 10px; }
	.mmcq-leadfilters label { flex: 1 1 140px; }
	.mmcq-leadfilters button { flex: 1 1 100%; }
	.mmcq-leadfilters-count { margin-left: 0; flex: 1 1 100%; }
}

/* The required marker on the link builder's destination. */
.mmcq-req { color: #c0392b; font-weight: 700; }

/* Deep links: the link builder's own result section, directly under the form.
   It is present before anything is built so the form's fragment always has
   somewhere to land, and so the answer does not appear out of nowhere. */
.mmcq-deeplink {
	margin: 16px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	background: var(--mmcq-paper);
	scroll-margin-top: 20px;
}

.mmcq-deeplink:focus { outline: none; }
.mmcq-deeplink > h4 { margin: 0 0 10px; font-size: 16px; }
.mmcq-deeplink .mmcq-built { margin: 0; }

/* The worked example on the deep-link card. */
.mmcq-example {
	margin: 12px 0 0;
	padding: 14px 16px;
	border-radius: 10px;
	background: rgba(35, 176, 106, .06);
	border: 1px solid rgba(35, 176, 106, .25);
}

.mmcq-example h5 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--mmcq-muted); }
.mmcq-example-step { margin: 0 0 10px; display: flex; flex-direction: column; gap: 5px; }
.mmcq-example-step:last-of-type { margin-bottom: 8px; }
.mmcq-example-step > span { font-size: 13px; color: var(--mmcq-muted); }

.mmcq-example code {
	display: block;
	padding: 8px 10px;
	border-radius: 7px;
	background: var(--mmcq-paper);
	border: 1px solid var(--mmcq-line);
	font-size: 12.5px;
	overflow-wrap: anywhere;
}

.mmcq-example .mmcq-hint { margin: 0; }

/* The bank-details to-do.
   .mmcq-alert is already the amber one, so this only names the intent and
   makes the link inside it read as an action rather than body text. */
.mmcq-alert-warn { border-left-color: #d99a1a; }
.mmcq-alert a { color: inherit; font-weight: 600; text-decoration: underline; }

/* Account: the logo and bank blocks. */
.mmcq-account-block {
	margin: 22px 0 0;
	padding: 18px 20px;
	border: 1px solid var(--mmcq-line);
	border-radius: 12px;
	background: var(--mmcq-paper);
	scroll-margin-top: 20px;
}

.mmcq-account-block > h4 { margin: 0 0 6px; font-size: 16px; }
.mmcq-account-block > .mmcq-hint { margin: 0 0 14px; }
.mmcq-account-block p { margin: 0 0 12px; }
.mmcq-account-block p:last-child { margin-bottom: 0; }

.mmcq-logo-now {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 18px;
	margin: 0 0 14px;
	padding: 12px 14px;
	border-radius: 10px;
	/* Chequerboard, so a transparent PNG is visibly transparent rather than
	   looking as though it has a white box baked into it. */
	background-color: #fff;
	background-image:
		linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%),
		linear-gradient(45deg, #eef1f5 25%, transparent 25%, transparent 75%, #eef1f5 75%);
	background-size: 16px 16px;
	background-position: 0 0, 8px 8px;
	border: 1px solid var(--mmcq-line);
}

.mmcq-logo-now img { max-height: 54px; max-width: 220px; height: auto; width: auto; }
.mmcq-logo-remove { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--mmcq-muted); }
.mmcq-logo-remove input { width: auto; }

.mmcq-account-block input[type="file"] {
	padding: 8px 0;
	font-size: 14px;
}

/* Deep links: the format panels and the saved list ------------------------- */

/* All three formats are in the page; the tabs show one. [hidden] is honoured
   by the browser, but a stylesheet that sets display on the same element wins
   over it, so it is said again here on purpose. */
.mmcq-format[hidden] { display: none; }

/* The build button while its result is being fetched. Progressive: without
   script the form submits and the page reloads, and this never applies. */
.mmcq-builder.is-building button[type="submit"] { opacity: .65; cursor: progress; }

.mmcq-saved { margin: 18px 0 0; padding: 16px 0 0; border-top: 1px solid var(--mmcq-line); }
.mmcq-saved h5 { margin: 0 0 12px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--mmcq-muted); }

.mmcq-savedlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.mmcq-savedlist > li {
	padding: 14px 16px;
	border: 1px solid var(--mmcq-line);
	border-radius: 10px;
	background: var(--mmcq-paper);
}

.mmcq-saved-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 8px;
}

.mmcq-saved-head strong { font-size: 14px; overflow-wrap: anywhere; }

/* A form, so it is a POST with a nonce rather than a link that deletes
   something - but it should read as the quiet action it is, not as a button. */
.mmcq-saved-remove { margin: 0; flex: 0 0 auto; }
.mmcq-saved-remove button {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 13px;
	color: var(--mmcq-muted);
	text-decoration: underline;
	cursor: pointer;
}
.mmcq-saved-remove button:hover,
.mmcq-saved-remove button:focus { color: #c0392b; }

.mmcq-saved-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; font-size: 13px; color: var(--mmcq-muted); }
.mmcq-saved-when { margin: 6px 0 0; font-size: 12.5px; color: var(--mmcq-muted); }
.mmcq-savedlist .mmcq-copy { margin: 0; }

@media (max-width: 600px) {
	.mmcq-saved-head { flex-direction: column; align-items: flex-start; gap: 4px; }
}