/* ----~~~~ Login ~~~~---- */
/*  the login screen from dev.celestialheartchurch.com/login - its
    css/core/login.css and css/site/login.css folded into one, plus the few
    core.css pieces (.btn, .btn-primary, .loading) the form leans on. one
    background (/img/bgr/bgr-wd.jpg) and the unicorn circle, no seasons.  */

* { box-sizing: border-box; }
.none { display: none; }

body.login {
	margin: 0;
	background: #1d1e22;
	font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

main {
	--login-form-padding:70px 30px 20px;
	--login-form-background:rgba(255,255,255,.3);
	--input-shadow-color:rgba(57,48,113,.3);

	/* ----~~~~ Login Btn ~~~~---- */
	--login-background: rgb(77, 73, 133);
	--login-background-grad:  linear-gradient(0deg, rgb(77, 73, 133) 0%, rgb(57, 48, 113) 100%);
	--login-hover-background: linear-gradient(0deg, rgb(57, 48, 113) 0%, rgb(77, 73, 133) 100%);

	background: url(/img/bgr/bgr-wd.jpg) no-repeat center;
	background-size: cover;
	position: relative;
	user-select: none;
	min-height: 100vh;
	min-height: 100dvh;
	width:100%;
	display: grid;
	place-items: center;

	& .main { width:100%; }

	& form {
		background-color: var(--login-form-background);
		padding: var(--login-form-padding);
		border-radius: 10px;
		box-shadow: 0px 0px 3px 2px rgba(0,0,0,.2);
		margin-bottom: 20px;
		--label-color:white;
		--input-placeholder:gray;

		& .kft.eye:before { transition: color .3s ease-in-out; }
		& .kft.eye:hover:before { color:#333 !important; }
	}

	.wrap {
		display: none;
		width:600px;
		max-width:calc(100% - 30px);
		margin-inline: auto;
		&.open  { display:block; }
	}

	/* ----~~~~ Checkbox ~~~~---- */

	.wrap label.checkbox {
		--chk-background:#715b89;
		--chk-background-checked:#715b89;
		--chk-border:#715b89;
		--chk-border-hover:#d3c0a1;
		--chk-border-focus:#715b89;
		--chk-tick:white;
		--chk-label-color:rgb(35,28,62);
	}

	form.kui {
		--border-focus:rgba(57, 48, 113, .3);
		&.light {
			--input-border:#dededf;
			--selection-background:rgba(57,48,113,.3);
			--selection-color:var(--input-color);
			--cursor-color:rgba(57,48,113,.8);
		}
	}
}

/*  kft.css puts .kft in a later cascade layer than kui.form.css, so its
    position:relative wins and the eye drops below the field. this file is
    unlayered, so it puts the eye back inside the input.  */
.field a.input.kft { position: absolute; bottom: 0; right: 14px; cursor: pointer; }
.field a.input.kft:hover { color:#39386d !important; }

/* ---~~~ Profile Img ~~~--- */

#profile_wrap { position: relative; }
#login_profile {
	border-radius: 50%;
	position: absolute;
	top: -52px;
	background: white;
	width: 104px;
	padding: 10px;
	height: 104px;
	border: 5px solid #4d4984;
	left: calc(50% - 52px);
	box-shadow: 0px 0px 4px rgba(0,0,0,.5);
	background-size: contain;
	background-image: url(/img/unicorn-circle.webp);
	z-index: 1;
}

/* ---~~~ Checkbox ~~~--- */

#login-chk { margin: 20px 0 0 10px; }
.wrap .chklabel { font-size: 15px; color:var(--chk-label-color); }

@layer kform {
	label.checkbox input:checked:focus + svg {
		box-shadow: 0px 0px 0px 5px rgba(0,0,0,.15) !important;
	}
}

/* ---~~~ Login Button ~~~--- */

.btn {
	user-select: none;
	outline: none !important;
	color: white;
	height: 38px;
	line-height: 37px;
	border: 0;
	text-align: center;
	display: block;
	cursor: pointer;
	position: relative;
	font-family: inherit;
}

.btn-primary {
	text-shadow: 1px 1px 0 rgba(0,0,0,.5);
	transition: background .3s ease-in-out, color .3s ease-in-out, box-shadow .3s ease-in-out;
}

.btn.round {
	border-radius: 20px;
	background: var(--login-background);
	background: var(--login-background-grad);
	font-size: 15px;
	font-weight: bold;
	width:100%;
	margin-block: 20px;
	&:hover { background: var(--login-hover-background) }
	&:focus { box-shadow: 0px 0px 0px 5px rgba(0,0,0,.15); }
}

/* the spinner the button shows while the login is checked */
.btn.loading { color: transparent !important; text-shadow: none !important; }
.btn.loading:after {
	position: absolute;
	content: '';
	top: 50%;
	left: 50%;
	margin: -.64em 0 0 -.64em;
	width: 1.28em;
	height: 1.28em;
	border-radius: 50%;
	border: .2em solid;
	border-color: #fff transparent transparent;
	animation: login-spin .6s linear infinite;
}
@keyframes login-spin { to { transform: rotate(360deg); } }

/* ---~~~ Form Inputs ~~~--- */

form input:not([type=checkbox]) { transition: all .3s ease-in-out; filter: none !important; }
form input:not([type=checkbox]):focus {
	box-shadow: 0px 0px 0px 3px var(--input-shadow-color) !important;
	filter: none !important;
	outline: none;
}