*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

:root {
	--bg: #e8e8e4;
	--surface: #f2f2ef;
	--surface2: #deded9;
	--border: rgba(0, 0, 0, 0.10);
	--border2: rgba(0, 0, 0, 0.22);
	--text: #0c0c0c;
	--text2: #555;
	--text3: #999;
	--accent: #d93500;
	--accent-bg: rgba(217, 53, 0, 0.12);
	--font: 'JetBrains Mono', 'Fira Mono', ui-monospace, monospace;
	--hairline: .0625rem;
	--space-2: clamp(.45rem, .9vw, .8rem);
	--space-3: clamp(.75rem, 1.4vw, 1.25rem);
	--space-4: clamp(1rem, 2vw, 1.75rem);
	--type-micro: clamp(.5625rem, .12vw + .52rem, .6875rem);
	--type-tiny: clamp(.625rem, .14vw + .58rem, .75rem);
	--type-ui: clamp(.75rem, .2vw + .6875rem, .9375rem);
	--type-readable: clamp(.8125rem, .22vw + .75rem, 1rem);
}

html, body { min-height: 100%; }

body {
	min-height: 100svh;
	background: var(--bg);
	color: var(--text);
	font-family: var(--font);
	font-size: var(--type-ui);
	-webkit-font-smoothing: antialiased;
	display: flex;
	align-items: center;
	padding: var(--space-4) var(--space-3) var(--space-4) clamp(2rem, 6vw, 4rem);
}

button, input, fieldset { font: inherit; }
fieldset { display: contents; border: 0; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- page --- */

.page {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	max-width: 28rem;
}

/* --- info list --- */

.info {
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

.info-row {
	display: flex;
	gap: .75rem;
	align-items: baseline;
}

.info-key {
	color: var(--text3);
	font-size: var(--type-micro);
	letter-spacing: .12em;
	text-transform: uppercase;
	width: 4.5rem;
	flex-shrink: 0;
}

/* --- actions --- */

.actions {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	align-items: flex-start;
}

/* --- forms --- */

.form {
	display: grid;
	grid-template-columns: 1fr;
	gap: .4rem;
}

.form label {
	color: var(--text3);
	font-size: var(--type-micro);
	letter-spacing: .14em;
	text-transform: uppercase;
}

.form label:not(:first-child) { margin-top: .2rem; }

.form input {
	width: 100%;
	max-width: 18rem;
	border: var(--hairline) solid var(--border2);
	background: var(--surface);
	color: var(--text);
	outline: none;
	padding: .4rem .5rem;
	appearance: none;
	-webkit-appearance: none;
}

.form input:focus,
.form input:focus-visible { border-color: var(--accent); outline: none; }

/* --- buttons --- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: var(--accent-bg);
	color: var(--accent);
	cursor: pointer;
	font-size: var(--type-tiny);
	letter-spacing: .18em;
	padding: .45rem .8rem;
	text-transform: uppercase;
	transition: background .08s;
}

.button:hover { background: rgba(217, 53, 0, 0.20); text-decoration: none; }

.button.secondary {
	border: var(--hairline) solid var(--border2);
	background: transparent;
	color: var(--text2);
}

.button.secondary:hover { border-color: var(--text2); color: var(--text); }

.button[disabled] { cursor: not-allowed; opacity: .4; pointer-events: none; }

.button-sm { padding: .2rem .85rem; font-size: var(--type-micro); letter-spacing: 0; line-height: 1; }

/* --- misc --- */

.error {
  color: var(--accent);
  font-size: var(--type-readable);
  transition: opacity .18s ease;
}

.error.out { opacity: 0; }

/* --- login steps --- */

.login-step {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  opacity: 0;
  transition: opacity .18s ease;
}

.login-step.in { opacity: 1; }

.step-prompt {
  color: var(--text2);
  font-size: var(--type-readable);
  margin-bottom: .1rem;
}

/* --- layout --- */

#main { display: contents; }

/* --- loading bar --- */

#bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  opacity: 0;
  pointer-events: none;
  z-index: 9999;
}

#bar.loading {
  opacity: 1;
  animation: bar-crawl 2s linear forwards;
}

#bar.done {
  animation: none;
  width: 100%;
  opacity: 0;
  transition: width 0.15s ease, opacity 0.25s ease 0.1s;
}

@keyframes bar-crawl {
  0%   { width: 0%  }
  4%   { width: 40% }
  100% { width: 82% }
}

/* --- focus --- */

.button:focus-visible,
a:focus-visible {
	outline: .125rem solid var(--accent);
	outline-offset: .1875rem;
}

.form input:focus-visible {
	outline: none;
}