/* U S E R -------------------------------------------------------------------------------------- ✓ */

.user form {
	display: flex;
	flex-direction: column;
	row-gap: .75rem;
	width: 30rem;
	padding: .75rem;
}

.user form h1 {
	background: var(--bg 04);
	text-transform: uppercase;
	font-family: var(--font 8);
	font-size: 1.125rem;
	letter-spacing: .2em;
}

.user input:is([type="text"], [type="email"], [type="password"]) {
	transition: background 300ms;
	background: var(--bg 11);
	font-family: var(--font 4);
	letter-spacing: .15em;
	color: var(--col 4);
}

.user input:is([type="text"], [type="email"], [type="password"]):is(:focus, :hover, .on) { background: var(--bg 13); }

/* B O D Y -------------------------------------------------------------------------------------- ✓ */

.user .body {
	display: flex;
	flex-wrap: wrap;
	padding: 1.6625rem .75rem .75rem .75rem;
	background: var(--bg 04);
	border-radius: .25rem;
}

.user .forgot-password, .user .body > p { font-size: .9375rem; line-height: 1.375rem; letter-spacing: .1em; }

.user .forgot-password { transition: color 300ms; margin-left: auto; font-family: var(--font 5); color: var(--col 3); }

.user .forgot-password:focus, .user .forgot-password:hover { color: var(--col 1); }

.user .body > p { font-family: var(--font 4); }

/* G R O U P ------------------------------------------------------------------------------------ ✓ */

.user .group { display: flex; flex-wrap: wrap; width: 100%; margin-block-end: .75rem; }

.user [name="sign-in"] .group:last-of-type { margin-block-end: .5rem; }

.user .group .wrapper { display: flex; flex-wrap: wrap; width: 100%; position: relative; }

/* I N P U T ------------------------------------------------------------------------------------ ✓ */

.user .group input { border-radius: .125rem; }

.user .group label { margin-block-end: .375rem; font-size: .95rem; }

.user .group.required label::after { content: "*"; margin-left: .06125rem; font-family: var(--font 2); font-size: 1.05rem; }

.user .group input { width: 100%; flex-grow: 1; height: 2.5rem; padding: 0 .625rem; font-size: 1rem; }

.user .group.has-bn input { width: calc(100% - 3.25rem); padding-right: 0; border-radius: .125rem 0 0 .125rem; }

/* ---------------------------------------------------------------------------------------------- ✓ */

.user .group button {
	transition: background 300ms;
	display: flex;
	width: 3.25rem;
	background: var(--bg 11);
	border-radius: 0 .125rem .125rem 0;
}

.user .group button svg { transition: opacity 300ms; opacity: .6; }

.user .group button:focus svg, .user .group button:hover svg { opacity: .9; }

.user .group input:focus + button, .user .group input:hover + button,

.user .group button:focus, .user .group button:hover { background: var(--bg 13); }

/* B U T T O N : H I N T S ---------------------------------------------------------------------- ✓ */

.user .group input + button { height: 2.5rem; }

.user .group input[name="username"] + button { padding: 0 .885rem; }

.user .group input[name="username"] + button svg { fill: var(--col 1); }

/* B U T T O N : V I S I B I L I T Y ------------------------------------------------------------ ✓ */

.user .group input[name="password"] + button { padding: 0 .45rem; }

.user .group input[name="password"] + button svg { stroke: var(--bg 11); }

.user .group input[name="password"]:is(:focus, :hover) + button svg,

.user .group input[name="password"] + button:is(:focus, :hover) svg { stroke: var(--bg 13); }

/* E R R O R ------------------------------------------------------------------------------------ ✓ */

form .error {
	width: 100%;
	margin: .35rem 0 -.25rem;
	font-family: var(--font 1);
	font-size: .9625rem;
	line-height: 1.5rem;
	color: hsl(6 100% 53%);
	/* animation: fadeIn 500ms; */
}

/* R E M E M B E R - M E ------------------------------------------------------------------------ ✓ */

.user .remember-me {
	transition: background 300ms;
	display: flex;
	align-items: center;
	width: 100%;
	height: 2.5rem;
	padding: 0 .75rem;
	background: var(--bg 04);
	border-radius: .25rem;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

.user .remember-me span { text-transform: uppercase; font-family: var(--font 8); font-size: 1rem; letter-spacing: .105em; }

.user .remember-me:focus-within, .user .remember-me:hover { background: var(--bg 02); }

.user .checkbox { width: 1.025rem; height: 1.025rem; margin-right: .625rem; }

.user .checkbox svg .a, .user .checkbox svg .b { transition: stroke-dashoffset 200ms; }

.user .checkbox svg .a { stroke-dashoffset: 500; }

.user .checkbox svg .b { stroke-dashoffset: 226; }

/* P R I V A C Y - P O L I C Y ------------------------------------------------------------------ ✓ */

.user .privacy-policy { display: flex; align-items: center; margin-top: .25rem; margin-left: .25rem; column-gap: .8rem; }

.user .privacy-policy svg { width: 2.6rem; fill: var(--col 2); }

.user .privacy-policy p { font-family: var(--font 4); }

.user .privacy-policy p a { font-family: var(--font 5); color: var(--col 3); }

.user .privacy-policy p, .user .privacy-policy p a { font-size: 1rem; line-height: 1.5rem; letter-spacing: .1em; }

.user .privacy-policy a:focus + p a, .user .privacy-policy a:hover + p a, 

.user .privacy-policy p a:focus, .user .privacy-policy p a:hover { color: var(--col 1); }

/* M E N U -------------------------------------------------------------------------------------- ✓ */

.user .menu { display: flex; gap: .75rem; width: 100%; }

.user .menu > * {
	transition: 300ms background;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 2.5rem;
	background: var(--bg 04);
	border-radius: .25rem;
	text-transform: uppercase;
	font-family: var(--font 8);
	font-size: 1rem;
	letter-spacing: .105em;
}

.user .menu > *:focus, .user .menu > *:hover { background: var(--bg 02); }

/* T O O L T I P -------------------------------------------------------------------------------- ✓ */

.user .tooltip {
	transition:
		visibility 300ms,
		opacity 300ms;
	visibility: hidden;
	width: 100%;
	padding: .75rem .925rem;
	position: absolute;
	top: 107.5%;
	left: 50%;
	transform: translateX(-50%);
	background: hsl(0 0% 5% /.9125);
	border-radius: .125rem;
	opacity: 0;
	z-index: 1;
}

.user .hints.noscript:focus ~ .tooltip,

.user .hints.noscript:hover ~ .tooltip,

.user .tooltip.on { visibility: visible; opacity: 1; }

.user .tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 100%;
	transform: translateX(-50%);
	border-width: .6rem;
	border-style: solid;
	border-color:
		transparent
		transparent
		hsl(0 0% 5% /.9125)
		transparent;
}

.user .check-mark, .user .tooltip em { transition: color 300ms; }

.user .tooltip p { display: flex; line-height: 1.375rem; }

.user .tooltip em { color: var(--col 3); }

.user .tooltip .hint { font-size: .95rem; }

.user .check-mark.bad + .hint em { color: hsl(8 100% 59%); }

.user .check-mark.good + .hint em { color: hsl(74 73% 51%); }

/* c h e c k - m a r k -------------------------------------------------------------------------- ✓ */

.user .check-mark {
	flex-shrink: 0;
	aspect-ratio: 1/1;
	height: 1.19rem;
	margin-right: .2625rem;
	position: relative;
}

.user .check-mark svg {
	transition:
		top 300ms 300ms,
		left 300ms 300ms,
		transform 300ms;
	position: absolute;
	top: -.1rem;
	left: -.0625rem;
}

/* U S E R - I N T E R F A C E ------------------------------------------------------------------ ✓ */

.user .interface { display: flex; width: 20rem; }

.user .interface .menu { flex-wrap: wrap; }

.user .interface .username {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.5rem;
	background: var(--bg 06);
	border-radius: .25rem;
	font-family: var(--font 5);
	font-size: .925rem;
	letter-spacing: .105rem;
	cursor: default;
}

/* D I A L O G ---------------------------------------------------------------------------------- ✓ */

dialog.user .container { background: linear-gradient(110deg, hsl(0 0% 24% /.9) 50%, hsl(0 0% 20% /.9) 50%); }

dialog.user form { animation: fadeIn 300ms ease; }

dialog.user form[aria-hidden="true"] { display: none; }

dialog.user h1 {
	align-self: flex-start;
	margin-bottom: -1.4125rem;
	padding: .625rem .75rem 0;
	border-radius: .25rem .25rem 0 0;
	z-index: 1;
}

/* M A I N -------------------------------------------------------------------------------------- ✓ */

main.user #view > .container { display: flex; flex-direction: row-reverse; gap: 1.25rem; }

main.user form { row-gap: 0; width: 50%; padding: 0; background: var(--bg 08); }

main.user form[name="sign-in"] { align-self: flex-start; }

main.user h1, main.user .menu > * { height: 3.375rem; background: var(--bg 02); }

main.user h1 { display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }

main.user .body { padding: 1rem; background: var(--bg 08); }

main.user .group label, main.user .group input { font-size: 1.025rem; }

main.user .error { margin: .375rem 0 -.25rem; font-size: 1rem; color: hsl(6 100% 50%); }

main.user .forgot-password { font-size: 1.025rem; }

main.user .remember-me { width: auto; margin: 0rem 1rem 1rem 1rem; background: var(--bg 06); }

main.user .remember-me:focus-within, main.user .remember-me:hover { background: var(--bg 04); }

main.user .privacy-policy svg { width: 3rem; }

main.user .privacy-policy p { line-height: 1.625rem; }

main.user .privacy-policy p, main.user .privacy-policy p a { font-size: 1.025rem; }

main.user .menu > * {
	border-radius: 0;
	font-feature-settings: "liga" 1;
	font-size: 1.0825rem;
	font-size: 1.125rem;
	letter-spacing: .2em;
}

main.user .menu > *:nth-child(2) { display: none; }

main.user .menu > *:focus, main.user .menu > *:hover { background: hsl(0 0% 0%); }

/* S E T T I N G S ------------------------------------------------------------------------------ */

