/*
Login/Register and its state screens (login-link-sent, login-link-expired, login-link-invalid).
Sketch "Login Register" frame — body already carries the site-wide dark gradient
(Base.css's body rule), so this page adds only the cloud art and its own content.
*/

/*
159px total below the header to the heading's top edge. .AuthClouds is absolutely
positioned against .AuthPage, so it ignores .AuthPage's own padding-top and only moves
with a change to an ancestor's box — hence the split: 31px here (which shifts .AuthPage's
whole box, cloud included) and the remaining 128px on .AuthPage itself (which only moves
the in-flow heading/body/form past the cloud).
*/
main {
	padding-top:                   31px;
}

.AuthPage {
	overflow-x:                    hidden;
	padding-top:                   128px;
	position:                      relative;
}

.AuthClouds {
	display:                       block;
	left:                          50%;
	position:                      absolute;
	top:                           0;
	transform:                     translateX(-50%);
	width:                         411px;
}

.AuthPageInner {
	margin-inline:                 auto;
	max-width:                     calc(var(--ReadableContent-MaxWidth) + 2 * var(--Viewport-InlinePadding));
	padding-inline:                var(--Viewport-InlinePadding);
	position:                      relative;
}

.AuthTitle {
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     48px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	line-height:                   48px;
	margin:                        0 0 8px;
}

.AuthBodyText {
	font-family:                   var(--Typeface03-FontFamily);
	font-size:                     16px;
	font-weight:                   400;
	line-height:                   24px;
	margin:                        0 0 40px;
}

.AuthInlineLink {
	color:                         inherit;
	text-decoration:               underline;
}

.AuthButton {
	width:                         100%;
}

/*
MagicLinkForm.tpl — LoginForm component markup, styled with Base.css's generic
.FormField* classes (no Forms/*.json backs this, so Templates/Form/*.tpl isn't in play).
*/
.MagicLinkFormError:empty {
	display:                       none;
}

.MagicLinkFormInner .FormField {
	margin-bottom:                 40px;
}

.MagicLinkFormSubmit {
	width:                         100%;
}