/*
 * App shell: the theme-free document every customer page renders in (account,
 * renew / auto-renew / upgrade, Paddle review, account setup, receipts).
 * Page primitives and their tokens live in customer.css; this file supplies the
 * document itself, the brand header, navigation, footer, and the two forms the
 * account owns (sign-in and details). The plugin loads no web font: the system
 * stack is the app's typeface, and --gc-font is the swap point if that decision
 * changes.
 */
:root {
	color-scheme: light;
}

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

.gc-app {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	margin: 0;
	background: var(--gc-canvas);
	color: var(--gc-ink);
	font-family: var(--gc-font);
	font-size: var(--gc-text-body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* :where() keeps these defaults at zero specificity, so any page class overrides them. */
:where(.gc-app) a {
	color: var(--gc-accent);
}

:where(.gc-app) h1,
:where(.gc-app) h2,
:where(.gc-app) h3,
:where(.gc-app) h4 {
	margin: 0 0 0.5em;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

:where(.gc-app) h1 {
	font-size: var(--gc-text-title);
}

:where(.gc-app) h2 {
	font-size: var(--gc-text-section);
}

:where(.gc-app) h3 {
	font-size: 17px;
}

:where(.gc-app) p {
	margin: 0 0 1em;
}

:where(.gc-app) img {
	max-width: 100%;
	height: auto;
}

:where(.gc-app) button,
:where(.gc-app) input,
:where(.gc-app) select,
:where(.gc-app) textarea {
	font: inherit;
}

/* Header: brand and at most two links. */
.gc-app__header {
	background: var(--gc-surface);
	border-bottom: 1px solid var(--gc-hairline);
}

.gc-app__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: min(100% - 32px, 1040px);
	min-height: 64px;
	margin: 0 auto;
}

.gc-app__brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--gc-ink);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
}

.gc-app__brand img,
.gc-app__mark {
	display: block;
	width: 28px;
	height: 28px;
}

.gc-app__brand img {
	object-fit: contain;
}

.gc-app__mark {
	display: grid;
	place-items: center;
	border-radius: 7px;
	background: var(--gc-ink);
	color: var(--gc-surface);
	font-size: var(--gc-text-meta);
	line-height: 1;
}

.gc-app__nav {
	display: flex;
	gap: 20px;
	font-size: var(--gc-text-meta);
}

.gc-app__nav a {
	color: var(--gc-meta);
	text-decoration: none;
}

.gc-app__nav a:hover,
.gc-app__nav a.is-current {
	color: var(--gc-ink);
}

.gc-app__main {
	flex: 1;
	width: min(100% - 32px, 1040px);
	margin: 0 auto;
	padding: 40px 0 72px;
}

.gc-app__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	width: min(100% - 32px, 1040px);
	margin: 0 auto;
	padding: 20px 0 40px;
	border-top: 1px solid var(--gc-hairline);
	color: var(--gc-meta);
	font-size: var(--gc-text-small);
}

.gc-app__footer a {
	color: var(--gc-meta);
}

/* Sign-in: WordPress core's own form, styled here so login plugins keep their place. */
.gc-sign-in form {
	margin-top: 8px;
}

.gc-sign-in form p {
	margin: 0 0 16px;
}

.gc-sign-in label {
	display: block;
	margin-bottom: 6px;
	font-size: var(--gc-text-meta);
	font-weight: 500;
}

.gc-sign-in .login-remember label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
}

.gc-sign-in input[type="text"],
.gc-sign-in input[type="password"],
.gc-details input[type="text"],
.gc-details input[type="email"],
.gc-details input[type="password"] {
	display: block;
	width: 100%;
	min-height: var(--gc-control-height);
	padding: 0 14px;
	border: 1px solid var(--gc-control-border);
	border-radius: var(--gc-radius-field);
	background: var(--gc-surface);
	color: var(--gc-ink);
}

.gc-sign-in .gc-fine {
	margin-top: 8px;
}

/* Account details: one flat card per fact. */
.gc-details__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
}

.gc-details__card {
	padding: 24px;
	border: 1px solid var(--gc-surface-border);
	border-radius: var(--gc-radius-panel);
	background: var(--gc-surface);
}

.gc-details__card h3 {
	margin-bottom: 4px;
	font-size: var(--gc-text-body);
}

/* The account stylesheet zeroes paragraph margins; these rows keep their own. */
.gc-details .gc-details__current {
	margin: 0 0 16px;
	color: var(--gc-meta);
	font-size: var(--gc-text-meta);
	overflow-wrap: anywhere;
}

.gc-details .gc-details__pending {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--gc-surface-border);
	border-radius: var(--gc-radius-field);
	font-size: var(--gc-text-meta);
}

.gc-details__pending form {
	display: inline;
}

.gc-details label {
	display: block;
	margin: 0 0 14px;
	font-size: var(--gc-text-meta);
	font-weight: 500;
}

.gc-details label input {
	margin-top: 6px;
	font-weight: 400;
}

.gc-details .gc-button {
	width: 100%;
	min-height: var(--gc-control-height);
	margin-top: 4px;
}

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

.gc-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.gc-quiet-button {
	min-height: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--gc-meta);
	text-decoration: underline;
	cursor: pointer;
}

/* Account setup: the purchase email, shown as a fact. */
.gc-claim__email {
	margin: 0 0 20px;
	padding: 12px 14px;
	border: 1px solid var(--gc-surface-border);
	border-radius: var(--gc-radius-field);
	font-family: var(--gc-font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
	font-size: var(--gc-text-control);
	overflow-wrap: anywhere;
}

.gc-claim .gc-button + .gc-fine,
.gc-claim form + .gc-fine {
	margin-top: 16px;
}

/* Account setup: the optional product-updates box. */
.gc-claim__updates {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 4px 0 20px;
	font-size: var(--gc-text-control);
	cursor: pointer;
}

.gc-claim__updates input {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--gc-accent);
}

/* Support: a message form, so wider than a one-decision card. */
.gc-support-page .gc-customer--single {
	width: min(100% - 32px, 720px);
}

/* Receipts print without the app chrome. */
@media print {
	.gc-app {
		background: var(--gc-surface);
	}

	.gc-app__header,
	.gc-app__footer,
	.gc-print {
		display: none;
	}

	.gc-app__main {
		width: auto;
		padding: 0;
	}
}

@media (max-width: 600px) {
	.gc-app__bar {
		min-height: 56px;
	}

	.gc-app__main {
		padding: 24px 0 56px;
	}
}