/*
 * Карточка входа — одна на все двери.
 *
 * Дверей у системы четыре: покупатель витрины и сотрудник на `/login`,
 * администратор платформы на `/admin`, владелец арендованного пространства на
 * `/enter`. Выглядеть они должны одинаково — это один и тот же дом, — а до
 * этого файла разметка была скопирована в три страницы и уже разъехалась:
 * карточка на `/enter` была шире на 20 пикселей, а сообщение об ошибке красили
 * в разных местах по-разному.
 *
 * ⚠ Имя `.space` здесь не используется намеренно. В двух страницах так звался
 * абзац с названием пространства, а в третьей — кнопка его выбора: одно имя,
 * разный смысл. Абзац стал `.whose`, кнопка — `.pick` в стилях самой страницы.
 *
 * Ширину карточки страница может задать себе сама через `--card`.
 */

:root {
	--ink: #1c2b33;
	--muted: #6b7a84;
	--line: #d7e2ea;
	--accent: #1f6feb;
	--card: 380px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f4f8fb;
	color: var(--ink);
	padding: 24px;
	font: 15px/1.5 Inter, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.card {
	width: 100%;
	max-width: var(--card);
	background: #fff;
	border-radius: 16px;
	padding: 32px 28px;
	box-shadow: 0 12px 40px rgba(28, 43, 51, .1);
}

h1 { margin: 0 0 2px; font-size: 21px; }

/* Название пространства — крупнее подписи: это главное, что отличает
   одну форму входа от другой. */
.whose { margin: 0 0 10px; font-size: 17px; color: var(--accent); }

.sub { margin: 0 0 22px; color: var(--muted); font-size: 14px; }

label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--muted); }
label.spaced { margin-top: 14px; }

input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 10px;
	font: inherit;
	color: inherit;
	background: #fff;
}
input:focus { outline: 2px solid rgba(31, 111, 235, .35); border-color: var(--accent); }
input.code { letter-spacing: .5em; text-align: center; font-size: 20px; font-weight: 600; }

button {
	width: 100%;
	margin-top: 16px;
	padding: 13px;
	border: 0;
	border-radius: 10px;
	background: var(--accent);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
button:hover { background: #175bc4; }

.msg { margin: 0 0 16px; padding: 11px 13px; border-radius: 10px; font-size: 14px; }
.msg--error { background: #fdecec; color: #a01c1c; }
.msg--ok { background: #e9f6ec; color: #1d6b33; }

.back { display: block; margin-top: 14px; text-align: center; font-size: 13px; color: var(--muted); text-decoration: none; }
.back:hover { color: var(--accent); }

/* Чужая дверь — отбита чертой: её ищут глазами те, кто ошибся адресом,
   а остальным она мешать не должна. */
.other { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); }
.other .back { margin-top: 0; }

/* Указатель: не кнопка — жать тут нечего, это выбор адреса. Поэтому
   строки-двери, а не синие кнопки, спорящие друг с другом. */
.door {
	display: block;
	margin-top: 10px;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 10px;
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}
.door:hover { border-color: var(--accent); color: var(--accent); }
.door small { display: block; margin-top: 2px; color: var(--muted); font-weight: 400; font-size: 13px; }