/* the style of the release notes (release-notes.py). The colors of bendex2.ui (tailwind.css): primary #3368BE, the navy of the logo. */
:root {
	color-scheme: light;
	--background: #f4f6f9;
	--surface: #ffffff;
	--text: #172033;
	--muted: #5f6b7d;
	--border: #e1e6ee;
	--primary: #3368be;
	--primary-hover: #2b5aa8;
	--chip: #eef3fb;
}

@media (prefers-color-scheme: dark) {
	:root {
		color-scheme: dark;
		--background: #0e131d;
		--surface: #161d2b;
		--text: #e7ebf2;
		--muted: #9aa6b8;
		--border: #263044;
		--primary: #7ea6ea;
		--primary-hover: #9dbcf0;
		--chip: #1e2a40;
	}
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--background);
	color: var(--text);
	font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

.page {
	max-width: 760px;
	margin: 0 auto;
	padding: 24px 16px 48px;
}

.top {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
}

.brand { display: flex; }
.logo { height: 30px; width: auto; }
.logo.dark { display: none; }
@media (prefers-color-scheme: dark) {
	.logo.light { display: none; }
	.logo.dark { display: block; }
}

.site-title {
	color: var(--muted);
	font-weight: 500;
	padding-left: 12px;
	border-left: 1px solid var(--border);
}

.languages {
	margin-left: auto;
	display: flex;
	gap: 4px;
	font-size: 14px;
	font-weight: 600;
}
.languages a, .languages span {
	padding: 2px 8px;
	border-radius: 6px;
	text-decoration: none;
}
.languages span { background: var(--chip); color: var(--text); }
.languages a { color: var(--muted); }
.languages a:hover { color: var(--primary); }

h1 {
	font-size: 28px;
	line-height: 1.25;
	margin: 32px 0 8px;
}

.release {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 20px 24px;
	margin-top: 20px;
}

.release > header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
}
.release h1, .release h2 {
	font-size: 20px;
	margin: 0;
}
.release h1 a, .release h2 a { color: inherit; text-decoration: none; }
.release h1 a:hover, .release h2 a:hover { color: var(--primary); }
.release time { color: var(--muted); font-size: 14px; }
.release time::before { content: "· "; }

.release ul {
	margin: 14px 0 0;
	padding-left: 20px;
}
.release li { margin: 8px 0; }
.release li::marker { color: var(--primary); }
.release p { margin: 14px 0 0; font-weight: 600; }

code {
	font-size: 0.9em;
	background: var(--chip);
	padding: 1px 5px;
	border-radius: 4px;
}

.share {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 18px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.share a, .share button {
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary);
	background: var(--chip);
	border: 0;
	border-radius: 999px;
	padding: 4px 12px;
	text-decoration: none;
	cursor: pointer;
}
.share a:hover, .share button:hover { color: var(--primary-hover); }

.empty { color: var(--muted); margin-top: 24px; }
.all { margin-top: 20px; font-weight: 600; }

footer {
	margin-top: 32px;
	font-size: 13px;
	color: var(--muted);
}
footer a { color: var(--muted); }

@media (max-width: 480px) {
	.release { padding: 16px; }
	.site-title { display: none; }
}