/* rontolisp documentation theme.
   Colors and the monospace stack are shared with the browser playground
   (web/playground.html, Tokyonight palette). */
:root {
	--bg: #1a1b26;
	--panel: #1f2335;
	--panel-2: #24283b;
	--border: #2f334d;
	--fg: #c0caf5;
	--muted: #565f89;
	--accent: #7aa2f7;
	--accent-2: #9ece6a;
	--accent-3: #e0af68;
	--err: #f7768e;
	--mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--sidebar-w: 250px;
	--toc-w: 200px;
	--topbar-h: 52px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
	line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- top bar --- */
.topbar {
	position: sticky;
	top: 0;
	z-index: 20;
	height: var(--topbar-h);
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 20px;
	background: var(--panel);
	border-bottom: 1px solid var(--border);
}

.topbar .brand {
	font-weight: 600;
	color: var(--fg);
	font-size: 16px;
}
.topbar .brand .paren { color: var(--accent); }

.topnav {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 14px;
}

.langswitch { display: flex; gap: 8px; align-items: center; }
.langswitch .lang.active { color: var(--muted); }

.reset-runtime {
	background: var(--panel-2);
	color: var(--fg);
	border: 1px solid var(--border);
	border-radius: 7px;
	padding: 5px 10px;
	font-size: 12px;
	cursor: pointer;
}
.reset-runtime:hover { border-color: var(--accent); }

.runtime-status {
	font-size: 12px;
	font-family: var(--mono);
	color: var(--muted);
	min-width: 0;
}
.runtime-status[data-state="loading"] { color: var(--accent-3); }
.runtime-status[data-state="ready"] { color: var(--accent-2); }
.runtime-status[data-state="error"] { color: var(--err); }

/* --- layout --- */
.layout {
	display: flex;
	align-items: flex-start;
	max-width: 1380px;
	margin: 0 auto;
}

.sidebar {
	position: sticky;
	top: var(--topbar-h);
	align-self: flex-start;
	width: var(--sidebar-w);
	flex: 0 0 var(--sidebar-w);
	height: calc(100vh - var(--topbar-h));
	overflow-y: auto;
	padding: 20px 12px 40px;
	border-right: 1px solid var(--border);
}

.nav-section { margin-bottom: 18px; }
.nav-section-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	padding: 4px 10px;
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar .nav-link {
	display: block;
	padding: 5px 10px;
	border-radius: 6px;
	color: var(--fg);
	font-size: 14px;
}
.sidebar .nav-link:hover { background: var(--panel-2); text-decoration: none; }
.sidebar .nav-link.active {
	background: var(--panel-2);
	color: var(--accent);
	font-weight: 600;
}

.content {
	flex: 1;
	min-width: 0;
	padding: 24px 40px 80px;
}

/* --- right-hand "On this page" table of contents --- */
.toc {
	position: sticky;
	top: var(--topbar-h);
	align-self: flex-start;
	width: var(--toc-w);
	flex: 0 0 var(--toc-w);
	max-height: calc(100vh - var(--topbar-h));
	overflow-y: auto;
	padding: 24px 16px 40px;
	font-size: 13px;
}
.toc-title {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--muted);
	padding: 0 8px;
	margin-bottom: 8px;
}
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li { margin: 0; }
.toc a {
	display: block;
	padding: 3px 8px;
	border-left: 2px solid transparent;
	color: var(--muted);
	line-height: 1.4;
}
.toc a:hover { color: var(--fg); text-decoration: none; }
.toc a.active {
	color: var(--accent);
	border-left-color: var(--accent);
}
.toc .toc-h3 a { padding-left: 20px; font-size: 12.5px; }
.toc code {
	font-family: var(--mono);
	font-size: 0.92em;
	color: inherit;
}

/* --- markdown content --- */
.markdown { max-width: 760px; }
.markdown h1 { font-size: 30px; margin: 0 0 18px; letter-spacing: -0.01em; }
.markdown h2 {
	font-size: 23px;
	margin: 40px 0 14px;
	padding-bottom: 6px;
	border-bottom: 1px solid var(--border);
}
.markdown h3 { font-size: 19px; margin: 30px 0 10px; }
.markdown h4 { font-size: 16px; margin: 24px 0 8px; color: var(--accent-3); }
.markdown p { margin: 12px 0; }
.markdown ul, .markdown ol { padding-left: 24px; }
.markdown li { margin: 4px 0; }
.markdown strong { color: #d5deff; }
.markdown hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }

.markdown blockquote {
	margin: 14px 0;
	padding: 2px 16px;
	border-left: 3px solid var(--accent);
	background: var(--panel);
	color: var(--muted);
}

/* inline code */
.markdown :not(pre) > code {
	font-family: var(--mono);
	font-size: 0.88em;
	background: var(--panel-2);
	border: 1px solid var(--border);
	border-radius: 5px;
	padding: 1px 5px;
	color: var(--accent-2);
}

/* static code blocks (bash, console, transcripts) */
.markdown pre {
	background: var(--panel);
	border: 1px solid var(--border);
	border-radius: 9px;
	padding: 14px 16px;
	overflow-x: auto;
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.55;
}
.markdown pre code { font-family: var(--mono); background: none; border: none; padding: 0; color: var(--fg); }

/* heading anchors from AnchorLinkExtension */
.markdown a.anchor { visibility: hidden; margin-left: 6px; color: var(--muted); }
.markdown h1:hover a.anchor,
.markdown h2:hover a.anchor,
.markdown h3:hover a.anchor,
.markdown h4:hover a.anchor { visibility: visible; }

/* --- tables (built-in functions reference is large) --- */
.markdown table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 16px 0;
	font-size: 13.5px;
}
.markdown th, .markdown td {
	border: 1px solid var(--border);
	padding: 7px 11px;
	text-align: left;
	vertical-align: top;
}
.markdown th { background: var(--panel-2); color: var(--accent); font-weight: 600; }
.markdown tr:nth-child(even) td { background: var(--panel); }
.markdown td code, .markdown th code { white-space: nowrap; }

/* function-name links in the Functions table */
.markdown a.fn-link { text-decoration: none; }
.markdown a.fn-link code { color: var(--accent); cursor: pointer; }
.markdown a.fn-link:hover code { text-decoration: underline; }

/* --- runnable code cells --- */
.code-cell {
	margin: 16px 0;
	border: 1px solid var(--border);
	border-radius: 9px;
	overflow: hidden;
	background: var(--panel);
}
.cell-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 12px;
	background: var(--panel-2);
	border-bottom: 1px solid var(--border);
}
.cell-toolbar .run {
	background: var(--accent);
	color: #1a1b26;
	border: none;
	border-radius: 6px;
	padding: 5px 14px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}
.cell-toolbar .run:hover { filter: brightness(1.08); }
.cell-toolbar .run:disabled { opacity: 0.5; cursor: progress; }
.cell-status { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.cell-status.err { color: var(--err); }

textarea.cell-src {
	display: block;
	width: 100%;
	border: none;
	outline: none;
	resize: vertical;
	background: var(--panel);
	color: var(--fg);
	font-family: var(--mono);
	font-size: 13px;
	line-height: 1.55;
	padding: 12px 16px;
	tab-size: 2;
	/* Don't soft-wrap source; scroll horizontally like the static code blocks. */
	white-space: pre;
	overflow-x: auto;
}

pre.cell-out {
	margin: 0;
	border: none;
	border-top: 1px solid var(--border);
	border-radius: 0;
	background: var(--panel-2);
	color: var(--accent-2);
	/* Keep output on one line per line; scroll horizontally instead of wrapping. */
	white-space: pre;
	overflow-x: auto;
}
pre.cell-out.err { color: var(--err); }

/* --- copy buttons --- */
.copy {
	background: var(--panel-2);
	color: var(--muted);
	border: 1px solid var(--border);
	border-radius: 6px;
	padding: 4px 10px;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
}
.copy:hover { color: var(--fg); border-color: var(--accent); }
.copy.copied { color: var(--accent); border-color: var(--accent); }

/* Runnable cells: the copy button sits at the right edge of the toolbar. */
.cell-toolbar .copy { margin-left: auto; }

/* Static blocks: wrapped so the copy button can float in the top-right corner,
   revealed on hover (or keyboard focus). */
.code-block { position: relative; }
.code-block .copy {
	position: absolute;
	top: 8px;
	right: 8px;
	opacity: 0;
	transition: opacity 0.12s ease;
}
.code-block:hover .copy,
.code-block .copy:focus { opacity: 1; }

/* --- prev/next --- */
.prevnext {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-top: 48px;
	padding-top: 20px;
	border-top: 1px solid var(--border);
}
.prevnext a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 12px 16px;
	border: 1px solid var(--border);
	border-radius: 9px;
	max-width: 48%;
}
.prevnext a:hover { border-color: var(--accent); text-decoration: none; }
.prevnext .next { text-align: right; margin-left: auto; }
.prevnext .dir { font-size: 12px; color: var(--muted); }
.prevnext .label { font-weight: 600; }

/* --- responsive --- */
/* Drop the TOC first when space gets tight, then the sidebar. */
@media (max-width: 1080px) {
	.toc { display: none; }
}
@media (max-width: 800px) {
	.sidebar { display: none; }
	.content { padding: 20px; }
}