/*
	Whiteboard signed-out pages (login, register, password reset, public pages)

	Split out of style.css: these rules are only ever used on the
	pages that load this file (see includes/header.php), so every other
	page no longer parses them. Same cascade order as before, same
	at-rule wrapping. Edit them here.
*/

.whiteboard-404-layout-public .whiteboard-auth-logo {
	margin-bottom: 0;
	max-width: min( 320px, 68vw );
}

/* Login / Register / Forgot Password */
.whiteboard-auth-page .whiteboard-main {
	justify-content: center;
	padding: 24px 0;
}

.whiteboard-auth-layout,
.whiteboard-login-layout {
	align-items: center;
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	gap: clamp( 28px, 5vh, 48px );
	justify-content: center;
	max-width: none;
	min-height: calc( 100vh - 120px );
	padding: clamp( 28px, 5vh, 64px ) 24px 48px;
	width: 100%;
}

.whiteboard-auth-logo {
	display: block;
	filter: none;
	height: auto;
	margin: 0 auto 4px;
	max-width: min( 360px, 70vw );
	object-fit: contain;
	width: auto;
}

.whiteboard-auth-card,
.whiteboard-login-card {
	border-radius: 18px;
	max-width: 560px;
	overflow: hidden;
	padding: 38px 34px 0;
	width: 100%;
}

.whiteboard-auth-header,
.whiteboard-login-header {
	border-bottom: 1px solid var( --rtb-border );
	margin: 0 -34px 28px;
	padding: 0 34px 28px;
	text-align: center;
}

.whiteboard-auth-header h1,
.whiteboard-login-header h1 {
	font-size: clamp( 2.1rem, 4vw, 3rem );
	letter-spacing: -0.055em;
	line-height: 1.05;
	margin: 0;
}

.whiteboard-auth-kicker,
.whiteboard-auth-header .lead,
.whiteboard-login-header .lead {
	display: none;
}

.whiteboard-auth-form,
.whiteboard-login-form {
	display: grid;
	gap: 18px;
}

.whiteboard-auth-name-grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
}

.whiteboard-login-form > input,
.whiteboard-auth-form > input,
.whiteboard-login-form select,
.whiteboard-login-form textarea {
	background: #eef4ff;
	border: 1px solid rgba( 16, 24, 40, 0.1 );
	border-radius: 12px;
	box-shadow: none;
	font-size: 0.95rem;
	min-height: 46px;
	padding: 0.72rem 0.9rem;
}

.whiteboard-login-form > input:focus,
.whiteboard-auth-form > input:focus,
.whiteboard-login-form select:focus,
.whiteboard-login-form textarea:focus {
	background: #ffffff;
	border-color: var( --rtb-focus-border );
	box-shadow: 0 0 0 4px var( --rtb-focus );
	outline: none;
}

.whiteboard-auth-actions {
	align-items: center;
	display: flex;
	justify-content: flex-end;
	margin-top: 6px;
}

.whiteboard-auth-actions .whiteboard-button {
	margin-top: 0;
	min-width: 148px;
}

.whiteboard-auth-member-note {
	align-items: flex-start;
	background: #fffbeb;
	border: 1px solid #fde68a;
	border-radius: 14px;
	color: #92400e;
	display: flex;
	font-size: 0.84rem;
	font-weight: 750;
	gap: 10px;
	line-height: 1.4;
	padding: 12px 14px;
}

.whiteboard-auth-member-note i {
	color: #d97706;
	flex: 0 0 auto;
	line-height: 1.4;
	margin-top: 1px;
}

.whiteboard-auth-links {
	align-items: center;
	display: flex;
	gap: 20px;
}

.whiteboard-auth-links-single,
.whiteboard-auth-links-single a {
	justify-content: center;
}

.whiteboard-auth-links a {
	align-items: center;
	color: var( --rtb-muted );
	display: inline-flex;
	font-size: 0.78rem;
	font-weight: 800;
	gap: 7px;
	line-height: 1.1;
	min-height: 32px;
	padding: 4px 0;
	text-decoration: none;
	transition: color 0.2s ease;
}

.whiteboard-auth-links a i {
	background: transparent;
	border: 0;
	color: currentColor;
	display: inline-block;
	font-size: 0.9rem;
	transition: color 0.2s ease, transform 0.2s ease;
}

.whiteboard-auth-links a:focus {
	color: var( --rtb-go-dark );
}

@media ( hover: hover ) {
	.whiteboard-auth-links a:hover {
		color: var( --rtb-go-dark );
	}
}

.whiteboard-auth-links a:focus i {
	color: var( --rtb-go-dark );
	transform: translateY( -1px );
}

@media ( hover: hover ) {
	.whiteboard-auth-links a:hover i {
		color: var( --rtb-go-dark );
		transform: translateY( -1px );
	}
}

.whiteboard-login-error {
	font-size: 0.9rem;
	margin: 0 0 18px;
	max-width: none;
}

@media ( max-width: 767.98px ), ( orientation: landscape ) and ( max-width: 1024px ) and ( max-height: 600px ) {
	.whiteboard-auth-card,
	.whiteboard-login-card {
		padding: 38px 34px 0;
	}

	/* Auth / login */
	.whiteboard-auth-page .whiteboard-main {
		justify-content: flex-start;
		padding: 18px 0 0;
	}

	.whiteboard-auth-layout,
	.whiteboard-login-layout {
		justify-content: flex-start;
		padding: 0 16px 28px;
	}

	.whiteboard-auth-logo {
		margin-bottom: 18px;
		max-width: min( 250px, 58vw );
	}

	.whiteboard-auth-card,
	.whiteboard-login-card {
		border-radius: 22px;
		max-width: none;
		width: 100%;
	}

	.whiteboard-auth-header,
	.whiteboard-login-header {
		padding: 24px 20px 20px;
	}

	.whiteboard-auth-header h1,
	.whiteboard-login-header h1 {
		font-size: clamp( 2.05rem, 9vw, 2.65rem );
	}

	.whiteboard-auth-form,
	.whiteboard-login-form {
		padding: 22px 20px 24px;
	}

	.whiteboard-auth-name-grid {
		grid-template-columns: 1fr;
	}

	.whiteboard-auth-actions {
		gap: 16px;
	}

	.whiteboard-auth-actions .whiteboard-button {
		width: 100%;
	}

	.whiteboard-auth-links {
		display: flex;
		gap: 18px;
	}

	.whiteboard-auth-links a {
		background: transparent;
		border: 0;
		border-radius: 0;
		justify-content: center;
		min-height: 32px;
		padding: 4px 0;
		width: auto;
	}
}

@media ( max-width: 520px ) {
	.whiteboard-auth-layout {
		padding-left: 16px;
		padding-right: 16px;
	}

	.whiteboard-auth-links {
		align-items: center;
		flex-direction: row;
		flex-wrap: nowrap;
	}
}

html[data-theme="dark"] .whiteboard-auth-links {
	background: transparent;
}

/* Authentication */
.whiteboard-auth-links {
	background: transparent;
	border-top: 1px solid var( --rtb-border );
	justify-content: space-between;
	margin: 18px -34px 0;
	padding: 14px 34px 16px;
}

.whiteboard-auth-links a:first-child {
	justify-content: flex-start;
	text-align: left;
}

.whiteboard-auth-links a:last-child {
	justify-content: flex-end;
	text-align: right;
}

.whiteboard-auth-links-single a:first-child,
.whiteboard-auth-links-single a:last-child {
	justify-content: center;
	text-align: center;
}

@media ( max-width: 760px ) {
	.whiteboard-auth-page .whiteboard-main {
		padding-top: 46px;
	}

	.whiteboard-auth-layout,
	.whiteboard-login-layout {
		gap: 34px;
		padding-top: 10px;
	}

	.whiteboard-auth-logo {
		margin-bottom: 0;
	}

	.whiteboard-auth-card,
	.whiteboard-login-card {
		padding: 0;
	}

	.whiteboard-auth-header,
	.whiteboard-login-header {
		margin: 0;
		padding: 20px 20px 18px;
	}

	.whiteboard-auth-header h1,
	.whiteboard-login-header h1 {
		font-size: 2.15rem;
	}

	.whiteboard-auth-form,
	.whiteboard-login-form {
		padding: 24px 20px 26px;
	}

	.whiteboard-auth-links {
		border-top: 1px solid var( --rtb-border );
		gap: 16px;
		justify-content: space-between;
		margin: 0;
		padding: 16px 20px 18px;
	}

	.whiteboard-auth-links a {
		flex: 0 1 auto;
		white-space: nowrap;
	}
}

/* Authentication */
.whiteboard-auth-logo-dark,
html[data-theme="dark"] .whiteboard-auth-logo-default {
	display: none;
}

html[data-theme="dark"] .whiteboard-auth-logo-dark {
	display: block;
}

.whiteboard-auth-privacy-note {
	color: var( --rtb-muted );
	font-size: 0.78rem;
	line-height: 1.5;
	margin: 12px 0 0;
	text-align: center;
	text-wrap: pretty;
}

.whiteboard-auth-privacy-note a {
	white-space: nowrap;
}

.whiteboard-auth-subtitle {
	color: var( --rtb-muted );
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 10px 0 0;
	text-align: center;
}

/* Compact, split-screen login */
.whiteboard-auth-layout-login {
	gap: 24px;
	min-height: 0;
	padding-bottom: 28px;
	padding-top: 28px;
}

.whiteboard-login-brand {
	align-items: center;
	background:
		radial-gradient( circle at 18% 12%, rgba( 45, 156, 219, 0.24 ), transparent 15rem ),
		radial-gradient( circle at 88% 92%, rgba( 200, 32, 47, 0.22 ), transparent 13rem ),
		linear-gradient( 145deg, #172235 0%, #0d1420 100% );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 24px;
	box-shadow: 0 24px 60px rgba( 15, 23, 42, 0.18 );
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 26px;
	position: relative;
	width: 100%;
}

.whiteboard-login-brand::before,
.whiteboard-login-brand::after {
	border: 1px solid rgba( 255, 255, 255, 0.08 );
	border-radius: 999px;
	content: "";
	pointer-events: none;
	position: absolute;
}

.whiteboard-login-brand::before {
	height: 210px;
	left: -122px;
	top: -96px;
	width: 210px;
}

.whiteboard-login-brand::after {
	bottom: -118px;
	height: 250px;
	right: -122px;
	width: 250px;
}

.whiteboard-login-brand-logo {
	display: block;
	height: auto;
	position: relative;
	z-index: 1;
}

.whiteboard-login-brand-logo-desktop {
	display: none;
}

.whiteboard-login-brand-logo-mobile {
	max-width: 270px;
	width: min( 72vw, 270px );
}

.whiteboard-login-brand p {
	color: rgba( 255, 255, 255, 0.68 );
	display: none;
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	margin: 12px 0 0;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}

.whiteboard-auth-layout-login .whiteboard-login-card {
	max-width: 520px;
	padding: 26px 30px 0;
}

.whiteboard-auth-layout-login .whiteboard-auth-header {
	margin: 0 -30px 20px;
	padding: 0 30px 20px;
}

.whiteboard-auth-layout-login .whiteboard-auth-header h1 {
	font-size: clamp( 2rem, 3vw, 2.5rem );
}

.whiteboard-auth-layout-login .whiteboard-auth-subtitle {
	font-size: 0.88rem;
	margin-top: 7px;
}

.whiteboard-auth-layout-login .whiteboard-apple-auth-block,
.whiteboard-auth-layout-login .whiteboard-google-auth-block {
	margin-top: 6px;
}

.whiteboard-auth-layout-login .whiteboard-apple-auth-button,
.whiteboard-auth-layout-login .whiteboard-google-auth-button-wrap,
.whiteboard-auth-layout-login .whiteboard-google-auth-visual-button {
	min-height: 50px;
}

.whiteboard-auth-layout-login .whiteboard-google-auth-divider {
	margin: 14px 0;
}

.whiteboard-auth-layout-login .whiteboard-auth-form {
	gap: 14px;
}

.whiteboard-auth-layout-login .whiteboard-field-group {
	gap: 5px;
}

.whiteboard-auth-layout-login .whiteboard-auth-actions {
	margin-top: 2px;
}

.whiteboard-auth-layout-login .whiteboard-auth-actions .whiteboard-button {
	min-height: 44px;
}

.whiteboard-auth-layout-login .whiteboard-auth-links {
	margin: 14px -30px 0;
	padding: 12px 30px 14px;
}

@media ( min-width: 900px ) and ( min-height: 641px ) {
	.whiteboard-auth-page .whiteboard-main:has( .whiteboard-auth-layout-login ) {
		padding-bottom: 0;
		padding-top: 0;
	}

	.whiteboard-auth-layout-login {
		align-content: center;
		align-items: center;
		display: grid;
		flex: 1 1 auto;
		gap: 0;
		grid-template-columns: minmax( 330px, 430px ) minmax( 440px, 520px );
		justify-content: center;
		max-width: 1120px;
		min-height: calc( 100svh - 72px );
		padding: 28px 24px;
	}

	.whiteboard-login-brand {
		align-self: stretch;
		min-height: 500px;
	}

	.whiteboard-login-brand-logo-desktop {
		display: block;
		max-width: 340px;
		width: 100%;
	}

	.whiteboard-login-brand-logo-mobile {
		display: none;
	}

	.whiteboard-login-brand p {
		display: block;
		margin-top: 30px;
	}

	.whiteboard-auth-layout-login .whiteboard-login-card {
		align-self: stretch;
		border-left: 0;
		border-radius: 0 24px 24px 0;
		display: flex;
		flex-direction: column;
	}

	.whiteboard-auth-layout-login .whiteboard-auth-links {
		margin-top: auto;
	}

	.whiteboard-auth-layout-login .whiteboard-auth-form {
		padding: 0;
	}
}

@media ( max-width: 899px ), ( max-height: 640px ) {
	.whiteboard-auth-page .whiteboard-main:has( .whiteboard-auth-layout-login ) {
		padding-top: 20px;
	}

	.whiteboard-auth-layout-login {
		align-items: center;
		gap: 0;
		padding: 0 16px 28px;
	}

	.whiteboard-auth-layout-login .whiteboard-login-brand {
		max-width: 520px;
		min-height: 96px;
		padding: 16px 20px;
	}

	.whiteboard-auth-layout-login .whiteboard-login-brand-logo-mobile {
		max-width: 230px;
		width: min( 68vw, 230px );
	}

	.whiteboard-auth-layout-login.whiteboard-auth-layout-register .whiteboard-login-brand {
		max-width: 600px;
	}

	.whiteboard-auth-layout-login .whiteboard-login-card {
		border-radius: 0 0 20px 20px;
		max-width: 520px;
		padding: 0;
	}

	.whiteboard-auth-layout-login.whiteboard-auth-layout-register .whiteboard-login-card {
		max-width: 600px;
	}

	.whiteboard-auth-layout-login .whiteboard-auth-header {
		margin: 0;
		padding: 18px 20px 10px;
	}

	.whiteboard-auth-layout-login .whiteboard-auth-form {
		padding: 16px 20px 22px;
	}

	.whiteboard-auth-layout-login .whiteboard-auth-links {
		margin: 0;
		padding: 14px 20px 16px;
	}
}

/* Login layout refinements */
.whiteboard-auth-layout-login .whiteboard-login-password-row {
	align-items: end;
	display: grid;
	gap: 10px;
	grid-template-columns: minmax( 0, 1fr ) 160px;
}

.whiteboard-auth-layout-login .whiteboard-login-password-row .whiteboard-field-group,
.whiteboard-auth-layout-login .whiteboard-login-password-row .whiteboard-input-wrap {
	min-width: 0;
}

.whiteboard-auth-layout-login .whiteboard-login-password-row .whiteboard-input-wrap input {
	min-width: 0;
	width: auto;
}

.whiteboard-auth-layout-login .whiteboard-login-password-row .whiteboard-auth-actions {
	margin: 0;
}

.whiteboard-auth-layout-login .whiteboard-login-password-row .whiteboard-button {
	margin-top: 0;
	min-height: 44px;
	padding-left: 10px;
	padding-right: 10px;
	width: 100%;
}

@media ( min-width: 900px ) and ( min-height: 641px ) {
	.whiteboard-auth-layout-login .whiteboard-login-brand {
		border-radius: 24px 0 0 24px;
	}
}

@media ( max-width: 899px ), ( max-height: 640px ) {
	.whiteboard-auth-layout-login .whiteboard-login-brand {
		border-radius: 20px 20px 0 0;
	}

	.whiteboard-auth-layout-login .whiteboard-auth-header h1 {
		font-size: 1.8rem;
	}

	.whiteboard-auth-layout-login .whiteboard-apple-auth-block,
	.whiteboard-auth-layout-login .whiteboard-google-auth-block,
	.whiteboard-auth-layout-login .whiteboard-google-auth-divider {
		margin-left: 20px;
		margin-right: 20px;
	}

	/*
		MOBILE AND APP. The button column is a fixed 160px on desktop, which
		is fine next to a wide password field. On a phone the card is only
		about 300px of content, so 160px of that went to a button holding the
		five characters of "Login" while the password field it sits beside was
		squeezed to roughly 130px - the button read as the biggest thing on
		the screen and the field it belonged to read as an afterthought.

		auto sizes the column to the button's own text plus its padding
		(~78px here), handing everything it gives up back to the password
		field. min-height stays 44 so the tap target is untouched; this only
		changes the width.

		This replaces an old max-width: 380px rule that did the same thing at
		104px. 380 was too narrow a trigger - a 390pt iPhone, which is most of
		them, fell just outside it and kept the full 160px.
	*/
	.whiteboard-auth-layout-login .whiteboard-login-password-row {
		gap: 8px;
		grid-template-columns: minmax( 0, 1fr ) auto;
	}

	/*
		min-width: 0 is the one that actually does the work. The shared
		.whiteboard-auth-actions .whiteboard-button rule carries
		min-width: 148px, and a grid "auto" column still cannot size below
		its content's minimum - so width: auto alone left the button at
		148px and the column simply reported 148 back. Releasing the floor
		lets it fall to its text width.
	*/
	.whiteboard-auth-layout-login .whiteboard-login-password-row .whiteboard-button {
		min-width: 0;
		padding-left: 18px;
		padding-right: 18px;
		width: auto;
	}
}

/* Registration and password recovery use the same split auth shell as sign in. */
@media ( min-width: 900px ) and ( min-height: 641px ) {
	.whiteboard-auth-layout-register {
		grid-template-columns: minmax( 330px, 430px ) minmax( 500px, 600px );
		max-width: 1220px;
	}

	.whiteboard-auth-layout-register .whiteboard-login-card {
		max-width: 600px;
	}
}

/* Register acknowledgement alignment and footer spacing */
.whiteboard-auth-layout-register .whiteboard-terms-label {
	align-items: center;
}

.whiteboard-auth-layout-register .whiteboard-terms-label input[type="checkbox"] {
	margin: 0;
}

.whiteboard-auth-layout-register .whiteboard-auth-form {
	padding-bottom: 20px;
}

@media ( max-width: 899px ), ( max-height: 640px ) {
	.whiteboard-auth-layout-register .whiteboard-auth-form {
		padding-bottom: 22px;
	}
}

/*
   Content starts at the top of the screen instead of being centred inside
   a padded page. justify-content: center is what created the band of empty
   background above and below the card.
*/
html.whiteboard-native-app .whiteboard-auth-page .whiteboard-main {
	/*
		display:flex is declared rather than assumed. The layout and the
		sheet inside it both use flex-grow to reach the bottom of the
		screen, and if this ever resolves to block instead - a different
		body class, a page that does not go through the usual shell - they
		stop at their content height and the dark page shows through
		underneath as a stripe.
	*/
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	min-height: 100svh;
	/*
		The shared native rule pads this element by the status-bar inset. That
		works for a normal page, and is wrong here: the padding is filled with
		the flat page colour, so the hero's gradient starts BELOW the status
		bar and leaves a dead strip across the top of the screen. The inset
		moves into the hero's own padding instead - see below - so the
		gradient reaches the physical top of the display and the status bar
		sits on top of artwork.
	*/
	padding-bottom: 0;
	padding-top: 0;
}

html.whiteboard-native-app .whiteboard-auth-layout,
html.whiteboard-native-app .whiteboard-login-layout {
	gap: 0;
	/*
		The 16px side padding here is what kept a hairline of page showing
		down both edges after the card's own edges were removed - the
		giveaway that something used to be inset. Full bleed means the
		container has no gutter; the gutter moves onto the content inside it.
	*/
	padding: 0;
}

/*
   The page behind everything is the hero's darkest tone rather than the
   sheet colour. Anything that peeks - rubber-band overscroll at the top,
   a rotation mid-layout - then reads as more hero instead of as a white
   gap where the card used to be.
*/
html.whiteboard-native-app .whiteboard-auth-page {
	background: #0d1420;
}

/*
   THE HERO. Removing the card the first time left a thin brand strip over a
   blank white page - technically native, nothing to look at. So the brand
   becomes the anchor of the screen instead of a header: full bleed, a third
   of the display, logo at real size, and the tagline restored (it is set to
   display: none on the web, where the desktop split-panel already carries
   the brand).

   min-height is in svh, not vh: on iOS vh resolves against the LARGER
   viewport, so a hero sized in vh sits partly behind the browser furniture
   and pushes the form down.
*/
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-login-brand {
	align-items: center;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	justify-content: center;
	margin: 0;
	max-width: none;
	min-height: 34svh;
	padding: calc( 28px + max( var( --whiteboard-native-status-bar-height, 0px ), var( --safe-area-inset-top, env( safe-area-inset-top, 0px ) ) ) ) 20px 52px;
	width: 100%;
}

html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-login-brand-logo-mobile {
	max-width: 300px;
	width: min( 78vw, 300px );
}

html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-login-brand p {
	display: block;
	/* 12px on the web, where the tagline sits inside a compact panel. In the
	   hero it needs room to read as its own line rather than as part of the
	   lockup. */
	margin-top: 24px;
}

/*
   The form sits on a sheet that rides UP over the hero rather than floating
   inside the page. Same trick every native app uses for this screen: the
   overlap plus the top radius reads as depth, where a detached card with
   four visible edges reads as a web page.

   The negative margin has to beat the hero's own bottom padding, which is
   why that padding is 52px - it keeps the tagline clear of the sheet.
*/
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-login-card {
	background: var( --rtb-surface );
	border: 0;
	border-radius: 28px 28px 0 0;
	box-shadow: none;
	flex: 1 0 auto;
	margin: -28px 0 0;
	max-width: none;
	padding: 0;
	position: relative;
	width: 100%;
	z-index: 1;
}

/* The rule under the heading is a card divider with no card left to divide. */
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-auth-header {
	border-bottom: 0;
	padding: 26px 20px 4px;
}

html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-auth-header h1 {
	font-size: 1.55rem;
}

/*
   TOUCH SIZING. 52px on the primary controls - comfortably past the 44px
   minimum without looking inflated next to the 58px provider buttons.
*/
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-auth-form,
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-login-form {
	padding: 18px 20px 8px;
}

html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-input-wrap input {
	min-height: 52px;
}

/*
   The Login button moves out from beside the password field and onto its
   own full-width row. Sharing a row is a desktop compromise for horizontal
   space nobody has on a phone, and it made the button the loudest thing on
   the screen. grid-template-columns: 1fr collapses the row to a stack.
*/
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-login-password-row {
	gap: 16px;
	grid-template-columns: 1fr;
}

html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-login-password-row .whiteboard-button {
	min-height: 52px;
	min-width: 0;
	width: 100%;
}

/*
   Create account / Forgot password stop being a bordered footer strip and
   become plain tappable text, which is what they are.
*/
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-auth-links {
	background: transparent;
	border-top: 0;
	margin: 0;
	padding: 22px 20px calc( 34px + env( safe-area-inset-bottom, 0px ) );
}

html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-apple-auth-block,
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-google-auth-block,
html.whiteboard-native-app .whiteboard-auth-layout-login .whiteboard-google-auth-divider {
	margin-left: 20px;
	margin-right: 20px;
}