/* Assan theme documentation. Self-contained: no external fonts or scripts, so
   it opens from the file system with no network. */

:root {
	--bg: #ffffff;
	--fg: #1f2430;
	--muted: #5c6678;
	--line: #e3e7ee;
	--accent: #2a5bd7;
	--accent-soft: #eef2fd;
	--code-bg: #f5f7fa;
	--warn-bg: #fff8e6;
	--warn-line: #e8c76a;
	--note-bg: #eef7f1;
	--note-line: #7fb894;
	--todo-bg: #fdeeee;
	--todo-line: #d98989;
	--sidebar: 290px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	-webkit-text-size-adjust: 100%;
}

/* ---------- layout ---------- */

.wrap { display: flex; align-items: flex-start; }

.sidebar {
	width: var(--sidebar);
	flex: 0 0 var(--sidebar);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	border-right: 1px solid var(--line);
	padding: 28px 22px 48px;
}

.brand { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 2px; }
.brand span { display: block; font-size: .78rem; font-weight: 400; color: var(--muted); }

.sidebar nav { margin-top: 22px; }
.sidebar nav strong {
	display: block;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--muted);
	margin: 20px 0 7px;
}
.sidebar nav a {
	display: block;
	padding: 4px 9px;
	margin-left: -9px;
	border-radius: 5px;
	color: var(--fg);
	text-decoration: none;
	font-size: .9rem;
}
.sidebar nav a:hover { background: var(--accent-soft); color: var(--accent); }

main { flex: 1 1 auto; min-width: 0; padding: 44px 48px 120px; max-width: 900px; }

/* ---------- type ---------- */

h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.02em; margin: 0 0 6px; }
h2 {
	font-size: 1.35rem;
	letter-spacing: -.01em;
	margin: 52px 0 12px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	scroll-margin-top: 18px;
}
h2:first-of-type { border-top: 0; padding-top: 0; }
h3 { font-size: 1.03rem; margin: 26px 0 8px; scroll-margin-top: 18px; }
p, ul, ol, table { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 5px; }
a { color: var(--accent); }
.lead { font-size: 1.07rem; color: var(--muted); margin-bottom: 26px; }

code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .88em;
	background: var(--code-bg);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: 1px 5px;
}
pre {
	background: var(--code-bg);
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 14px 16px;
	overflow-x: auto;
	margin: 0 0 16px;
}
pre code { background: none; border: 0; padding: 0; font-size: .85rem; line-height: 1.55; }

/* ---------- tables ---------- */

table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: 8px 11px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .74rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
td code { white-space: nowrap; }

/* ---------- callouts ---------- */

.box {
	border: 1px solid var(--line);
	border-left: 3px solid var(--muted);
	border-radius: 0 7px 7px 0;
	padding: 13px 16px;
	margin: 0 0 18px;
	font-size: .93rem;
}
.box p:last-child { margin-bottom: 0; }
.box b { display: block; margin-bottom: 3px; }
.box.note { background: var(--note-bg); border-left-color: var(--note-line); }
.box.warn { background: var(--warn-bg); border-left-color: var(--warn-line); }
.box.todo { background: var(--todo-bg); border-left-color: var(--todo-line); }

/* ---------- misc ---------- */

.cols { columns: 2; column-gap: 34px; }
.cols li { break-inside: avoid; }
.tag {
	display: inline-block;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 1px 7px;
	border-radius: 20px;
	background: var(--accent-soft);
	color: var(--accent);
	vertical-align: 1px;
}
footer.doc { margin-top: 60px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
	.wrap { display: block; }
	.sidebar { position: static; width: auto; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
	main { padding: 28px 16px 70px; max-width: none; }
	.cols { columns: 1; }
}

/* ---------- print ---------- */

@media print {
	.sidebar { display: none; }
	main { padding: 0; max-width: none; }
	h2 { page-break-after: avoid; }
	pre, table, .box { page-break-inside: avoid; }
	a { color: inherit; text-decoration: none; }
}

/* ---------- element reference ---------- */

h1.group { margin-top: 56px; padding-top: 26px; border-top: 2px solid var(--line); }
table.ref td:first-child { width: 24%; font-weight: 600; }
table.ref td:nth-child(2) { width: 38%; }
table.ref tr.sec th { padding-top: 16px; border-bottom-width: 2px; }
table.ref td code { white-space: normal; }
ul.opts { margin: 0; padding-left: 1.1em; }
ul.opts li { margin: 0; }