/* Login page: e-mail and password. */

.login { padding: 56px var(--gutter) 80px; }

.login__card {
	max-width: 480px;
	margin: 0 auto;
	padding: 40px;
	box-shadow: var(--shadow-md);
}

.login__title {
	margin-bottom: 10px;
	font-weight: 800;
	font-size: 2.25rem;
}

.login__lead {
	margin-bottom: 24px;
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--text-secondary);
}

.login__fields {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.login__label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.login__forgot {
	font-weight: 600;
	font-size: 0.875rem;
}

.login__password { position: relative; }
.login__password .input { padding-right: 52px; }

.login__eye {
	position: absolute;
	top: 50%;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin-top: -20px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-md);
	background: transparent;
	font-size: 20px;
	color: var(--text-muted);
	cursor: pointer;
}
.login__eye:hover { color: var(--ink-900); }

.login__submit { margin-top: 28px; }

.login__foot {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--border-subtle);
	text-align: center;
	font-size: 0.9375rem;
	color: var(--text-secondary);
}
.login__foot a { font-weight: 700; }

@media (max-width: 759px) {
	.login { padding-top: 32px; }
	.login__card { padding: 28px 22px; }
	.login__title { font-size: 1.875rem; }
}