/* One column, system fonts, dark by default: it is read on a phone in the
   morning and on an e-ink screen later, so contrast and size matter more
   than anything decorative. */
:root {
	color-scheme: dark light;
	--bg: #14161a;
	--fg: #e8e6e3;
	--muted: #9aa0a6;
	--accent: #7aa2f7;
	--warn: #e0af68;
}

* {
	box-sizing: border-box;
}

body {
	background: var(--bg);
	color: var(--fg);
	font: 1.05rem/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
	margin: 0 auto;
	max-width: 40rem;
	padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
}

h1 {
	font-size: 1.6rem;
	margin: 0;
}

h2 {
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	margin: 2rem 0 0.5rem;
	text-transform: uppercase;
	color: var(--muted);
}

ul {
	margin: 0;
	padding-left: 1.2rem;
}

li {
	margin-bottom: 0.4rem;
}

pre {
	font-size: 0.75rem;
	overflow-x: auto;
	white-space: pre;
}

.muted {
	color: var(--muted);
	font-size: 0.85rem;
}

.stale {
	color: var(--warn);
}

.error {
	color: var(--warn);
}

button {
	background: transparent;
	border: 1px solid var(--accent);
	border-radius: 0.5rem;
	color: var(--accent);
	font: inherit;
	margin-top: 2rem;
	padding: 0.6rem 1rem;
	width: 100%;
}

/* The login view. Enrolment is folded away: it is used twice, on the day a
   device is added, and a code field on every cold start would read like the
   app wanting something. */
#enrol {
	margin-top: 2.5rem;
}

#enrol summary {
	cursor: pointer;
}

#enrol-code {
	background: transparent;
	border: 1px solid var(--muted);
	border-radius: 0.5rem;
	color: var(--fg);
	font: inherit;
	letter-spacing: 0.1em;
	padding: 0.6rem 1rem;
	text-align: center;
	text-transform: uppercase;
	width: 100%;
}

#sign-out {
	border-color: var(--muted);
	color: var(--muted);
	margin-top: 1rem;
}