/* ============================================================
   Docs app — sidebar layout + light/dark theme
   Uses the shared header/footer; recolours their chrome vars
   in dark mode.
   ============================================================ */

:root {
	--doc-bg: #ffffff;
	--doc-surface: #faf6fb;
	--doc-ink: #1a1320;
	--doc-ink-soft: #4a4453;
	--doc-muted: #857e90;
	--doc-border: #ece6f0;
	--doc-border-strong: #ddd4e4;
	--doc-code-bg: #1d1726;
	--doc-inline-bg: #f3eef6;
	--doc-inline-ink: #c2185b;
	--doc-table-head: #f6eef6;
	--doc-quote-bg: #fff5f9;
	--evt-active-bg: #e3f7ec;
	--evt-active-ink: #1a8a3f;
	--evt-passive-bg: #e9eafd;
	--evt-passive-ink: #4a45c4;
}
html[data-theme="dark"] {
	--doc-bg: #14101b;
	--doc-surface: #1b1626;
	--doc-ink: #ece8f2;
	--doc-ink-soft: #c3bcd1;
	--doc-muted: #8b839a;
	--doc-border: #2a2336;
	--doc-border-strong: #372e47;
	--doc-code-bg: #0f0c16;
	--doc-inline-bg: #2a2336;
	--doc-inline-ink: #ff84b8;
	--doc-table-head: #221b30;
	--doc-quote-bg: #221328;
	--evt-active-bg: rgba(56, 200, 110, .16);
	--evt-active-ink: #6fe0a0;
	--evt-passive-bg: rgba(124, 134, 255, .18);
	--evt-passive-ink: #bcb4ff;

	/* recolour the shared header + footer */
	--chrome-bg: rgba(20, 16, 27, .82);
	--chrome-solid: #1b1626;
	--chrome-ink: #ece8f2;
	--chrome-ink-soft: #c3bcd1;
	--chrome-border: #2a2336;
	--chrome-hover: #2a1320;
	--bg-alt: #1b1626;
	--muted: #8b839a;
	--panel: #1b1626;
	--border: #2a2336;
	--accent-tint: #2a1320;
}

body.docs-body { background: var(--doc-bg); color: var(--doc-ink); }

/* ---- Layout ---- */
.docs-shell {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	align-items: start;
	transition: grid-template-columns .26s ease;
}
.docs-shell.collapsed { grid-template-columns: 0 minmax(0, 1fr); }
/* Suppress drawer animation on initial load so it doesn't flash open->closed */
.docs-shell.docs-preload, .docs-shell.docs-preload .docs-side { transition: none !important; }
/* TOC rail appears as a third column on wide screens, only when the page has one */
@media (min-width: 1280px) {
	.docs-shell.has-toc { grid-template-columns: 290px minmax(0, 1fr) 252px; }
	.docs-shell.has-toc.collapsed { grid-template-columns: 0 minmax(0, 1fr) 252px; }
}

.docs-side {
	position: sticky; top: 62px;
	height: calc(100vh - 62px);
	overflow-x: hidden; overflow-y: auto;
	border-right: 1px solid var(--doc-border);
	padding: 26px 18px 60px;
	background: var(--doc-surface);
	transition: transform .26s ease, border-color .26s ease;
}
.docs-shell.collapsed .docs-side { transform: translateX(-100%); border-right-color: transparent; }

.docs-side .group-label {
	font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
	color: var(--doc-muted); font-weight: 700; margin: 22px 12px 8px; white-space: nowrap;
}
.docs-side .group-label:first-child { margin-top: 0; }
.docs-side a {
	display: flex; align-items: center; gap: 8px;
	padding: 8px 12px; border-radius: 10px;
	color: var(--doc-ink-soft); font-weight: 500; font-size: .96rem;
	transition: background .14s, color .14s; white-space: nowrap;
}
.docs-side a:hover { background: var(--accent-tint); color: var(--accent); }
.docs-side a.active { background: var(--accent); color: #fff; font-weight: 600; } /* no glow */
.docs-side a .n { font-family: var(--mono); font-size: .78em; opacity: .6; min-width: 1.4em; }
.docs-side a.active .n { opacity: .9; }

/* ---- Article ---- */
.docs-main { padding: 40px 56px 110px; min-width: 0; }
.docs-article { max-width: 820px; margin: 0 auto; }

.docs-article h1 { font-size: 2.3rem; margin: 0 0 .5em; letter-spacing: -.02em; }
.docs-article h2 { font-size: 1.6rem; margin: 1.8em 0 .6em; } /* markdown '---' provides the separators, so no top border */
.docs-article h3 { font-size: 1.25rem; margin: 1.6em 0 .5em; }
.docs-article h4 { font-size: 1.05rem; margin: 1.4em 0 .4em; }
.docs-article h2, .docs-article h3 { scroll-margin-top: 84px; }
.docs-article p, .docs-article li { color: var(--doc-ink-soft); font-size: 1.05rem; line-height: 1.7; }
.docs-article strong { color: var(--doc-ink); }
.docs-article a { color: var(--accent); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.docs-article a:hover { color: var(--accent-hover); }
.docs-article a.btn { text-decoration: none; }
.docs-article a.btn-primary, .docs-article a.btn-primary:hover { color: #fff; }
.docs-article a.btn-ghost, .docs-article a.btn-ghost:hover { color: var(--chrome-ink); }
.docs-article ul, .docs-article ol { padding-left: 1.4em; }
.docs-article li { margin: .3em 0; }
.docs-article hr { border: 0; border-top: 1px solid var(--doc-border); margin: 2.2em 0; }

/* inline code */
.docs-article :not(pre) > code {
	font-family: var(--mono); font-size: .88em;
	background: var(--doc-inline-bg); color: var(--doc-inline-ink);
	padding: 2px 7px; border-radius: 6px; white-space: nowrap;
}

/* code blocks */
.code-block { position: relative; margin: 1.4em 0; }
.docs-article pre {
	background: var(--doc-code-bg); border-radius: var(--radius);
	padding: 20px 22px; overflow-x: auto; margin: 0;
	border: 1px solid var(--doc-border-strong);
}
.docs-article pre code { font-family: var(--mono); font-size: .9rem; line-height: 1.7; background: none; color: #e6e1f0; padding: 0; white-space: pre; }
/* opt-in soft wrapping (```lang-wrap) instead of horizontal scrolling */
.docs-article pre.code-wrap code { white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-btn {
	position: absolute; top: 10px; right: 10px;
	background: rgba(255,255,255,.08); color: #cfc7da;
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 8px; padding: 5px 10px; font-size: .76rem; font-weight: 600;
	cursor: pointer; opacity: 0; transition: opacity .15s, background .15s; font-family: var(--font);
}
.code-block:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,.18); color: #fff; }

/* tables */
.docs-article table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .98rem; }
.docs-article th, .docs-article td { text-align: left; padding: 10px 14px; border: 1px solid var(--doc-border); vertical-align: top; }
.docs-article th { background: var(--doc-table-head); color: var(--doc-ink); font-weight: 700; }
.docs-article td { color: var(--doc-ink-soft); }
.docs-article td code, .docs-article th code { white-space: nowrap; }

/* event pills (active / passive) next to headings */
.has-evt-pill {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35em;
	/* preserve heading margin / line-height without fighting flex */
	column-gap: .45em;
}
.evt-pill {
	display: inline-flex; align-items: center;
	flex-shrink: 0;
	font-family: var(--font); font-weight: 700;
	font-size: .58em; letter-spacing: .07em; text-transform: uppercase;
	line-height: 1; white-space: nowrap;
	padding: .38em .72em; border-radius: var(--radius-pill);
}
.evt-pill--active { background: var(--evt-active-bg); color: var(--evt-active-ink); }
.evt-pill--passive { background: var(--evt-passive-bg); color: var(--evt-passive-ink); }

/* matching text colours for the "Kind" column in the all-actions table */
.evt-txt--active { color: var(--evt-active-ink); font-weight: 700; }
.evt-txt--passive { color: var(--evt-passive-ink); font-weight: 700; }

/* blockquote */
.docs-article blockquote {
	margin: 1.4em 0; padding: 14px 20px; border-left: 4px solid var(--accent);
	background: var(--doc-quote-bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.docs-article blockquote p { margin: .3em 0; color: var(--doc-ink-soft); }

/* ---- Table of contents rail (right column, sticky, inset from the edge) ---- */
.doc-toc-rail {
	position: sticky; top: 84px;
	max-height: calc(100vh - 110px); overflow-y: auto;
	padding: 22px 34px 22px 10px;
	display: none; /* shown only when the 3rd column exists */
}
@media (min-width: 1280px) { .doc-toc-rail.has-items { display: block; } }
.toc-head {
	font-size: .74rem; text-transform: uppercase; letter-spacing: .12em;
	color: var(--doc-muted); font-weight: 700; margin-bottom: 12px;
}
.doc-toc-rail ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--doc-border); }
.doc-toc-rail li { margin: 0; }
.doc-toc-rail a {
	display: block; padding: 5px 0 5px 14px; margin-left: -2px;
	border-left: 2px solid transparent;
	color: var(--doc-ink-soft); text-decoration: none; font-size: .92rem; line-height: 1.4;
	transition: color .15s, border-color .15s;
}
.doc-toc-rail a:hover { color: var(--accent); }
.doc-toc-rail a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }

/* ---- Floating theme toggle ---- */
.float-btn {
	position: fixed; z-index: 65; right: 20px; bottom: 20px;
	width: 46px; height: 46px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--doc-surface); color: var(--doc-ink);
	border: 1px solid var(--doc-border-strong);
	box-shadow: 0 4px 14px rgba(0,0,0,.12);
	cursor: pointer; transition: color .15s, border-color .15s, background .15s;
}
.float-btn:hover { color: var(--accent); border-color: var(--accent); }
.float-btn svg { width: 22px; height: 22px; }
.float-btn i { font-size: 20px; }

/* ---- Mobile "browse the docs" button (inline, not floating) ---- */
.docs-menu-btn {
	display: none;
	align-items: center; gap: 8px;
	font-family: var(--font); font-weight: 600; font-size: .95rem;
	color: var(--doc-ink); background: var(--doc-surface);
	border: 1px solid var(--doc-border-strong); border-radius: var(--radius-pill);
	padding: 9px 16px; cursor: pointer; margin-bottom: 22px;
}
.docs-menu-btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---- highlight.js token colours (YAML-tuned, light & dark) ---- */
.hljs { color: var(--doc-ink); background: transparent; }
.docs-article pre code.hljs { color: #e6e1f0; }
.hljs-attr, .hljs-attribute { color: #ff7eb6; }
.hljs-string { color: #b8e994; }
.hljs-number, .hljs-literal { color: #f8c06b; }
.hljs-comment { color: #8a7fa0; font-style: italic; }
.hljs-bullet, .hljs-meta { color: #c9b6ff; }
.hljs-type, .hljs-built_in { color: #82e0d6; }
.hljs-tag, .hljs-name, .hljs-keyword, .hljs-section { color: #ff7eb6; }

/* ---- prev / next ---- */
.docs-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--doc-border); }
.docs-pager a {
	flex: 1; max-width: 49%;
	border: 1px solid var(--doc-border); border-radius: var(--radius);
	padding: 15px 20px; text-decoration: none; color: var(--doc-ink);
	transition: border-color .15s, transform .15s; background: var(--doc-bg);
}
.docs-pager a:hover { border-color: var(--accent); transform: translateY(-2px); }
.docs-pager .dir { font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; color: var(--doc-muted); font-weight: 700; }
.docs-pager .ttl { font-weight: 700; margin-top: 4px; color: var(--accent); }
.docs-pager a.next { text-align: right; margin-left: auto; }

.docs-loading { color: var(--doc-muted); padding: 40px 0; }

/* theme toggle icons */
.theme-toggle .moon { display: none; }
html[data-theme="dark"] .theme-toggle .sun { display: none; }
html[data-theme="dark"] .theme-toggle .moon { display: block; }

/* scrim (mobile drawer) */
.scrim { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 70; }
.scrim.show { display: block; }

/* ---- Mobile ---- */
@media (max-width: 920px) {
	.docs-shell, .docs-shell.collapsed { grid-template-columns: minmax(0, 1fr); }
	.docs-side {
		position: fixed; top: 0; left: 0; bottom: 0; height: 100vh; width: 280px;
		z-index: 80; transform: translateX(-100%); box-shadow: var(--shadow-lg);
		padding-top: 80px;
	}
	.docs-shell:not(.collapsed) .docs-side { transform: none; }
	.docs-main { padding: 30px 20px 90px; }
	.docs-menu-btn { display: inline-flex; }
	.doc-toc ul { columns: 1; }
}