/* a scrollbar only when the page needs one: kui.css keeps its space always (for modals), and a login page has none */
html { scrollbar-gutter: auto; }

main {
	background: var(--main-background) no-repeat center;
	background-size: cover;
	position: relative;
	user-select: none;
	/* the login in the middle of what's on screen: the visible height (dvh: a phone's address bar and toolbar left out)
	   less the header above it, and the header's height again at the bottom so the middle is the screen's middle */
	--login-header: 50px;
	min-height: calc(100vh - var(--login-header));
	min-height: calc(100dvh - var(--login-header));
	padding-bottom: var(--login-header);
	box-sizing: border-box;
	width:100%;
	display: grid;
  	place-items: center;

  	/* centred is what's seen: room on top for the avatar that sticks out of the box (#login_profile's -52px), and
  	   the dev quick logins hang below without counting */
  	& .main { width:100%; padding-top:52px; box-sizing:border-box; position:relative; }
  	& #quickLogin { position:absolute; top:100%; left:0; right:0; }

 	& .grp2 { display:none; }

 	& 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; }
	}

	/* the Forgot / Reset boxes get the login box's height (login.box): their fields sit in the middle */
	& #forgot, & #reset { display:flex; flex-direction:column; justify-content:center; box-sizing:border-box; }

	.wrap {
		display: none;
		width:600px;
		margin-inline: auto;
		&.open  { display:block; }
	}
}

.mobile .wrap { width:calc(100% - 30px); }
 

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

/* .login_avatar: the same photo on the Forgot / Reset boxes */
.mobile #profile_wrap, .tablet #profile_wrap { background: rgba(255,255,255,.3); }

#profile_wrap, .login_avatar_wrap { position: relative; }
#login_profile, .login_avatar {
	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: var(--profile-default);
	z-index: 1;
}
#login_profile img { display: block; margin:5px auto; }

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

.mobile #login-chk { text-align: center; }
#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.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); }
}

/* ---~~~ 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;
}

/* ---~~~ Face ID / Passkey button (Site Features) ~~~--- */

#passkeyBtn {
	display: block;
	width: 100%;
	margin: -8px 0 20px;
	border-radius: 20px;
	/* quieter than Login: see-through white, faded white text with a soft shadow; a little brighter on hover */
	background: var(--passkey-bg, rgba(255,255,255,.5));	/* a site with a pale login box sets less (Celestial Heart) */
	color: rgba(255,255,255,.9);
	text-shadow: 0 1px 2px rgba(0,0,0,.55), 0 0 6px rgba(0,0,0,.25);	/* readable on a light background too (Celestial Heart) */
	font-size: 15px;
	font-weight: bold;
	transition: background .2s ease-in-out, color .2s ease-in-out;
	&[hidden] { display: none; }
	&:hover { background: var(--passkey-bg-hover, rgba(255,255,255,.62)); color: white; }
	&:focus { box-shadow: 0px 0px 0px 5px rgba(0,0,0,.15); }
}