/* Resident cards and actions, with blue Ingress branding and neutral form text. */
body {
	--ingress-auth-surface: #fff;
	--ingress-auth-text: #1f1f1f;
	--ingress-auth-muted: #626874;
	--ingress-auth-border: #dce0e6;
	--ingress-auth-link: #0b2a78;
	--ingress-startup-background: #f4f6fb;
	--ingress-auth-error: #a61b32;
	--ingress-auth-error-surface: #fff1f3;
	--ingress-auth-error-border: #f1bdc5;
	--ingress-auth-background:
		radial-gradient(ellipse at top left, rgba(140, 193, 82, .18), transparent 45%),
		radial-gradient(ellipse at top right, rgba(32, 55, 92, .10), transparent 40%),
		#f2f2f7;
}
body.theme-dark {
	--ingress-auth-surface: #21252a;
	--ingress-auth-text: #f5f6f8;
	--ingress-auth-muted: #b6beca;
	--ingress-auth-border: #48505a;
	--ingress-auth-link: #a4c2ff;
	--ingress-startup-background: #0f1117;
	--ingress-auth-error: #ffb4bf;
	--ingress-auth-error-surface: #351f28;
	--ingress-auth-error-border: #814352;
	--ingress-auth-background:
		radial-gradient(ellipse at top left, rgba(140, 193, 82, .08), transparent 45%),
		#0f1117;
}
body.theme-light #preloader, body.theme-dark #preloader {
	display: grid;
	place-items: center;
	background: var(--ingress-startup-background);
	padding: 24px;
	transition: none;
}
.ingress-startup { text-align: center; width: min(100%, 280px); color: var(--ingress-auth-muted); }
.ingress-startup-logo { display: block; width: 160px; height: auto; max-width: 100%; margin: 0 auto 40px; }
/* Android owns the centred launch icon. Keep our wordmark and status clear of
   that area during its fade-out, without adding another icon or a timed delay. */
.pwa-standalone .ingress-startup { width: 100%; height: 100%; position: relative; }
.pwa-standalone .ingress-startup-logo { position: absolute; top: max(32px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); margin: 0; }
.pwa-standalone .ingress-startup-status { position: absolute; bottom: max(48px, env(safe-area-inset-bottom)); left: 0; right: 0; }
.theme-dark .ingress-startup-logo, .theme-dark .auth-shell-logo { filter: brightness(0) invert(1); }
.ingress-startup p { margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--ingress-auth-muted); }
.ingress-startup a { display: inline-block; margin-top: 20px; padding: 12px; color: var(--ingress-auth-link); }
.ingress-startup a[hidden] { display: none; }
.ingress-startup-spinner {
	display: block; flex: 0 0 auto; width: 26px; height: 26px; margin: auto;
	border: 3px solid var(--ingress-auth-border); border-top-color: var(--ingress-auth-link); border-radius: 50%;
	animation: ingress-startup-spin .85s linear infinite;
}
.startup-failed .ingress-startup-spinner { display: none; }
@keyframes ingress-startup-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ingress-startup-spinner { animation: none; } }

.auth-shell {
	min-height: 100vh;
	min-height: 100dvh;
	padding: calc(env(safe-area-inset-top, 0px) + 28px) 20px calc(env(safe-area-inset-bottom, 0px) + 28px);
	background: var(--ingress-auth-background);
}
.auth-shell-orb { display: none; }
.auth-shell-content { width: min(100%, 420px); }
.auth-shell-brand { margin-bottom: 24px; }
.auth-shell-logo-wrap {
	width: 160px; height: 80px; margin: 0 auto;
	padding: 0; background: transparent; border: 0; border-radius: 0;
	box-shadow: none;
}
.auth-shell-logo { display: block; width: 160px; height: auto; max-width: 100%; }
.auth-shell .auth-card {
	margin: 0; border-radius: 24px; background: var(--ingress-auth-surface) !important;
	color: var(--ingress-auth-text); border: 0; box-shadow: 0 16px 40px rgba(23, 37, 61, .10);
}
.auth-card .content { margin: 0 !important; padding: 28px 24px 20px; }
.auth-login-title { margin: 0 0 8px; font-size: 30px; line-height: 1.25; font-weight: 800; text-align: center; color: var(--ingress-auth-text); }
.auth-login-subtitle { margin: 0 0 28px; text-align: center; font-size: 14px; line-height: 1.5; color: var(--ingress-auth-muted) !important; }
.auth-login .input-style { position: relative; margin-bottom: 20px !important; }
.auth-login .input-style input {
	height: 56px; min-height: 56px; font-size: 16px !important; padding-right: 52px;
	border-bottom: 1px solid var(--ingress-auth-border) !important; color: var(--ingress-auth-text);
}
.auth-login .input-style input::placeholder { color: var(--ingress-auth-muted) !important; opacity: 1; }
.auth-login .input-style > i, .auth-login .input-style label { color: var(--ingress-auth-muted) !important; }
.auth-password-toggle {
	position: absolute; right: 0; top: 0; width: 48px; height: 56px;
	display: grid; place-items: center; border: 0; border-radius: 8px;
	background: transparent; color: var(--ingress-auth-muted);
}
.auth-login .auth-password-toggle i { position: static; transform: none; margin: 0; color: inherit; }
.auth-login .input-style > i.valid, .auth-login .input-style > i.invalid { display: none; }
.auth-login button:focus-visible {
	outline: 2px solid var(--ingress-auth-link) !important; outline-offset: 3px;
}
.auth-login .input-style input.form-control:focus {
	outline: none !important; box-shadow: none !important;
	border-bottom: 2px solid var(--ingress-auth-link) !important;
}
.auth-login .input-style input.form-control[aria-invalid="true"] { border-bottom-color: var(--ingress-auth-error) !important; }
.auth-login .auth-field-error { margin: -12px 0 22px; color: var(--ingress-auth-error) !important; font-size: 13px; line-height: 1.5; }
.auth-login .auth-feedback {
	display: flex; align-items: flex-start; gap: 12px; margin-bottom: 24px; padding: 16px;
	border: 1px solid var(--ingress-auth-error-border); border-radius: 12px;
	background: var(--ingress-auth-error-surface); color: var(--ingress-auth-error);
	text-align: left;
}
.auth-feedback > i { flex: 0 0 auto; margin-top: 3px; font-size: 17px; }
.auth-login .auth-feedback strong { display: block; color: var(--ingress-auth-error); font-size: 15px; line-height: 1.5; }
.auth-login .auth-feedback p { margin: 4px 0 0; color: var(--ingress-auth-error) !important; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.auth-login .auth-sign-in {
	min-height: 52px; border-radius: 12px; color: #1f1f1f !important;
	font-size: 16px; font-weight: 700; text-transform: none; box-shadow: none;
}
.auth-login .auth-sign-in span { color: inherit !important; }
.auth-login .auth-sign-in:disabled { opacity: .75; }
.auth-sign-in-progress { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.auth-sign-in-progress .ingress-startup-spinner {
	width: 18px; height: 18px; margin: 0;
	border-color: rgba(11, 42, 120, .20); border-top-color: #0b2a78;
}
.auth-login .footer-links { text-align: center; margin: 4px 0 0; }
.auth-login .footer-links button {
	display: inline-block; min-height: 44px; padding: 12px 4px; border: 0; border-radius: 6px;
	background: transparent; color: var(--ingress-auth-link); font-size: 14px; font-weight: 500;
}
@media (max-width: 360px) {
	.auth-shell { padding-left: 16px; padding-right: 16px; }
	.auth-card .content { padding-left: 20px; padding-right: 20px; }
	.auth-login-title { font-size: 28px; }
}
@media (max-height: 600px) {
	.auth-shell { padding-top: calc(env(safe-area-inset-top, 0px) + 16px); }
	.auth-shell-brand { margin-bottom: 16px; }
}