@CHARSET "UTF-8";

/* ATAI-365 — Redesigned signup /name page (PropStream only). Layered on top of
   login-redesign.css, which supplies the shared body.redesign shell (full-bleed rotating
   background, gradient, right-hand floating card, inputs, errors, button, footer).
   Only the /name-specific differences from the login page live here. */

/* includes.jsp paints the page in the brand colour (blue); signup.css, which the old /name page
   loaded, repainted it white. Keep it white here so phone overscroll and the browser-bar tint
   stay white, as in the Figma mobile frames. */
body.redesign {
	background-color: #FFF;
}

/* Figma "logo-ps": stacked PropStream mark at 133.1x75, not login's fixed 229x75 PNG */
body.redesign #form-logo-container img {
	width: 133.1px;
	height: 75px;
}

/* Figma header: Inter Semi Bold 30px / 150%, Grey/800, orange "FREE" */
body.redesign #name-header {
	margin: 0;
	font-size: 30px;
	font-weight: 600;
	line-height: 150%;
	color: var(--Grey-800, #3C4654);
	text-align: center;
}

body.redesign #name-header .brand-highlight {
	color: var(--login-orange-500);
}

/* full-width children below the header: form, links, divider */
body.redesign #nameForm,
body.redesign .content-middle .subtext,
body.redesign .content-middle .divider {
	align-self: stretch;
	width: 100%;
	box-sizing: border-box;
}

body.redesign #nameForm {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* The invisible reCAPTCHA host is empty (its badge is position:fixed); taking it out of the
   flex flow keeps it from adding a 12px gap, so Figma "Frame 30" hugs at 428px. */
body.redesign #recaptcha-container {
	position: absolute;
	z-index: 10; /* keep the fixed reCAPTCHA badge above the redesigned (position:relative) Submit button, as on the old page */
}

/* Figma: the card ("Form") keeps 64px side padding (304px inside), while the Sign Up form
   group ("Frame 30") is 307px wide and centred, overhanging 1.5px each side. Desktop/tablet
   only; on mobile the group fills the width. */
@media (min-width: 768px) {
	body.redesign .content-middle {
		width: 307px;
		flex-shrink: 0;
	}

	/* style.css gives #form-content overflow:auto; the 1.5px overhang (inside the 64px
	   padding, so nothing is clipped) would otherwise add a horizontal scrollbar. */
	body.redesign #form-content {
		overflow-x: hidden;
	}
}

/* Figma: "Already have an account?" sits 12px under Submit, not .content-middle's 24px gap */
body.redesign #nameForm + .subtext {
	margin-top: -12px;
}

/* login-redesign.css sizes .btnText to the 53px "Log in" label; "Submit" is wider */
body.redesign .btn-primary .btnText {
	width: auto;
}

/* PRD: <768px is mobile, >=768px is desktop. login-redesign.css's mobile block is
   max-width:768px, so put the desktop card back at exactly 768px for /name (the login
   page itself is out of scope for ATAI-365). */
@media (min-width: 768px) and (max-width: 768px) {
	body.redesign {
		overflow: hidden;
	}

	body.redesign #bg-layer,
	body.redesign #bg-gradient-overlay {
		display: block;
	}

	body.redesign #form-outer {
		height: 100vh;
		min-height: 0;
	}

	body.redesign #form-container {
		height: 100%;
	}

	body.redesign #form-inner {
		position: absolute;
		top: 32px;
		right: 32px;
		width: 432px;
		max-width: calc(100% - 48px);
		min-height: calc(100vh - 64px);
		border-radius: 12px;
		box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.08), 0px 2px 16px rgba(0, 0, 0, 0.2);
	}

	body.redesign #form-content {
		padding: 64px 64px 32px 64px;
	}
}

/* Figma mobile: the card ("Login Page Mobile") pads 32/24/32/24 and the form inside it
   ("Sign In Form/Sign Up", Fill 438 x Fill 1023 at 486x1087) adds 32px on top, so the logo
   starts 64px down and the footer ends 32px above the bottom edge. */
@media (max-width: 767px) {
	body.redesign #form-content {
		padding: 64px 24px 32px 24px;
	}

	/* login-redesign.css colours the page wrapper dark grey behind the photo; mobile has no photo. */
	body.redesign #form-outer {
		background-color: #FFF;
	}

	/* When reCAPTCHA is on, its fixed bottom-right badge would cover the copyright links;
	   keep the footer clear of it, as the old /name page did (ATAI-75). */
	body.redesign #form-content:has(#recaptcha-container) {
		padding-bottom: 90px;
	}
}