/*
	Nilesoft Shell docs. Register: Read.
	Type scale 13/14/16/17/20/24/32. Spacing on a 4px grid. One accent, the
	logo blue (#1364FD deep / #139EFD mid). Only the classes the fragments in
	docs/ actually use are styled here (no Bulma).
*/

:root {
	--bg: #ffffff;
	--surface: #f5f7fa;
	--surface-2: #eceff4;
	--border: #e1e5eb;
	--text: #1b1f24;
	--muted: #5a6472;
	--accent: #1364fd;
	--accent-weak: rgba(19, 100, 253, .08);
	--warn: #a86500;
	--warn-weak: rgba(214, 140, 0, .10);
	--danger: #c62828;
	--tok-c: #6b7380;
	--tok-s: #2f7d32;
	--tok-n: #b4530a;
	--tok-k: #1352d6;
	--tok-f: #7a3fb8;
	--tok-p: #0e6f86;
	--tok-v: #a3337a;
	--shadow: 0 8px 24px rgba(16, 24, 40, .12);

	--font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
	--topbar: 56px;
	color-scheme: light;
}

:root[data-theme="dark"] {
	--bg: #14171c;
	--surface: #1b1f26;
	--surface-2: #232833;
	--border: #2b313c;
	--text: #e5e8ed;
	--muted: #9aa3b0;
	--accent: #139efd;
	--accent-weak: rgba(19, 158, 253, .12);
	--warn: #e5a83a;
	--warn-weak: rgba(229, 168, 58, .12);
	--danger: #f07070;
	--tok-c: #8a93a1;
	--tok-s: #8fcf86;
	--tok-n: #f0a868;
	--tok-k: #6cb8ff;
	--tok-f: #c9a2f2;
	--tok-p: #6fd0e0;
	--tok-v: #f08cc8;
	--shadow: 0 8px 24px rgba(0, 0, 0, .45);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #14171c;
		--surface: #1b1f26;
		--surface-2: #232833;
		--border: #2b313c;
		--text: #e5e8ed;
		--muted: #9aa3b0;
		--accent: #139efd;
		--accent-weak: rgba(19, 158, 253, .12);
		--warn: #e5a83a;
		--warn-weak: rgba(229, 168, 58, .12);
		--danger: #f07070;
		--tok-c: #8a93a1;
		--tok-s: #8fcf86;
		--tok-n: #f0a868;
		--tok-k: #6cb8ff;
		--tok-f: #c9a2f2;
		--tok-p: #6fd0e0;
		--tok-v: #f08cc8;
		--shadow: 0 8px 24px rgba(0, 0, 0, .45);
		color-scheme: dark;
	}
}

/* Theme-specific screenshots (images/dark and images/light). */
.only-dark { display: none !important; }
:root[data-theme="dark"] .only-dark { display: inline !important; }
:root[data-theme="dark"] .only-light { display: none !important; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .only-dark { display: inline !important; }
	:root:not([data-theme="light"]) .only-light { display: none !important; }
}

/* ---------------------------------------------------------------- base */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--topbar) + 16px); }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 17px/1.7 var(--font);
	text-rendering: optimizeLegibility;
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
img { max-width: 100%; height: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; z-index: 30; background: var(--bg); padding: 4px 8px; }

/* -------------------------------------------------------------- topbar */

.topbar {
	position: sticky; top: 0; z-index: 20;
	height: var(--topbar);
	display: flex; align-items: center; gap: 16px;
	padding: 0 24px;
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 16px; font-weight: 600; margin-right: auto; }
.brand:hover { text-decoration: none; }
.brand img { display: block; }
.repo { color: var(--muted); }
.repo:hover { color: var(--text); text-decoration: none; }

button { font: inherit; color: inherit; }
.theme-toggle, .nav-toggle {
	display: inline-flex; align-items: center; justify-content: center;
	height: 32px; min-width: 32px; padding: 0 8px;
	background: none; border: 1px solid var(--border); border-radius: 6px;
	color: var(--muted); cursor: pointer;
}
.theme-toggle:hover, .nav-toggle:hover { color: var(--text); background: var(--surface); }
.nav-toggle { display: none; }

.search { position: relative; width: 300px; }
.search input {
	width: 100%; height: 32px; padding: 0 32px 0 12px;
	font: inherit; color: var(--text);
	background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
}
.search input:focus { outline: none; border-color: var(--accent); background: var(--bg); }
.search input::-webkit-search-cancel-button { display: none; }
.search-key { position: absolute; right: 8px; top: 7px; font-size: 12px; line-height: 16px; padding: 0 5px; }
.search input:focus + .search-key { display: none; }
#search-results {
	position: absolute; top: 40px; left: 0; right: 0;
	margin: 0; padding: 4px; list-style: none;
	max-height: 60vh; overflow: auto;
	background: var(--bg); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow);
}
#search-results a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--text); line-height: 1.4; }
#search-results a:hover, #search-results [aria-selected="true"] a { background: var(--accent-weak); text-decoration: none; }
#search-results small { display: block; color: var(--muted); font-size: 13px; }
#search-results .empty { padding: 6px 10px; color: var(--muted); }

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

.layout { display: flex; align-items: flex-start; }
.sidebar {
	position: sticky; top: var(--topbar);
	flex: 0 0 264px;
	height: calc(100vh - var(--topbar));
	overflow-y: auto;
	padding: 24px 12px 48px 16px;
	border-right: 1px solid var(--border);
	font-size: 15px; line-height: 1.4;
}
.sidebar ul { list-style: none; margin: 0; padding: 0; }
.sidebar ul ul { margin: 2px 0 6px 12px; padding-left: 8px; border-left: 1px solid var(--border); }
.sidebar a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--text); }
.sidebar ul ul a { color: var(--muted); }
.sidebar a:hover { color: var(--text); background: var(--surface); text-decoration: none; }
.sidebar a[aria-current="page"] { color: var(--accent); background: var(--accent-weak); font-weight: 600; }

.main { flex: 1 1 auto; min-width: 0; padding: 40px 48px 32px; }
.content { max-width: 70ch; }

/* ----------------------------------------------------------- headings */

.content h3, .content h4, .content h5, .content h6 { line-height: 1.3; color: var(--text); margin: 2em 0 .6em; font-weight: 650; }
.content h3, .content h4 { font-size: 24px; letter-spacing: -.01em; }
.content h5 { font-size: 20px; }
.content h6 { font-size: 17px; }
.content > :is(h4, h5):first-child,
.content > style:first-child + :is(h4, h5) { font-size: 32px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 .6em; }
/* The fragments put a <br> after most headings; margins already do that job. */
.content :is(h3, h4, h5, h6) + br { display: none; }
.content section > h5:first-child { font-family: var(--mono); font-size: 18px; font-weight: 600; margin-top: 0; }

.content p, .content ul, .content ol, .content dl, .content pre, .content table, .content figure { margin: 0 0 1em; }
.content ul, .content ol { padding-left: 1.4em; }
.content li { margin: .2em 0; }
.content hr { border: 0; border-top: 1px solid var(--border); margin: 2em 0; }
.content dt { font-weight: 600; }
.content dd { margin: 0 0 .8em 1.25em; }
.content s { color: var(--muted); }

/* ---------------------------------------------------------------- code */

code, kbd, pre, var { font-family: var(--mono); }
.content code { font-size: .88em; padding: .1em .35em; background: var(--surface); border-radius: 4px; overflow-wrap: anywhere; }
/* Stand-alone syntax lines in the function pages. */
.content > code, .content section > code { display: block; width: fit-content; max-width: 100%; margin: 0 0 1em; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; }
.content pre {
	padding: 14px 16px;
	overflow-x: auto;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 6px;
	font-size: 14px; line-height: 1.6;
	tab-size: 4;
}
.content pre code { padding: 0; background: none; font-size: inherit; border-radius: 0; overflow-wrap: normal; }
.content cite { font-style: normal; color: var(--tok-c); }
kbd {
	display: inline-block;
	font-size: .8em; line-height: 1.5;
	padding: 0 .45em;
	color: var(--text);
	background: var(--bg);
	border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px;
}

.tok-c { color: var(--tok-c); font-style: italic; }
.tok-s { color: var(--tok-s); }
.tok-n { color: var(--tok-n); }
.tok-k { color: var(--tok-k); font-weight: 600; }
.tok-f { color: var(--tok-f); }
.tok-p { color: var(--tok-p); }
.tok-v { color: var(--tok-v); }

.syntax-keyword, .kw, dl.keyword dt { font-family: var(--mono); font-size: .9em; color: var(--tok-k); }
td.syntax-keyword, td.kw { white-space: nowrap; }
.content code .syntax-keyword { font-size: inherit; }

/* Console (installation page). */
.console { margin: 0 0 1em; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.console-title { padding: 4px 12px; font-size: 13px; color: var(--muted); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.console-body { padding: 10px 12px; font-family: var(--mono); font-size: 14px; white-space: pre-wrap; background: var(--surface); }

/* -------------------------------------------------------------- blocks */

.notification {
	margin: 1.25em 0;
	padding: 12px 16px;
	background: var(--accent-weak);
	border-left: 3px solid var(--accent);
	border-radius: 0 6px 6px 0;
	font-size: 16px;
}
.notification.is-warning { background: var(--warn-weak); border-left-color: var(--warn); }
.notification.is-danger { background: rgba(198, 40, 40, .10); background: color-mix(in srgb, var(--danger) 12%, transparent); border-left-color: var(--danger); }
.notification.is-danger > i:first-child { color: var(--danger); }
.notification > i:first-child { font-style: normal; font-weight: 650; }
.notification .console { background: var(--bg); }

.content table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.content th, .content td { text-align: left; vertical-align: top; padding: 8px 12px 8px 0; border-bottom: 1px solid var(--border); overflow-wrap: anywhere; }
.content th { font-weight: 600; color: var(--muted); font-size: 13px; }
.content td > :last-child { margin-bottom: 0; }
.table-sm td, .table-sm th { padding-top: 6px; padding-bottom: 6px; }
.table-borderless td, .table-borderless th { border: 0; }
.table-responsive, .table-container { overflow-x: auto; }

.preview { border-radius: 8px; }
img.is-256 { width: 256px; margin: 0 8px 8px 0; vertical-align: top; }
.content figure { margin-left: 0; margin-right: 0; }
.content figure.screenshot img { display: block; border: 1px solid var(--border); }
.content figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); }

/* Bulma helpers used by the fragments. */
.has-text-centered { text-align: center; }
.has-text-danger, .text-danger { color: var(--danger); }
.is-unstyled { list-style: none; padding-left: 0; }
.w-25 { width: 25%; }
.is-two-thirds { width: 66%; }
.m-0 { margin: 0 !important; }
.p-0 { padding: 0 !important; }
.mt-2 { margin-top: .5rem !important; }
.mt-5 { margin-top: 1.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mr-4 { margin-right: 1rem !important; }
.my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
.my-6 { margin-top: 3rem !important; margin-bottom: 3rem !important; }

/* --------------------------------------------------------- pager/footer */

.pager { max-width: 70ch; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 56px 0 0; }
.pager a { display: block; padding: 12px 16px; border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-weight: 600; line-height: 1.4; }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager span { display: block; font-size: 13px; font-weight: 400; color: var(--muted); }
.pager-next { text-align: right; }
.footer { max-width: 70ch; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); font-size: 14px; line-height: 1.6; color: var(--muted); }
.footer p { margin: 0 0 8px; }

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

@media (max-width: 900px) {
	.nav-toggle { display: inline-flex; }
	.sidebar {
		position: fixed; top: var(--topbar); left: 0; bottom: 0; z-index: 15;
		width: min(300px, 85vw); height: auto;
		background: var(--bg);
		transform: translateX(-100%);
		transition: transform 160ms ease-in;
	}
	.nav-open .sidebar { transform: none; box-shadow: var(--shadow); transition-timing-function: ease-out; }
	.main { padding: 28px 20px 24px; }
	.topbar { padding: 0 12px; gap: 8px; }
	.search { width: auto; flex: 1 1 140px; max-width: 300px; }
	.repo { display: none; }
}
@media (max-width: 520px) {
	.brand span { display: none; }
	.search-key { display: none; }
	body { font-size: 16px; }
	.content > :is(h4, h5):first-child { font-size: 28px; }
	.pager { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .sidebar { transition: none !important; } }