:root {
	color-scheme: dark;
	--ink: #f2f4f8;
	--ink-dim: #9aa3b2;
	--ground: #0b0e14;
	--panel: #141922;
	--line: #232c3a;
	--accent: #6ea8fe;
	--caution: #e8c37a;
	--danger: #ff8a8a;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font: 16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.masthead {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--line);
}

.wordmark {
	color: var(--ink);
	font-weight: 650;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.signout { display: flex; align-items: center; gap: 0.75rem; margin: 0; }
.signout button { width: auto; padding: 0.4rem 0.8rem; font-size: 0.9rem; }
.who { color: var(--ink-dim); font-size: 0.9rem; }

main {
	max-width: 26rem;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

h1 { font-size: 1.5rem; margin: 0 0 0.5rem; }
.lede { color: var(--ink-dim); margin: 0 0 2rem; }
.hint { color: var(--ink-dim); font-size: 0.85rem; margin: 0.35rem 0 0; }
.alt { color: var(--ink-dim); margin-top: 2rem; }
a { color: var(--accent); }

form { display: flex; flex-direction: column; gap: 0.35rem; }
label { font-size: 0.9rem; color: var(--ink-dim); margin-top: 1rem; }

input, textarea {
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--panel);
	color: var(--ink);
	font: inherit;
}

/* The minted paste-string: monospaced and wrapping, because it is copied whole
   rather than read, and it has no spaces to break on. */
textarea.paste {
	width: 100%;
	resize: vertical;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.85rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

input:focus-visible, textarea:focus-visible, button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

button {
	margin-top: 1.75rem;
	padding: 0.7rem 1rem;
	border: 0;
	border-radius: 6px;
	background: var(--accent);
	color: #08121f;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.notice {
	padding: 0.75rem 1rem;
	border: 1px solid var(--accent);
	border-radius: 6px;
	background: rgba(110, 168, 254, 0.08);
	color: var(--accent);
}

.unset { color: var(--ink-dim); }

/* A caution, not a failure: nothing has gone wrong, but the reader should take
   it in before acting. Deliberately between a .hint and an .error — it gets a
   rule and a tint so it cannot be skimmed past, and keeps plain body text at
   full contrast rather than an alarm colour, because the sentence is the point
   and the reader is not being told off. */
.provenance {
	margin: 1.25rem 0 0;
	padding: 0.7rem 0.9rem;
	border-left: 3px solid var(--caution);
	border-radius: 0 6px 6px 0;
	background: rgba(232, 195, 122, 0.07);
	color: var(--ink);
	font-size: 0.9rem;
	line-height: 1.5;
}

.error {
	padding: 0.75rem 1rem;
	border: 1px solid var(--danger);
	border-radius: 6px;
	background: rgba(255, 138, 138, 0.08);
	color: var(--danger);
}

h2 { font-size: 1.05rem; margin: 2.5rem 0 0.5rem; }
details { margin-top: 2rem; }
summary { cursor: pointer; color: var(--accent); }

.secret code {
	display: inline-block;
	padding: 0.6rem 0.8rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--panel);
	font-size: 1.05rem;
	letter-spacing: 0.08em;
	overflow-wrap: anywhere;
}

.codes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 0.35rem 1rem;
	padding: 1rem 1rem 1rem 2.5rem;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--panel);
}
.codes code { letter-spacing: 0.05em; }

.facts { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; margin: 0 0 2rem; }
.facts dt { color: var(--ink-dim); font-size: 0.9rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }