#login
	{
		position:absolute;
		left:50%;
		top:50%;
		box-sizing:border-box;
		width:min(360px, calc(100% - 16px));
		margin:0;
		padding:24px 28px 26px;
		border:2px solid var(--color-border-strong);
		border-radius:0;
		background-color:var(--color-surface);
		box-shadow:
			inset 0 0 0 1px color-mix(in srgb, white 70%, transparent),
			0 5px 12px color-mix(in srgb, var(--color-page) 24%, transparent);
		transform:translate(-50%, -50%);
	}

#loginForm
	{
		display:block;
	}

#login h1
	{
		margin:0 0 18px;
		color:var(--color-text);
		font:600 24px/1.2 Arial, sans-serif;
		text-align:center;
	}

#username_label
	{
		display:block;
		margin-bottom:7px;
		color:var(--color-text);
		font:600 16px Arial, sans-serif;
	}

#account_name_combobox
	{
		position:relative;
		display:flex;
		box-sizing:border-box;
		width:100%;
		height:42px;
		border:2px solid var(--color-border-strong);
		border-radius:0;
		background:var(--color-surface-solid);
	}

#username
	{
		min-width:0;
		flex:1;
		box-sizing:border-box;
		padding:8px 12px;
		border:0;
		outline:0;
		background:transparent;
		color:var(--color-text);
		font:16px Arial, sans-serif;
		-moz-user-select:text;
		-khtml-user-select:text;
		-webkit-user-select:text;
		-ms-user-select:text;
		user-select:text;
	}

#account_name_toggle
	{
		width:40px;
		padding:0;
		border:0;
		border-left:1px solid var(--color-border);
		background:var(--color-surface-solid);
		color:var(--color-text);
		font:20px/1 Arial, sans-serif;
		cursor:pointer;
	}

#account_name_combobox:focus-within
	{
		outline:2px solid var(--color-focus);
		outline-offset:1px;
	}

#account_name_options
	{
		position:absolute;
		z-index:10;
		left:-2px;
		right:-2px;
		top:100%;
		max-height:168px;
		box-sizing:border-box;
		overscroll-behavior-y:contain;
		margin:0;
		padding:0;
		overflow-y:auto;
		border:2px solid var(--color-border-strong);
		border-top:0;
		background:var(--color-surface-solid);
		box-shadow:0 4px 8px color-mix(in srgb, var(--color-page) 24%, transparent);
		list-style:none;
	}

#account_name_options[hidden]
	{
		display:none;
	}

#account_name_options[data-placement="above"]
	{
		top:auto;
		bottom:100%;
		border-top:2px solid var(--color-border-strong);
		border-bottom:0;
	}

#account_name_options [role="option"]
	{
		padding:9px 12px;
		color:var(--color-text);
		font:16px Arial, sans-serif;
		cursor:pointer;
	}

#account_name_options [role="option"]:hover,
#account_name_options [role="option"][aria-selected="true"]
	{
		background:var(--color-control-hover);
		color:var(--color-control-text);
	}

#login_hint
	{
		margin-top:8px;
		color:var(--color-text-muted);
		font:12px/1.35 Arial, sans-serif;
	}

#login_button
	{
		width:100%;
		height:48px;
		margin-top:18px;
		border:2px solid var(--color-border-strong);
		border-radius:0;
		background-color:var(--color-control);
		color:var(--color-control-text);
		font:600 16px Arial, sans-serif;
		cursor:pointer;
	}

#login_button:hover,
#login_button:focus
	{
		background-color:var(--color-control-hover);
		outline:2px solid var(--color-focus);
		outline-offset:1px;
	}

body.logged-out #header_panel,
body.logged-out #login_controller,
body.logged-out #login,
body.logged-out #account_name_combobox,
body.logged-out #username,
body.logged-out #login_button,
body.logged-out #login_build_identity
	{
		border-radius:0;
	}

body.logged-out #controller
	{
		display:none;
	}

body.logged-in #login
	{
		display:none;
	}

body.logged-in #login_controller
	{
		display:none;
	}

@media (max-height:400px)
	{
		body.logged-out #login
			{
				padding:12px 20px 14px;
			}

		body.logged-out #login h1
			{
				margin-bottom:10px;
				font-size:20px;
			}

		body.logged-out #username_label
			{
				margin-bottom:4px;
				font-size:14px;
			}

		body.logged-out #account_name_combobox
			{
				height:34px;
			}

		body.logged-out #username
			{
				padding:5px 8px;
				font-size:14px;
			}

		body.logged-out #account_name_toggle
			{
				width:34px;
				font-size:17px;
			}

		body.logged-out #login_hint
			{
				margin-top:5px;
				font-size:10px;
				line-height:1.2;
			}

		body.logged-out #login_button
			{
				height:38px;
				margin-top:10px;
				font-size:14px;
			}

		body.logged-out #login_build_identity
			{
				margin-top:8px;
			}
	}