/* GREA 2.0: presentation only. All rules require an allowlisted page class.
 * Markup verified against User Registration 5.2.7 and eLearning 2.1.6.
 * Never override display on conditional fields, [hidden], or Google iframes.
 */
body.grea-v2-ui {
	--grea-navy: #0b1426;
	--grea-surface: #142139;
	--grea-input: #0e192d;
	--grea-border: #64748b;
	--grea-gold: #e4bf73;
	--grea-text: #f4f6fb;
	--grea-muted: #bcc8da;
	--grea-error: #ffb4ba;
}

/* Theme shell only: existing logo, navigation, titles and breadcrumbs remain. */
body.grea-v2-ui .tg-page-header {
	background: var(--grea-navy);
	border-bottom: 1px solid var(--grea-gold);
	padding-block: clamp(24px, 4vw, 48px);
}

body.grea-v2-ui .tg-page-header .tg-page-header__title {
	color: var(--grea-text);
	font-family: system-ui, sans-serif;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -.025em;
}

body.grea-v2-ui .tg-page-header .breadcrumb-trail ul li,
body.grea-v2-ui .tg-page-header .breadcrumb-trail ul li::after {
	color: var(--grea-muted);
}

body.grea-v2-ui .tg-page-header a {
	color: var(--grea-gold);
	text-underline-offset: 4px;
}

/* Keep the account content canvas unchanged: it may host Masteriyo. */
body.grea-v2-ui:is(.grea-v2-ui--login, .grea-v2-ui--registration) .site-content {
	background: radial-gradient(ellipse at top, #1c2e4b, var(--grea-navy) 70%);
	padding-block: clamp(24px, 5vw, 64px);
}

/* eLearning's singular page template renders entry-header > h1.entry-title;
 * tg-page-content__title belongs to a separate title rendering path.
 */
body.grea-v2-ui:is(.grea-v2-ui--login, .grea-v2-ui--registration) #primary .entry-header > .entry-title,
body.grea-v2-ui:is(.grea-v2-ui--login, .grea-v2-ui--registration) .tg-page-content__title {
	color: var(--grea-text);
	font-family: system-ui, sans-serif;
	font-size: clamp(28px, 4vw, 42px);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -.025em;
	text-align: center;
}

body.grea-v2-ui :is(#user-registration, .ur-frontend-form, .grea-google-auth) {
	box-sizing: border-box;
	color: var(--grea-text);
	font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.6;
}

body.grea-v2-ui :is(#user-registration, .ur-frontend-form) {
	width: 100%;
	max-width: 720px;
	margin: 0 auto 24px;
	padding: clamp(20px, 4vw, 40px);
	background: var(--grea-surface);
	border: 1px solid var(--grea-border);
	border-top: 3px solid var(--grea-gold);
	border-radius: 20px;
	box-shadow: 0 20px 48px #00000024;
}

body.grea-v2-ui--login :is(#user-registration, .ur-frontend-form) {
	max-width: 560px;
}

body.grea-v2-ui #user-registration .ur-frontend-form {
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

body.grea-v2-ui .ur-frontend-form .ur-form-grid {
	min-width: 0;
}

body.grea-v2-ui :is(#user-registration, .ur-frontend-form) :is(h2, h3, h4, legend, label, .user-registration-login-title) {
	color: var(--grea-text);
	font-family: inherit;
}

body.grea-v2-ui .ur-frontend-form label {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 8px;
}

body.grea-v2-ui :is(.ur-frontend-form, .grea-google-link) :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	min-height: 52px;
	padding: 12px 16px;
	background: var(--grea-input);
	color: var(--grea-text);
	border: 1px solid var(--grea-border);
	border-radius: 10px;
	font: inherit;
	line-height: 1.5;
	color-scheme: dark;
}

body.grea-v2-ui .ur-frontend-form textarea {
	min-height: 128px;
	resize: vertical;
}

body.grea-v2-ui :is(.ur-frontend-form, .grea-google-link) input[type="password"],
body.grea-v2-ui .ur-frontend-form .password-input-group input {
	padding-inline-end: 52px;
}

body.grea-v2-ui :is(.ur-frontend-form, .grea-google-link) input::placeholder,
body.grea-v2-ui .ur-frontend-form textarea::placeholder {
	color: var(--grea-muted);
	opacity: 1;
}

body.grea-v2-ui .ur-frontend-form :is(input[type="checkbox"], input[type="radio"]) {
	width: 22px;
	height: 22px;
	min-width: 22px;
	accent-color: var(--grea-gold);
	vertical-align: middle;
}

body.grea-v2-ui .ur-frontend-form .user-registration-form__label-for-checkbox {
	min-height: 48px;
	align-content: center;
}

body.grea-v2-ui :is(#user-registration, .ur-frontend-form) a,
body.grea-v2-ui .grea-google-auth a {
	color: var(--grea-gold);
	text-decoration: underline;
	text-underline-offset: 4px;
}

body.grea-v2-ui .ur-frontend-form .password_preview {
	width: 48px;
	height: 48px;
	line-height: 48px;
	text-align: center;
	text-decoration: none;
}

body.grea-v2-ui :is(.ur-frontend-form .ur-submit-button, #user-registration .user-registration-Button, .grea-google-actions button) {
	box-sizing: border-box;
	min-height: 52px;
	padding: 12px 24px;
	background: var(--grea-gold);
	color: var(--grea-navy);
	border: 1px solid var(--grea-gold);
	border-radius: 10px;
	font: inherit;
	font-weight: 700;
	line-height: 1.5;
	white-space: normal;
	cursor: pointer;
	text-decoration: none;
}

body.grea-v2-ui .ur-frontend-form .ur-submit-button {
	width: 100%;
}

/* UR 5.2.7's login rules use #user-registration plus a long class chain.
 * The verified eLearning #primary and UR #ur-frontend-form IDs outrank that
 * chain without !important, including the bordered login template.
 */
body.grea-v2-ui:is(.grea-v2-ui--login, .grea-v2-ui--registration) #primary #ur-frontend-form .user-registration-form-login .ur-submit-button {
	background: var(--grea-gold);
	color: var(--grea-navy);
	border: 1px solid var(--grea-gold);
	border-radius: 10px;
	font-weight: 700;
}

body.grea-v2-ui:is(.grea-v2-ui--login, .grea-v2-ui--registration) #primary #ur-frontend-form .user-registration-form-login .ur-submit-button:hover:not(:disabled) {
	background: #f1d49a;
	color: var(--grea-navy);
	border-color: #f1d49a;
}

/* Preserve link destinations and native Google rendering. The two-ID scope
 * beats UR's login/register/recovery link rules, including their state rules.
 */
body.grea-v2-ui:is(.grea-v2-ui--login, .grea-v2-ui--registration) #primary :is(#user-registration, #ur-frontend-form, #user-registration-form-747) a:not(.user-registration-Button):not(.ur-submit-button) {
	color: var(--grea-gold);
}

body.grea-v2-ui :is(.ur-submit-button, .user-registration-Button, .grea-google-actions button):hover:not(:disabled) {
	background: #f1d49a;
	color: var(--grea-navy);
}

body.grea-v2-ui :is(#user-registration, .ur-frontend-form, .grea-google-auth, .tg-page-header) :is(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 3px solid var(--grea-gold);
	outline-offset: 4px;
	box-shadow: 0 0 0 2px var(--grea-navy);
}

body.grea-v2-ui :is(.ur-frontend-form, .grea-google-auth) :is(button, input, select, textarea):disabled {
	opacity: .65;
	cursor: not-allowed;
}

body.grea-v2-ui :is(.user-registration-error, .user-registration-message, .user-registration-info) {
	box-sizing: border-box;
	max-width: 720px;
	margin: 16px auto;
	padding: 16px 24px;
	background: var(--grea-surface);
	color: var(--grea-text);
	border: 1px solid var(--grea-border);
	border-inline-start: 4px solid var(--grea-gold);
	border-radius: 10px;
	overflow-wrap: anywhere;
}

body.grea-v2-ui .user-registration-error {
	border-inline-start-color: var(--grea-error);
	color: var(--grea-error);
}

body.grea-v2-ui .ur-frontend-form :is(label.ur-error, .required, .ur-error-list) {
	color: var(--grea-error);
}

body.grea-v2-ui .ur-frontend-form [aria-invalid="true"] {
	border-color: var(--grea-error);
}

body.grea-v2-ui .ur-frontend-form :is(.description, .user-registration-login-description) {
	color: var(--grea-muted);
}

/* Google renders after the login wrapper; registration injects it inside.
 * Greater specificity survives the existing Google stylesheet's footer load.
 * The official Google-rendered button is intentionally not restyled/resized.
 */
body.grea-v2-ui .grea-google-auth {
	max-width: 560px;
	margin: 24px auto;
	padding: 20px;
	background: var(--grea-surface);
	border: 1px solid var(--grea-border);
	border-radius: 16px;
}

body.grea-v2-ui :is(#user-registration, .ur-frontend-form) .grea-google-auth {
	padding: 0;
	border: 0;
	border-radius: 0;
}

body.grea-v2-ui .grea-google-separator {
	color: var(--grea-muted);
}

body.grea-v2-ui .grea-google-separator::before,
body.grea-v2-ui .grea-google-separator::after {
	border-color: var(--grea-border);
}

body.grea-v2-ui .grea-google-status {
	color: var(--grea-text);
	overflow-wrap: anywhere;
}

body.grea-v2-ui .grea-google-actions {
	gap: 12px;
}

body.grea-v2-ui .grea-google-actions .grea-google-cancel {
	background: transparent;
	color: var(--grea-gold);
}

/* Only User Registration account markup; no Masteriyo component selectors. */
body.grea-v2-ui--account #user-registration {
	max-width: 1120px;
}

body.grea-v2-ui #user-registration .user-registration-MyAccount-navigation {
	background: var(--grea-input);
	border: 1px solid var(--grea-border);
	border-radius: 12px;
}

body.grea-v2-ui #user-registration .user-registration-MyAccount-navigation ul {
	margin: 0;
	padding: 8px;
	list-style: none;
}

body.grea-v2-ui #user-registration .user-registration-MyAccount-navigation li a {
	display: block;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 16px;
	border-radius: 8px;
	color: var(--grea-text);
	text-decoration: none;
	overflow-wrap: anywhere;
}

body.grea-v2-ui #user-registration .user-registration-MyAccount-navigation li:is(.is-active, :hover) a {
	background: var(--grea-gold);
	color: var(--grea-navy);
}

body.grea-v2-ui #user-registration .user-registration-MyAccount-content {
	min-width: 0;
	background: var(--grea-surface);
	color: var(--grea-text);
	overflow-wrap: anywhere;
}

@media (max-width: 768px) {
	body.grea-v2-ui .ur-frontend-form .ur-form-row {
		flex-direction: column;
	}

	/* Match UR's own small-screen override of inline grid widths. */
	body.grea-v2-ui .ur-frontend-form .ur-form-row .ur-form-grid {
		width: 100% !important;
		padding-inline: 0;
	}

	body.grea-v2-ui #user-registration :is(.user-registration-MyAccount-navigation, .user-registration-MyAccount-navigation--wrapper, .user-registration-MyAccount-content) {
		float: none;
		width: 100%;
		margin-inline: 0;
	}

	body.grea-v2-ui #user-registration .user-registration-MyAccount-content {
		margin-top: 24px;
	}
}

@media (forced-colors: active) {
	body.grea-v2-ui :is(.ur-frontend-form, .grea-google-auth, #user-registration) {
		border: 1px solid CanvasText;
	}
}