/* The sign-in page.
 *
 * Deliberately plain and deliberately centred: it is the only page in the app
 * a stranger can reach, so it says the name of the thing and asks for two
 * fields. Nothing here hints at what is inside.
 */
.signin {
	max-width: 22rem;
	margin: 12vh auto 4rem;
	padding: 0 1.25rem;
}
.signin h1 {
	margin: 0;
	font-size: 1.6rem;
	letter-spacing: .18em;
}
.signin .sub {
	margin: .25rem 0 1.75rem;
	color: var(--dim, #888);
	font-size: .85rem;
	line-height: 1.5;
}
.signin form { display: flex; flex-direction: column; gap: .3rem; }
.signin label {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--dim, #888);
	margin-top: .7rem;
}
.signin input {
	font: inherit;
	padding: .55rem .7rem;
	border: 1px solid var(--line, #3a3a3a);
	border-radius: .4rem;
	background: var(--sunk, rgba(255,255,255,.04));
	color: inherit;
}
.signin input:focus-visible {
	outline: 2px solid var(--link, #7fb3ff);
	outline-offset: 1px;
}
.signin .btn.primary {
	margin-top: 1.4rem;
	padding: .6rem;
	border-radius: .4rem;
	border: 1px solid var(--link, #7fb3ff);
	background: var(--link, #7fb3ff);
	color: #06121f;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.signin .btn.primary:hover { filter: brightness(1.08); }

/* A refusal has to be visible without being alarming: most of the time it is
   somebody's own typo, not an intrusion. */
.signin .err {
	margin: 0 0 1rem;
	padding: .55rem .7rem;
	border-radius: .4rem;
	font-size: .85rem;
	color: var(--bad, #ff8a80);
	border: 1px solid currentColor;
	background: rgba(255, 138, 128, .08);
}
.signin .err.hidden { display: none; }