/*
 * Customer surfaces (account, upgrade review, setup, renewal, storefront).
 * One token source for the app shell, receipts, and standalone Paddle checkout.
 * In-theme surfaces inherit GeneratePress colours and keep their marketing
 * shapes. The application uses the same system face and compact controls as
 * checkout, with a smaller control size for account rows.
 */
.gc-app,
.gc-paddle-checkout,
.gc-customer {
	--gc-ink: var(--contrast, #0c0e0f);
	--gc-body: var(--contrast-2, #68758c);
	--gc-meta: #5f6b80;
	--gc-absent: #a8b1c2;
	--gc-canvas: #fafbff;
	--gc-surface: #ffffff;
	--gc-surface-border: #d5dcea;
	--gc-hairline: #e6eaf5;
	--gc-fill: #ebf0fc;
	--gc-fill-alt: #f4f2fc;
	--gc-accent: var(--gc-brand-accent, var(--accent, #6417ff));
	--gc-accent-hover: color-mix(in srgb, var(--gc-accent) 80%, #000);
	--gc-accent-tint: color-mix(in srgb, var(--gc-accent) 10%, #fff);
	--gc-primary-bg: var(--contrast, #0c0e0f);
	--gc-primary-hover: color-mix(in srgb, var(--gc-primary-bg) 88%, #fff);
	--gc-ok: #00a32a;
	--gc-warn: #dba617;
	--gc-error: #d63638;
	--gc-idle: #c4cee2;
	--gc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	--gc-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
	--gc-radius-action: 6px;
	--gc-radius-panel: 12px;
	--gc-radius-field: 10px;
	--gc-control-border: #d2d2d7;
	--gc-control-hover-border: #a1a1a6;
	--gc-disabled-bg: #e3e3e5;
	--gc-control-height: 48px;
	--gc-control-height-compact: 44px;
	--gc-text-small: 13px;
	--gc-text-meta: 14px;
	--gc-text-control: 15px;
	--gc-text-body: 16px;
	--gc-text-section: 21px;
	--gc-text-title: 25px;
	--gc-space-1: 8px;
	--gc-space-2: 16px;
	--gc-space-3: 24px;
	--gc-space-4: 32px;
	--gc-space-6: 48px;
}

/* The storefront and shadow preview remain part of the surrounding theme. */
.gc-customer {
	--gc-radius-action: 100px;
	--gc-radius-panel: 16px;
	color: var(--gc-ink);
	font-size: var(--gc-text-body);
	line-height: 1.6;
}

.gc-app .gc-customer {
	--gc-radius-action: inherit;
	--gc-radius-panel: inherit;
}

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

.gc-customer :where(a) {
	color: var(--gc-accent);
	text-decoration: none;
	transition: color 140ms ease;
}

.gc-customer :where(a:hover) {
	color: var(--gc-accent-hover);
}

.gc-app :focus,
.gc-paddle-checkout :focus,
.gc-customer :focus {
	outline: none;
}

.gc-app :focus-visible,
.gc-paddle-checkout :focus-visible,
.gc-customer :focus-visible {
	box-shadow: 0 0 0 2px var(--gc-surface), 0 0 0 4px var(--gc-ink);
}

/* Single-action screens: one 560px card on the canvas. */
.gc-customer--single {
	width: min(100% - 32px, 560px);
	margin: 0 auto;
	padding: 56px 0 76px;
}

.gc-panel {
	padding: clamp(24px, 5vw, 40px);
	border: 1px solid var(--gc-surface-border);
	border-radius: var(--gc-radius-panel);
	background: var(--gc-surface);
}

.gc-eyebrow {
	margin: 0 0 12px;
	color: var(--gc-meta);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.gc-eyebrow--accent {
	color: var(--gc-accent);
}

.gc-statement {
	margin: 0 0 12px;
	font-size: var(--gc-text-title);
	font-weight: 600;
	line-height: 1.14;
	letter-spacing: -0.015em;
}

.gc-lede {
	margin: 0 0 24px;
	color: var(--gc-body);
	font-size: var(--gc-text-body);
	line-height: 1.6;
}

.gc-status {
	display: inline-flex;
	align-items: center;
	gap: var(--gc-space-1);
	color: var(--gc-meta);
	font-size: var(--gc-text-small);
	font-weight: 500;
	letter-spacing: normal;
	text-transform: none;
}

.gc-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gc-idle);
	flex: none;
}

.gc-status--ok::before { background: var(--gc-ok); }
.gc-status--warn::before { background: var(--gc-warn); }
.gc-status--error::before { background: var(--gc-error); }

.gc-status--block {
	display: flex;
	margin: 0 0 20px;
	font-size: var(--gc-text-meta);
	font-weight: 400;
}

.gc-fact {
	display: inline-block;
	margin: 0 0 8px;
	color: var(--gc-meta);
	font-size: var(--gc-text-meta);
}

.gc-facts {
	margin: 24px 0 0;
	padding: 0;
	border-top: 1px solid var(--gc-hairline);
}

.gc-facts > div {
	display: flex;
	justify-content: space-between;
	gap: var(--gc-space-2);
	padding: 14px 0;
	border-bottom: 1px solid var(--gc-hairline);
}

.gc-facts dt {
	color: var(--gc-body);
	font-size: var(--gc-text-control);
	font-weight: 400;
}

.gc-facts dd {
	margin: 0;
	color: var(--gc-ink);
	font-size: var(--gc-text-control);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.gc-facts dd small {
	display: block;
	color: var(--gc-meta);
	font-size: var(--gc-text-meta);
}

.gc-facts--plans {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--gc-space-2);
	margin: 24px 0 0;
	padding: 16px 20px;
	border: 1px solid var(--gc-surface-border);
	border-radius: var(--gc-radius-field);
	background: var(--gc-fill);
}

.gc-facts--plans > div {
	display: block;
	padding: 0;
	border: 0;
}

.gc-facts--plans > div + div {
	text-align: right;
}

/* The arrow is the grid container's own pseudo-element, so it is a real grid item in the middle track. */
.gc-facts--plans::before {
	content: "→";
	grid-column: 2;
	grid-row: 1;
	color: var(--gc-accent);
	font-size: 18px;
}

.gc-facts--plans dt {
	color: var(--gc-meta);
	font-size: 12px;
	font-weight: 500;
}

.gc-facts--plans dd {
	margin-top: 4px;
	font-size: 17px;
	font-weight: 500;
	text-align: inherit;
}

.gc-due {
	margin: 24px 0 8px;
}

.gc-due__label {
	display: block;
	color: var(--gc-body);
	font-size: var(--gc-text-control);
}

.gc-due__amount {
	display: block;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
}

.gc-due__tax {
	margin: 8px 0 0;
	color: var(--gc-meta);
	font-size: var(--gc-text-meta);
}

.gc-sentence {
	margin: 20px 0 0;
	color: var(--gc-ink);
	font-size: var(--gc-text-control);
}

.gc-sentence strong {
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

.gc-actions {
	display: grid;
	gap: 12px;
	margin-top: var(--gc-space-3);
}

.gc-button,
.gc-sign-in .login-submit input[type="submit"],
.gc-print button,
.gc-paddle-checkout__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--gc-control-height);
	padding: 0 24px;
	border: 1px solid var(--gc-primary-bg);
	border-radius: var(--gc-radius-action);
	background: var(--gc-primary-bg);
	color: var(--gc-surface);
	font: inherit;
	font-size: var(--gc-text-control);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.gc-button:hover,
.gc-sign-in .login-submit input[type="submit"]:hover,
.gc-print button:hover,
.gc-paddle-checkout__button:hover {
	background: var(--gc-primary-hover);
	border-color: var(--gc-primary-hover);
	color: var(--gc-surface);
}

.gc-button--secondary,
.gc-print button {
	background: var(--gc-surface);
	border-color: var(--gc-control-border);
	color: var(--gc-ink);
}

.gc-button--secondary:hover,
.gc-print button:hover {
	background: var(--gc-surface);
	border-color: var(--gc-control-hover-border);
	color: var(--gc-ink);
}

.gc-button--unavailable,
.gc-button:disabled,
.gc-sign-in .login-submit input[type="submit"]:disabled,
.gc-print button:disabled {
	background: var(--gc-disabled-bg);
	border-color: var(--gc-disabled-bg);
	color: var(--gc-absent);
	cursor: default;
}

/* A submitted action while its request is on its way (account.js). */
.gc-button[aria-busy="true"],
.gc-button[aria-busy="true"]:hover {
	background: var(--gc-disabled-bg);
	border-color: var(--gc-disabled-bg);
	color: var(--gc-absent);
	cursor: wait;
}

.gc-app button[aria-busy="true"]::after,
.gc-account button[aria-busy="true"]::after {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-left: 8px;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	vertical-align: -0.125em;
	animation: gc-busy 700ms linear infinite;
}

@keyframes gc-busy {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.gc-app button[aria-busy="true"]::after,
	.gc-account button[aria-busy="true"]::after {
		animation: none;
	}
}

.gc-quiet {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	color: var(--gc-accent);
	font-size: var(--gc-text-control);
}

/* The same quiet action when it has to post a form. */
button.gc-quiet {
	padding: 0;
	border: 0;
	background: none;
	font-family: inherit;
	cursor: pointer;
	transition: color 140ms ease;
}

button.gc-quiet:hover {
	color: var(--gc-accent-hover);
}

.gc-fine {
	margin: 20px 0 0;
	color: var(--gc-meta);
	font-size: var(--gc-text-meta);
}

.gc-fine a {
	color: var(--gc-accent);
}

.gc-notice-line {
	margin: 16px 0 0;
	color: var(--gc-ink);
	font-size: var(--gc-text-control);
}

.gc-field {
	display: block;
	margin: 0 0 16px;
	font-size: var(--gc-text-control);
}

.gc-field input {
	display: block;
	width: 100%;
	min-height: var(--gc-control-height);
	margin-top: 6px;
	padding: 0 14px;
	border: 1px solid var(--gc-control-border);
	border-radius: var(--gc-radius-field);
	font: inherit;
	color: var(--gc-ink);
	background: var(--gc-surface);
}

.gc-app input:disabled,
.gc-app select:disabled,
.gc-app textarea:disabled {
	background: var(--gc-disabled-bg);
	color: var(--gc-meta);
	cursor: default;
}

@media (max-width: 600px) {
	.gc-statement {
		font-size: 23px;
	}

	.gc-facts--plans {
		grid-template-columns: 1fr;
	}

	.gc-facts--plans > div + div {
		text-align: left;
	}

	.gc-facts--plans::before {
		content: "↓";
		grid-column: 1;
		grid-row: 2;
	}

	.gc-due__amount {
		font-size: 28px;
	}

	.gc-customer--single {
		padding: 32px 0 56px;
	}
}