/* Documentation styles */

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

:root {
	--ink: #1b1f2e;
	--muted: #5d6377;
	--line: #e2e5ee;
	--bg: #f7f8fb;
	--accent: #b8262f;
	--code-bg: #1b1f2e;
	--code-text: #e6f1ea;
}

html {
	scroll-behavior: smooth;
}

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

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

.docs {
	display: grid;
	grid-template-columns: 270px 1fr;
	min-height: 100vh;
}

.docs-nav {
	position: sticky;
	top: 0;
	height: 100vh;
	padding: 28px 22px;
	border-right: 1px solid var(--line);
	background: var(--bg);
	overflow-y: auto;
}

.docs-nav__brand {
	margin: 0 0 4px;
	font-size: 1.1rem;
	font-weight: 800;
}

.docs-nav__version {
	margin: 0 0 22px;
	color: var(--muted);
	font-size: 0.85rem;
}

.docs-nav ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: nav;
}

.docs-nav li {
	counter-increment: nav;
}

.docs-nav a {
	display: block;
	padding: 5px 8px;
	border-radius: 6px;
	color: var(--ink);
	font-size: 0.92rem;
	text-decoration: none;
}

.docs-nav a::before {
	content: counter(nav) ". ";
	color: var(--muted);
}

.docs-nav a:hover {
	background: #eceef4;
}

.docs-main {
	max-width: 900px;
	padding: 40px 48px 96px;
}

.docs-main h1 {
	margin: 0 0 8px;
	font-size: 2.2rem;
	line-height: 1.2;
}

.docs-lead {
	margin: 0 0 32px;
	color: var(--muted);
	font-size: 1.1rem;
}

.docs-main section {
	padding-top: 24px;
	border-top: 1px solid var(--line);
	margin-top: 32px;
}

.docs-main h2 {
	margin: 0 0 12px;
	font-size: 1.55rem;
}

.docs-main h3 {
	margin: 28px 0 8px;
	font-size: 1.15rem;
}

code {
	padding: 1px 5px;
	border-radius: 4px;
	background: #eef0f6;
	font: 0.88em/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

pre {
	margin: 12px 0 20px;
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--code-bg);
	color: var(--code-text);
	overflow-x: auto;
}

pre code {
	padding: 0;
	background: none;
	color: inherit;
	font-size: 0.86rem;
	line-height: 1.6;
}

table {
	width: 100%;
	margin: 12px 0 20px;
	border-collapse: collapse;
	font-size: 0.92rem;
}

th,
td {
	padding: 9px 10px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

th {
	background: var(--bg);
	font-weight: 700;
}

td:first-child {
	white-space: nowrap;
}

.note {
	margin: 16px 0;
	padding: 14px 16px;
	border-left: 4px solid #e8b54a;
	border-radius: 6px;
	background: #fff8e8;
}

.note--warn {
	border-left-color: var(--accent);
	background: #fff2f2;
}

.files {
	padding: 16px 18px;
	border-radius: 10px;
	background: var(--bg);
	font: 0.9rem/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: pre;
	overflow-x: auto;
}

@media (max-width: 860px) {
	.docs {
		grid-template-columns: 1fr;
	}

	.docs-nav {
		position: static;
		height: auto;
		border-right: 0;
		border-bottom: 1px solid var(--line);
	}

	.docs-main {
		padding: 28px 20px 64px;
	}
}