.memberauth-member-screen {
	margin: 0;
	background: #f4f6f8;
	color: #1d2327;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.memberauth-skip-link {
	position: fixed;
	top: -100px;
	left: 1rem;
	z-index: 100000;
	padding: .75rem 1rem;
	background: var(--memberauth-surface, #fff);
	color: #111;
}

.memberauth-skip-link:focus { top: 1rem; }

.memberauth-screen-wrap {
	display: grid;
	min-height: 100vh;
	box-sizing: border-box;
	place-items: center;
	padding: clamp(1rem, 5vw, 4rem);
}

/* Keep embeddable login content inside the theme instead of creating a second page canvas. */
.memberauth-login-component {
	--memberauth-card-max-width: 36rem;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	background: transparent;
}

.memberauth-login-component .memberauth-screen-wrap {
	display: flex;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-height: 0;
	padding: clamp(1rem, 3vw, 2rem) 0;
	align-items: flex-start;
	justify-content: center;
}

.memberauth-login-component.memberauth-card-width-small { --memberauth-card-max-width: 28rem; }
.memberauth-login-component.memberauth-card-width-medium { --memberauth-card-max-width: 36rem; }
.memberauth-login-component.memberauth-card-width-large { --memberauth-card-max-width: 44rem; }
.memberauth-login-component.memberauth-widget-align-left .memberauth-screen-wrap { justify-content: flex-start; }
.memberauth-login-component.memberauth-widget-align-center .memberauth-screen-wrap { justify-content: center; }
.memberauth-login-component.memberauth-widget-align-right .memberauth-screen-wrap { justify-content: flex-end; }

.memberauth-preview-screen .memberauth-screen-wrap {
	min-height: 28rem;
}

.memberauth-member-screen .memberauth-card {
	width: min(100%, 36rem);
	box-sizing: border-box;
	padding: clamp(1.5rem, 5vw, 3.25rem);
	border: 1px solid #dcdcde;
	border-radius: 14px;
	background: var(--memberauth-surface, #fff);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .09);
}

.memberauth-login-component .memberauth-card {
	width: 100%;
	max-width: min(100%, var(--memberauth-card-max-width));
	min-width: 0;
	overflow-wrap: anywhere;
}

.memberauth-login-component .memberauth-button {
	max-width: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
}

.memberauth-member-screen.memberauth-layout-split .memberauth-card { border-left: 8px solid var(--memberauth-primary, #2457d6); }
.memberauth-member-screen.memberauth-layout-minimal .memberauth-card {
	max-width: 30rem;
	padding: 2rem;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.memberauth-logo {
	display: block;
	max-width: min(14rem, 70%);
	max-height: 7rem;
	width: auto;
	height: auto;
	margin: 0 auto 1.5rem;
}

.memberauth-organization-name {
	margin: 0 0 .65rem;
	color: #50575e;
	font-size: .95rem;
	font-weight: 650;
	letter-spacing: .02em;
}

.memberauth-member-screen .memberauth-card h1 {
	margin: 0 0 1rem;
	font-size: clamp(1.75rem, 4vw, 2.35rem);
	line-height: 1.15;
}

.memberauth-description,
.memberauth-notice { line-height: 1.65; }

.memberauth-notice {
	margin: 1.25rem 0;
	padding: 1rem;
	border-left: 4px solid var(--memberauth-primary, #2457d6);
	background: #f6f7f7;
}

.memberauth-debug-code {
	margin: 1rem 0;
	color: #50575e;
	font-size: .9rem;
}

.memberauth-actions { display: flex; margin-top: 1.5rem; }
.memberauth-align-left { justify-content: flex-start; }
.memberauth-align-center { justify-content: center; }
.memberauth-align-right { justify-content: flex-end; }

.memberauth-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	box-sizing: border-box;
	padding: .8rem 1.35rem;
	background: var(--memberauth-primary, #2457d6);
	color: var(--memberauth-primary-text, #fff);
	font-weight: 650;
	line-height: 1.2;
	text-decoration: none;
}

.memberauth-button:hover { color: var(--memberauth-primary-text, #fff); filter: brightness(.9); }
.memberauth-button:focus-visible,
.memberauth-return a:focus-visible { outline: 3px solid #000; outline-offset: 3px; }
.memberauth-shape-square { border-radius: 0; }
.memberauth-shape-rounded { border-radius: 8px; }
.memberauth-shape-pill { border-radius: 999px; }
.memberauth-size-small { min-height: 40px; padding: .65rem 1rem; }
.memberauth-size-medium { min-height: 46px; }
.memberauth-size-large { min-height: 52px; padding: 1rem 1.75rem; }
.memberauth-return { margin: 1.25rem 0 0; text-align: center; }
.memberauth-support { margin: .65rem 0 0; text-align: center; }
.memberauth-attribution { margin: 2rem 0 0; color: #646970; font-size: .8rem; text-align: center; }

.memberauth-member-notice {
	box-sizing: border-box;
	max-width: 72rem;
	margin: 1rem auto;
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--memberauth-primary, #2457d6);
	background: var(--memberauth-surface, #fff);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12);
}

@media (prefers-reduced-motion: reduce) {
	.memberauth-button { transition: none; }
}