/* Greg — Login. Editorial "paper" surface, ink type, one vermilion signal.
   Design tokens come from theme.php. */

html,
body {
	height: 100%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font-body);
	position: relative;
	overflow: hidden;
}

/* faint editorial grid + a single vermilion hairline at the top */
body.login-page::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
	background-size: 48px 48px;
	z-index: 0;
	pointer-events: none;
}

body.login-page::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--vermilion);
	z-index: 1;
}

body ion-icon {
	vertical-align: middle;
	font-size: 1.1rem;
	line-height: 1;
	width: 1.1rem;
	height: 1.1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transform: translateY(-0.06em);
}

.signin {
	width: 100%;
	max-width: 460px;
	margin: auto;
	padding: 2rem;
	position: relative;
	z-index: 2;
	animation: signinIn var(--duration-slow) var(--ease-out);
}

@keyframes signinIn {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

.signin .card {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-soft);
	background: var(--surface);
	overflow: hidden;
	color: var(--ink);
}

.signin .card-body {
	padding: 2.75rem 2.75rem 2.5rem;
	text-align: left;
}

/* ===== Brand ===== */
.login-brand {
	margin-bottom: 2.25rem;
}

.login-eyebrow {
	display: block;
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: 0.6875rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--vermilion);
	margin-bottom: 1rem;
}

.signin .login-logo {
	font-size: 3.25rem;
	color: var(--ink);
}

.login-tagline {
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--text-muted);
	max-width: 28ch;
}

/* ===== Form ===== */
.signin .form-control {
	height: auto;
	padding: 0.7rem 0.95rem;
	font-size: 1rem;
	font-family: var(--font-body);
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	background: var(--paper);
	color: var(--ink);
	transition: border-color var(--duration-fast) var(--ease), box-shadow var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}

.signin .form-control:hover {
	border-color: var(--border-strong);
}

.signin .form-control:focus {
	z-index: 2;
	border-color: var(--vermilion);
	background: var(--white);
	box-shadow: 0 0 0 3px rgba(var(--vermilion-rgb), 0.15);
	outline: none;
}

.signin .form-control::placeholder {
	color: var(--text-subtle);
}

.signin .form-username {
	margin-bottom: 1rem;
	border-radius: var(--radius-md);
}

.signin .form-password {
	margin-bottom: 0;
	border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.signin .login-password-group {
	margin-bottom: 1.75rem;
}

.signin .login-password-group .btn {
	border: 1px solid var(--border);
	border-left: none;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	background: var(--paper);
	color: var(--text-muted);
}

.signin .login-password-group .btn:hover,
.signin .login-password-group .btn:focus {
	background: var(--paper-2);
	color: var(--ink);
	box-shadow: none;
	outline: none;
}

.signin .login-password-group ion-icon {
	font-size: 1.1rem;
	line-height: 1;
}

/* ===== Primary action ===== */
.signin .btn-lg {
	padding: 0.75rem 1.25rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: -0.01em;
	border-radius: var(--radius-md);
	background-color: var(--vermilion);
	border: 1px solid var(--vermilion);
	color: var(--white);
	transition: transform var(--duration-fast) var(--ease), box-shadow var(--duration) var(--ease), background var(--duration) var(--ease);
}

.signin .btn-lg:hover {
	background-color: var(--vermilion-700);
	border-color: var(--vermilion-700);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: var(--shadow-soft);
}

.signin .btn-lg:active {
	transform: translateY(0);
}

.signin .btn-lg:focus {
	box-shadow: 0 0 0 3px rgba(var(--vermilion-rgb), 0.25);
	outline: none;
}

/* ===== Alerts ===== */
.signin .alert {
	border-radius: var(--radius-md);
	border: 1px solid var(--border);
	font-size: 0.9rem;
	animation: alertIn var(--duration-fast) var(--ease-out);
}

.signin .alert-danger {
	background: var(--vermilion-50);
	border-color: var(--vermilion-100);
	color: var(--vermilion-900);
}

@keyframes alertIn {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 575px) {
	.signin { padding: 1.25rem; }
	.signin .card-body { padding: 2rem 1.5rem; }
	.signin .login-logo { font-size: 2.75rem; }
}