/* The app's palette, and the only place it is written down on the web side.
   Taken from app/lib/ui/theme/dietosaur_theme.dart — the same brand blue,
   the same navy ink, the same paper. Two owners for one colour is how two
   owners are caught disagreeing, so if a value changes there it changes
   here, deliberately, rather than drifting. */
:root {
	--brand: #198bfe;
	--ink: #10314f;
	--ink-soft: #6b8aa6;
	--paper: #f7fbfe;
	--card: #ffffff;
	--line: #dde8f2;
	--dino: #4cc38a;
}

@media (prefers-color-scheme: dark) {
	:root {
		--brand: #4da6ff;
		--ink: #e8f1f8;
		--ink-soft: #9fb6c9;
		--paper: #0c1a28;
		--card: #132638;
		--line: #23425c;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0 20px 96px;
	background: var(--paper);
	color: var(--ink);
	font: 17px/1.75 -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC",
		"PingFang TC", "Microsoft JhengHei", sans-serif;
	-webkit-text-size-adjust: 100%;
}

main {
	max-width: 46rem;
	margin: 0 auto;
}

header {
	max-width: 46rem;
	margin: 0 auto;
	padding: 40px 0 8px;
}

header a.home {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--ink);
	text-decoration: none;
	letter-spacing: -0.01em;
}

header a.home .mark {
	width: 32px;
	height: 32px;
	display: inline-block;
}

h1 {
	font-size: 2rem;
	line-height: 1.3;
	letter-spacing: -0.02em;
	margin: 28px 0 6px;
}

h2 {
	font-size: 1.2rem;
	margin: 44px 0 10px;
	letter-spacing: -0.01em;
}

h3 {
	font-size: 1rem;
	margin: 26px 0 6px;
	color: var(--ink);
}

p,
li {
	color: var(--ink);
}

.lede {
	font-size: 1.1rem;
	color: var(--ink-soft);
	margin-top: 0;
}

.dates {
	color: var(--ink-soft);
	font-size: 0.9rem;
	margin: 0 0 8px;
}

ul {
	padding-left: 1.3em;
}

li {
	margin: 6px 0;
}

a {
	color: var(--brand);
}

.card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 20px;
	padding: 20px 24px;
	margin: 20px 0;
}

.card h2,
.card h3 {
	margin-top: 0;
}

/* For the sentences a reader would be right to be sceptical of — the ones
   that say what this app does *not* do. They are set apart because a claim
   like that is only worth anything if it is easy to find and hold us to. */
.plain {
	border-left: 3px solid var(--dino);
	padding-left: 18px;
	margin: 20px 0;
	color: var(--ink);
}

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.9em;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 1px 5px;
}

footer {
	max-width: 46rem;
	margin: 72px auto 0;
	padding-top: 24px;
	border-top: 1px solid var(--line);
	color: var(--ink-soft);
	font-size: 0.9rem;
}

footer a {
	margin-right: 18px;
	white-space: nowrap;
}