.signin-body
{
	background: var( --page-background );
	color: var( --ink );
	min-height: 100vh;
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.signin-main
{
	width: min( 42rem, 100% );
	padding: 3rem 1.5rem 5rem;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
		border-radius: 0.5rem;
	background: var( --card-background );
	box-shadow: 0 2px 8px -5px rgba(0,0,0,0.3);
}

.signin-logo
{
	width: 8.5rem;
	height: auto;
	align-self: center;
}

.signin-logo-dark { display: none; }

@media ( prefers-color-scheme: dark )
{
	.signin-logo-light { display: none; }
	.signin-logo-dark { display: block; }
}

.signin-main h1
{
	font-size: var( --text-xl );
	margin: 0 0 .35rem;
}

.signin-main h2
{
	font-size: var( --text-lg );
	margin: 0 0 .35rem;
}

.signin-main p
{
	margin: 0 0 .75rem;
	color: var( --ink-quiet );
	line-height: 1.5;
}

.signin-request,
.signin-confirm,
.signin-already,
.signin-closed
{
	border: 0.5px dashed var(--ink);
	border-radius: .5rem;
	padding: 1.5rem;
	}

.signin-notice
{
	padding: .75rem 1rem;
	border-radius: .4rem;
	margin: 0;
	line-height: 1.45;
}

.signin-notice-accent { background: var( --accent-quiet ); color: var( --ink ); }
.signin-notice-warn { background: var( --warning-quiet ); color: var( --warning ); }
.signin-notice-plain { background: var( --card-background ); border: 1px solid var( --rule ); }

.signin-email-form
{
	display: flex;
	flex-direction: column;
	gap: .4rem;
	align-items: flex-start;
}

.signin-email-form label
{
	font-size: var( --text-base );
	color: var( --ink-quiet );
}

.signin-email-form input[ type="email" ]
{
	width: 100%;
		padding: .3rem .6rem;
	border: 1px solid var( --rule );
	border-radius: .35rem;
	background: var( --page-background );
	color: var( --ink );
	font: inherit;
}

.signin-primary,
.signin-secondary
{
	font: inherit;
	padding: .45rem 1rem;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
		display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var( --control-height );
}

.signin-primary
{
	background: var( --accent );
	border-color: var( --accent );
}

@media ( prefers-color-scheme: light )
{
	.signin-primary
	{
		color: #fff;
	}
}

.signin-secondary
{
	background: transparent;
	color: var( --ink );
	border-color: var( --rule );
}

.signin-secondary:hover { border-color: var( --ink-quiet ); }

.signin-primary:hover
{
	background: color-mix( in srgb, var( --accent ) 85%, var( --ink ) );
	border-color: color-mix( in srgb, var( --accent ) 85%, var( --ink ) );
}

.signin-actions
{
	margin-bottom: 1rem;
}

.signin-signout-form { display: contents; }

.signin-dock
{
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: .7rem;
	margin-top: 2.9rem;
}

.signin-buttons
{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: .5rem;
}

.signin-status
{
	margin: 0;
	padding: .55rem .8rem;
	border-radius: .4rem;
	border: 1px solid var( --rule );
	background: var( --card-background );
	color: var( --ink-quiet );
	font-size: var( --text-base );
	line-height: 1.45;
}

.signin-status.passkey-status-failed
{
	background: var( --warning-quiet );
	border-color: transparent;
	color: var( --warning );
}

.signin-buttons .signin-primary,
.signin-buttons .signin-secondary
{
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}

@media ( prefers-reduced-motion: reduce )
{
	.signin-buttons .signin-primary,
	.signin-buttons .signin-secondary
	{
		transition: none;
	}
}

.signin-trap
{
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.signin-sms
{
	margin-top: 1.6rem;
	padding-top: 1.4rem;
	border-top: 1px solid var( --rule );
}

.signin-sms h2
{
	margin-bottom: .3rem;
}

.signin-sms-form
{
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin-top: .8rem;
}

.signin-sms-form label
{
	font-size: var( --text-base );
	color: var( --ink-quiet );
}

.signin-sms-form input[ type="tel" ]
{
	padding: .6rem .7rem;
	font: inherit;
	color: var( --ink );
	background: var( --field-background, var( --card-background ) );
	border: 1px solid var( --rule );
	border-radius: .3rem;
}

.signin-sms-form input[ type="tel" ]:focus
{
	outline: 2px solid var( --accent );
	outline-offset: 1px;
}

.front-tagline
{
	margin: 0;
	font-size: var( --text-lg );
	letter-spacing: .02em;
	color: var( --ink );
	text-align: center;
}

.front-slug
{
	margin: 0;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var( --text-sm );
	color: var( --ink-quiet );
	text-align: center;
}

.front-description
{
	margin: 0 0 .5rem;
	color: var( --ink-quiet );
	text-align: center;
}

.front-note
{
	margin: 3rem 0 0 0;
	padding-top: 1rem;
	color: var( --ink-quiet );
}

footer
{
	margin-top: -2rem;
}

@media ( pointer: coarse )
{
	.signin-email-form input[ type="email" ],
	.signin-sms-form input[ type="tel" ]
	{
		font-size: max( 16px, 1em );
	}
}

.signin-closed { border-left: 4px solid var( --warning ); }
.signin-closed h1 { margin-top: 0; }
.signin-closed-message > :first-child { margin-top: 0; }