:root {
	color-scheme: dark;
	--bg: #1a1b26;
	--bg-alt: #24283b;
	--bg-soft: #1f2335;
	--border: #414868;
	--fg: #c0caf5;
	--fg-dim: #a9b1d6;
	--fg-muted: #737aa2;
	--link: #7aa2f7;
	--accent: #bb9af7;
	--accent-2: #7dcfff;
	--mark: #e0af68;
	/* Size summary units: code blue, docs orange, binary data teal, chosen
	   to stay apart under red-green and blue-yellow color blindness. */
	--code: #5b8def;
	--docs: #ffa94d;
	--data: #73daca;
	--on-code: #1a1b26;
	--on-docs: #1a1b26;
	--on-data: #1a1b26;
	--hover: #2f344d;
	--target: #33395a;
	--on-accent: #1a1b26;
	--on-link: #1a1b26;
	--notice-bg: #3b2f3a;
	--notice-fg: #f7768e;
	--thead: rgba(0, 0, 0, 0.2);
	--shadow: rgba(0, 0, 0, 0.5);
	--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--radius: 0.375rem;
	--measure: 56rem;
	--drawer-w: 17rem;
}

:root[data-theme="light"] {
	color-scheme: light;
	--bg: #e1e2e7;
	--bg-alt: #d5d6db;
	--bg-soft: #dadbe2;
	--border: #a8aecb;
	--fg: #343b58;
	--fg-dim: #4a5584;
	--fg-muted: #5f6a93;
	--link: #1d5fc7;
	--accent: #7847bd;
	--accent-2: #006a8e;
	--mark: #f0b44b;
	--code: #2456b8;
	--docs: #e8730c;
	--data: #2a9d8f;
	--on-code: #ffffff;
	--on-docs: #1a1b26;
	--on-data: #1a1b26;
	--hover: #cbcee0;
	--target: #c4c8da;
	--on-accent: #ffffff;
	--on-link: #ffffff;
	--notice-bg: #f3dde1;
	--notice-fg: #a8283c;
	--thead: rgba(0, 0, 0, 0.06);
	--shadow: rgba(52, 59, 88, 0.25);
}
@media (prefers-color-scheme: light) {
	:root:not([data-theme="dark"]) {
		color-scheme: light;
		--bg: #e1e2e7;
		--bg-alt: #d5d6db;
		--bg-soft: #dadbe2;
		--border: #a8aecb;
		--fg: #343b58;
		--fg-dim: #4a5584;
		--fg-muted: #5f6a93;
		--link: #1d5fc7;
		--accent: #7847bd;
		--accent-2: #006a8e;
		--mark: #f0b44b;
		--code: #2456b8;
		--docs: #e8730c;
		--data: #2a9d8f;
		--on-code: #ffffff;
		--on-docs: #1a1b26;
		--on-data: #1a1b26;
		--hover: #cbcee0;
		--target: #c4c8da;
		--on-accent: #ffffff;
		--on-link: #ffffff;
		--notice-bg: #f3dde1;
		--notice-fg: #a8283c;
		--thead: rgba(0, 0, 0, 0.06);
		--shadow: rgba(52, 59, 88, 0.25);
	}
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Controls that only work with script. ui.js marks the root from <head>,
   so they are laid out in the first paint instead of shifting the header. */
:root:not(.js) .needs-js { display: none; }

html { tab-size: 4; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }

/* The page is an app-like shell: a fixed header, then a drawer and a main
   pane that scroll independently. */
body {
	margin: 0;
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	background: var(--bg);
	color: var(--fg);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.5;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 0.1em; }

code, pre, kbd { font-family: var(--mono); }
pre { margin: 0; }

.skip {
	position: absolute; left: 0; top: -3rem;
	padding: 0.5rem 1rem; background: var(--link); color: var(--on-link); z-index: 30;
}
.skip:focus { top: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vis { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* ---- header ---- */

.top {
	flex: none;
	background: var(--bg-soft);
	border-bottom: 1px solid var(--border);
	padding: 0.5rem 1.25rem;
	display: flex; flex-direction: column; gap: 0.45rem;
	z-index: 10;
}
.top-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.crumbs { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem; font-size: 1.2rem; min-width: 0; margin-right: 0.5rem; }
.crumbs .site { font-weight: 700; color: var(--fg); }
.crumbs .sep { color: var(--fg-muted); }
.crumbs a.crumb-repo { color: var(--fg); font-weight: 600; }

.qsearch {
	display: flex; align-items: center; flex: 1 1 16rem; max-width: 28rem; min-width: 0;
	background: var(--bg); border: 1px solid var(--border); border-radius: 1.25rem;
	padding: 0 0.5rem 0 0; position: relative;
}
.qsearch:focus-within { border-color: var(--link); box-shadow: 0 0 0 0.125rem color-mix(in srgb, var(--link) 25%, transparent); }
.qsearch input[type="search"] {
	flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0;
	color: var(--fg); font: inherit; font-size: 0.95rem; padding: 0.35rem 0.9rem;
}
.qopts { display: flex; gap: 0.15rem; }
.qopts label {
	font-family: var(--mono); font-size: 0.75rem; font-weight: 700; color: var(--fg-muted);
	padding: 0.15rem 0.4rem; border-radius: 0.3rem; cursor: pointer; user-select: none;
}
.qopts label:hover { background: var(--hover); color: var(--fg); }
.qopts input:checked + label { background: var(--link); color: var(--on-link); }
.qopts input:focus-visible + label { outline: 2px solid var(--link); }

/* One copy of the branch, clone and download controls. Wide screens show it
   in the header; narrow ones make it a popover behind the "⋯" button. */
.repo-actions {
	/* Undo the popover defaults: here it is part of the header. */
	position: static; inset: auto; margin: 0 0 0 auto; padding: 0; border: 0;
	background: none; color: inherit; overflow: visible;
	display: flex; align-items: center; gap: 0.5rem;
}
.actions-btn {
	display: none; align-items: center; justify-content: center; flex: none;
	width: 2.1rem; height: 2.1rem; padding: 0; cursor: pointer;
	color: var(--fg); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.actions-btn:hover { background: var(--hover); border-color: var(--link); }
.clone-box { display: flex; align-items: stretch; min-width: 0; }
.clone-box .clone {
	width: 15rem; min-width: 0; font-family: var(--mono); font-size: 0.8rem; color: var(--fg);
	background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 0.35rem 0.7rem; cursor: text;
}
.clone-box .clone:focus { outline: 2px solid var(--link); outline-offset: -1px; }
.clone-box .copy {
	margin-left: -1px; padding: 0 0.7rem; font: inherit; font-size: 0.8rem; cursor: pointer;
	color: var(--fg); background: var(--bg-alt); border: 1px solid var(--border);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.clone-box .copy:hover { background: var(--hover); border-color: var(--link); }
:root.js .clone-box .clone { border-radius: var(--radius) 0 0 var(--radius); }

.theme-toggle {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 2.1rem; height: 2.1rem; padding: 0; cursor: pointer; margin-left: auto;
	color: var(--fg); background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.theme-toggle:hover { background: var(--hover); border-color: var(--link); }
.repo-actions + .theme-toggle { margin-left: 0; }
.btn {
	display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap;
	padding: 0.3rem 0.8rem; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-alt); color: var(--fg); font-size: 0.85rem; cursor: pointer;
}
.btn:hover { background: var(--hover); border-color: var(--link); text-decoration: none; }
.btn.download { background: var(--link); border-color: var(--link); color: var(--on-link); font-weight: 600; list-style: none; user-select: none; }
.btn.download::-webkit-details-marker { display: none; }
.btn.download:hover { filter: brightness(1.1); }

/* Download menu: <details>, no script. "latest" first, then the tag list,
   a document of its own in a frame (ui.js fits the frame to it), in a
   scrollable menu so a long tag history never takes over the page. */
details.dl { position: relative; }
details.dl[open] > summary { filter: brightness(1.1); }
.dl-menu {
	position: absolute; right: 0; top: calc(100% + 0.3rem); z-index: 25; min-width: 12rem;
	max-height: min(20rem, 60vh); overflow-y: auto; padding: 0.25rem 0;
	background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
	box-shadow: 0 0.4rem 1.2rem var(--shadow); scrollbar-width: thin;
}
.dl-menu a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.25rem 0.9rem; color: var(--fg); white-space: nowrap; }
.dl-menu a:hover { background: var(--hover); text-decoration: none; }
.dl-menu a:first-child { font-weight: 600; border-bottom: 1px solid var(--border); margin-bottom: 0.2rem; padding-bottom: 0.35rem; }
.dl-menu .dim { color: var(--fg-muted); font-weight: 400; font-size: 0.8rem; align-self: center; }
.dl-menu a[aria-current] { font-weight: 600; }
.dl-menu a[aria-current]::after { content: "✓"; color: var(--fg-muted); }
.branches .dl-menu a:first-child { font-weight: inherit; border-bottom: 0; margin-bottom: 0; padding-bottom: 0.25rem; }
.tags-frame { display: block; width: 100%; height: 8rem; border: 0; background: var(--bg-alt); }

body.tags-doc { display: block; height: auto; overflow: auto; scrollbar-width: thin; background: var(--bg-alt); }
.tags-doc a { display: block; padding: 0.25rem 0.9rem; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tags-doc a:hover { background: var(--hover); text-decoration: none; }
.tags-doc .none { margin: 0; padding: 0.25rem 0.9rem; color: var(--fg-muted); font-size: 0.85rem; }
.tags-doc .latest { border-bottom: 1px solid var(--border); margin-bottom: 0.2rem; padding-bottom: 0.35rem; }
.tags-doc .latest > a, .tags-doc .latest > .none { display: flex; justify-content: space-between; gap: 1rem; font-weight: 600; }
.tags-doc .latest > .none { color: var(--fg); font-size: inherit; }
.tags-doc .dim { color: var(--fg-muted); font-weight: 400; font-size: 0.8rem; align-self: center; font-family: var(--mono); }
.tags-doc .commit { display: flex; gap: 0.5rem; margin: 0; padding: 0 0.9rem; color: var(--fg-muted); font-size: 0.8rem; }
.tags-doc .subject { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tags-doc .commit time { white-space: nowrap; }

.langs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.5rem; }
.langs:last-child { margin-bottom: 1rem; }
/* Each row's color tells its unit apart: lines of code, words of docs,
   bytes of binary data. */
.langs.code { --unit: var(--code); --on-unit: var(--on-code); }
.langs.docs { --unit: var(--docs); --on-unit: var(--on-docs); }
.langs.binary { --unit: var(--data); --on-unit: var(--on-data); }
.pill {
	display: inline-flex; align-items: center; gap: 0.4em; padding: 0.05rem 0.2rem 0.05rem 0.6rem;
	background: var(--bg-alt); border: 1px solid var(--unit, var(--border)); border-radius: 1rem;
	font-size: 0.8rem; color: var(--fg-dim); line-height: 1.4;
}
.pill b { background: var(--border); color: var(--fg); padding: 0 0.5rem; border-radius: 0.75rem; }
.pill.total b { background: var(--unit, var(--border)); color: var(--on-unit, var(--on-accent)); }
a.pill { text-decoration: none; }
a.pill:hover { background: var(--hover); color: var(--fg); text-decoration: none; }

/* ---- layout: drawer + main ---- */

.layout { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; }
.layout > main { flex: 1 1 auto; min-width: 0; overflow: auto; display: flex; flex-direction: column; }
.bottom {
	margin-top: auto; padding: 1rem 1.25rem; border-top: 1px solid var(--border);
	color: var(--fg-muted); font-size: 0.85rem;
	display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between;
}
.bottom .custom a { color: var(--fg-dim); }

/* ---- file drawer ----
   Wide screens show the drawer beside the page, and the checkbox hides it.
   Narrow ones make it a popover. A closed popover is display: none, which
   would lose the drawer's scroll to the current entry, so here it is moved
   off-screen and made invisible instead. */

.drawer-btn {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 2.1rem; height: 2.1rem; border: 1px solid var(--border); border-radius: var(--radius);
	background: var(--bg-alt); color: var(--fg); cursor: pointer; user-select: none; padding: 0;
}
.drawer-btn:hover { background: var(--hover); border-color: var(--link); }
#drawer-toggle:focus-visible ~ .top .drawer-btn { outline: 2px solid var(--link); outline-offset: 2px; }
.drawer {
	/* Undo the popover defaults: here it is part of the layout. */
	position: static; inset: auto; margin: 0; padding: 0; border: 0; color: inherit;
	display: flex; flex-direction: column; overflow: hidden;
	flex: 0 0 var(--drawer-w); width: var(--drawer-w); height: auto;
	background: var(--bg-soft); border-right: 1px solid var(--border);
}
.drawer-frame { flex: 1 1 auto; display: block; width: 100%; border: 0; background: var(--bg-soft); }
.drawer-close, .drawer-btn.narrow { display: none; }

@media (min-width: 48.0625rem) {
	#drawer-toggle:checked ~ .layout .drawer { display: none; }
}

@media (max-width: 48rem) {
	#drawer-toggle, .drawer-btn.wide { display: none; }
	.drawer-btn.narrow { display: inline-flex; }
	.drawer {
		position: fixed; inset: 0 auto 0 0; width: min(20rem, 85vw);
		border-right: 0; box-shadow: 0.3rem 0 1rem var(--shadow);
		visibility: hidden; transform: translateX(-100%);
		transition: transform 0.2s, visibility 0.2s;
	}
	.drawer:popover-open { visibility: visible; transform: none; }
	.drawer::backdrop { background: rgba(0, 0, 0, 0.45); }
	.drawer-close {
		display: flex; align-items: center; gap: 0.4rem; margin: 0.5rem 0.75rem;
		padding: 0.4rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius);
		background: var(--bg-alt); color: var(--fg); cursor: pointer; font: inherit; user-select: none;
	}
	.drawer-close:hover { background: var(--hover); }
	.actions-btn { display: inline-flex; order: 1; margin-left: auto; }
	.repo-actions:not(:popover-open) { display: none; }
	.repo-actions {
		position: fixed; inset: 3.25rem 0.75rem auto auto; margin: 0;
		width: min(20rem, calc(100vw - 1.5rem)); max-height: calc(100dvh - 4rem); overflow: auto;
		flex-direction: column; align-items: stretch; padding: 0.75rem;
		background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius);
		box-shadow: 0 0.4rem 1.2rem var(--shadow);
	}
	.repo-actions .clone-box .clone { width: 100%; flex: 1 1 auto; }
	.repo-actions .btn { display: flex; justify-content: center; }
	/* In the popover the menus open in place instead of floating. */
	.repo-actions details.dl { position: static; }
	.repo-actions .dl-menu { position: static; margin-top: 0.3rem; max-height: 14rem; box-shadow: none; }
	.qsearch { flex-basis: 100%; max-width: none; order: 2; }
	.theme-toggle { order: 1; margin-left: auto; }
	.actions-btn ~ .theme-toggle { margin-left: 0; }
}
@media (max-width: 48rem) and (prefers-reduced-motion: reduce) {
	.drawer { transition: none; }
}

/* ---- file tree (the drawer document, in the drawer's frame) ----
   Each folder is a <details>: its icon opens and closes it in place, and
   its name links to its page. The page picks its own entry with the
   frame's fragment, which opens the folders around it: the current file
   is the :target, or for a folder, the list of its entries. */

body.drawer-doc {
	display: block; overflow: auto; scrollbar-width: thin; padding: 0.5rem 0 1rem;
	background: var(--bg-soft); font-size: 0.9rem; line-height: 1.7;
}
.drawer-head { padding-bottom: 0.25rem; margin-bottom: 0.25rem; border-bottom: 1px solid var(--border); }
.drawer-head a { display: block; padding: 0.1rem 0.75rem; font-weight: 700; color: var(--fg); }
.drawer-head a:hover { background: var(--hover); text-decoration: none; }

.tree ul { list-style: none; margin: 0; padding: 0; }
.tree details > ul { padding-left: 0.75rem; }
.tree a, .tree li.s span, .tree li.m span {
	display: flex; align-items: center; padding: 0.1rem 0.75rem;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tree a { color: var(--fg-dim); }
.tree li.s span, .tree li.m span { color: var(--fg-muted); font-style: italic; }
.tree li.s a { font-style: italic; }
.tree .icon { margin-right: 0.45em; flex: none; }
.tree details[open] > summary .i-dir { --icon: url(icon-dir-open.svg?v=18fed55b5f023134); }
.tree li.d a, .tree li.d .icon, .tree li.m .icon { color: var(--accent-2); }
.tree a:hover { background: var(--hover); color: var(--fg); text-decoration: none; }
/* A folder's row is its <summary>: the icon toggles it, the name is a
   link to its page, underlined on hover to tell the two apart. */
.tree summary {
	cursor: pointer; list-style: none; display: flex; align-items: center; padding: 0.1rem 0.75rem;
}
.tree summary::-webkit-details-marker { display: none; }
.tree summary:hover { background: var(--hover); }
.tree summary a { flex: 1 1 auto; padding: 0; }
.tree summary a:hover { background: none; text-decoration: underline; }
.tree li:target > a, .tree details:has(> ul:target) > summary, .drawer-head:target > a {
	background: var(--target); font-weight: 600;
}
.tree li:target > a, .tree details:has(> ul:target) > summary a { color: var(--fg); }
/* The browser scrolls to the target; keep it off the top edge. */
.tree li:target, .tree ul:target, .drawer-head:target { scroll-margin-top: 40vh; }

/* ---- tables (index, listings) ---- */

table.files {
	width: 100%; border-collapse: separate; border-spacing: 0;
	background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; margin: 0 0 1.5rem;
}
table.files th {
	text-align: left; padding: 0.6rem 1rem; font-size: 0.75rem; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--accent); background: var(--thead);
	border-bottom: 1px solid var(--border);
}
table.files td { padding: 0.5rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
table.files tr:last-child td { border-bottom: none; }
table.files tbody tr:hover { background: var(--hover); }
/* The whole row opens the entry: the name's link stretches over it. Links
   of their own (path folders on type pages, the bars, which keep their
   tooltips) sit above the stretched one. */
table.files tbody tr { position: relative; }
td.name a:not(.path-dir)::after { content: ""; position: absolute; inset: 0; }
td.name .path-dir, td.bar .bar-link { position: relative; z-index: 1; }
.num { text-align: right; white-space: nowrap; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
table.files th.num { text-align: right; }
/* Lines and Size: each a ring filled clockwise from the top as far as the
   entry's share of the folder, then its amount. */
table.files td.bar { vertical-align: middle; white-space: nowrap; }
td.bar .amount {
	margin-left: 0.4rem; color: var(--fg-dim); font-size: 0.85rem;
	font-variant-numeric: tabular-nums; vertical-align: middle;
}
td.bar .bar-link { display: inline-block; vertical-align: middle; line-height: 0; }
.ring { width: 1.25rem; height: 1.25rem; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3; }
.ring .track { stroke: var(--border); opacity: 0.6; }
.ring .code { stroke: var(--code); }
.ring .docs { stroke: var(--docs); }
.ring .size { stroke: var(--data); }
.when { white-space: nowrap; color: var(--fg-dim); font-variant-numeric: tabular-nums; }
/* Modified, Lines and Size shrink to their contents; the name takes the
   rest of the width. */
table.files th.when, table.files th.bar { width: 1%; white-space: nowrap; text-align: left; }
td.name { font-weight: 600; overflow-wrap: anywhere; }
td.name .path-dir { font-weight: normal; color: var(--fg-dim); }
td.name .sep { color: var(--fg-muted); font-weight: normal; padding: 0 0.15em; }
td.desc { color: var(--fg-dim); }
.icon {
	display: inline-block; width: 1em; height: 1em; vertical-align: -0.15em; margin-right: 0.5em; flex: none;
	color: var(--fg-muted); background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.i-dir { --icon: url(icon-dir.svg?v=18fed55b5f023134); }
.i-file { --icon: url(icon-file.svg?v=18fed55b5f023134); }
.i-symlink { --icon: url(icon-symlink.svg?v=18fed55b5f023134); }
.i-submodule { --icon: url(icon-submodule.svg?v=18fed55b5f023134); }
@media (forced-colors: active) { .icon { forced-color-adjust: none; background-color: CanvasText; } }
tr.dir td.name a, tr.dir .icon, tr.submodule .icon { color: var(--accent-2); }
.target { color: var(--fg-muted); font-weight: 400; font-family: var(--mono); font-size: 0.85rem; }

/* ---- index ---- */

body.index .page, body.error .page { max-width: 70rem; margin: 0 auto; padding: 2rem 1.25rem; width: 100%; }
.site-title { margin: 0 0 0.25rem; font-size: 2rem; }
.tagline { margin: 0 0 2rem; color: var(--fg-dim); font-size: 1.1rem; }
.repos {
	background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
	overflow: hidden; margin: 0 0 1.5rem;
}
.repos-head, a.repo-row {
	display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr 7rem; gap: 0 1rem; padding: 0.5rem 1rem; align-items: baseline;
}
.repos-head {
	padding-top: 0.6rem; padding-bottom: 0.6rem; font-size: 0.75rem; letter-spacing: 0.05em;
	text-transform: uppercase; color: var(--accent); background: var(--thead); border-bottom: 1px solid var(--border);
}
.repos-head .num { text-align: right; }
a.repo-row { color: inherit; border-bottom: 1px solid var(--border); }
a.repo-row:last-child { border-bottom: none; }
a.repo-row:hover { background: var(--hover); text-decoration: none; }
a.repo-row:focus-visible { outline: 2px solid var(--link); outline-offset: -2px; }
a.repo-row .name { font-weight: 600; color: var(--link); overflow-wrap: anywhere; }
a.repo-row:hover .name { text-decoration: underline; }
a.repo-row .desc { color: var(--fg-dim); }
a.repo-row .num { text-align: right; }
.tags { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
a.repo-row .desc .tags { vertical-align: 0.05em; }
.tag {
	padding: 0 0.5rem; border: 1px solid var(--border); border-radius: 1rem;
	font-size: 0.75rem; line-height: 1.5; color: var(--accent-2); white-space: nowrap;
}
.group h2 {
	font-size: 1.35rem; color: var(--accent); margin: 2rem 0 0.75rem;
	padding-bottom: 0.35rem; border-bottom: 1px solid var(--border);
}
.group h2 a { color: inherit; }
.group-desc { margin: 0 0 0.75rem; color: var(--fg-dim); }
.group-desc > :first-child { margin-top: 0; }
.group-desc > :last-child { margin-bottom: 0; }
.empty { color: var(--fg-muted); }

/* ---- listing ---- */

body.listing .page { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.25rem; width: 100%; }
.repo-head h1 { margin: 0 0 0.25rem; font-size: 1.75rem; }
.repo-head .desc { margin: 0 0 1rem; color: var(--fg-dim); font-size: 1.05rem; }
.repo-head .desc:has(+ .tags) { margin-bottom: 0.5rem; }
.repo-head .tags { display: flex; margin: 0 0 1rem; }
.dir-title { font-size: 1.25rem; margin: 0 0 1rem; font-weight: 600; }
/* Long listings under a README fold in place: a checkbox before the table
   reveals the .extra rows and hides the "N more…" row. */
table.files tr.extra, table.files tr.less-row { display: none; }
table.files tr.more-row td, table.files tr.less-row td { padding: 0; }
table.files tr.more-row label, table.files tr.less-row label {
	display: block; padding: 0.5rem 1rem; cursor: pointer; color: var(--link); font-weight: 600;
}
table.files tr.more-row label .chev, table.files tr.less-row label .chev { display: inline-block; width: 1em; font-size: 0.7em; color: var(--fg-muted); vertical-align: 0.1em; }
#more:checked ~ table.files tr.extra { display: table-row; }
#more:checked ~ table.files tr.more-row { display: none; }
#more:checked ~ table.files tr.less-row { display: table-row; }
table.files tr.less-row label .chev { transform: rotate(-90deg); }
#more:focus-visible ~ table.files tr.more-row label, #more:focus-visible ~ table.files tr.less-row label { outline: 2px solid var(--link); outline-offset: -2px; }

.readme { margin-top: 2rem; }
.readme-title {
	font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-muted);
	margin: 0; padding: 0.5rem 1rem; background: var(--bg-soft);
	border: 1px solid var(--border); border-bottom: none; border-radius: var(--radius) var(--radius) 0 0;
}
.readme-title a { color: inherit; }
.readme .markdown, .readme pre.plain {
	border: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius);
	padding: 1.5rem 2rem; background: var(--bg);
}
pre.plain { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 0.9rem; }

/* ---- file pages ---- */

.filebar {
	display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem;
	padding: 0.5rem 1.25rem; background: var(--bg-soft); border-bottom: 1px solid var(--border);
	font-size: 0.9rem;
}
.filebar .fname { font-family: var(--mono); font-weight: 700; }
.pathbar { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.1rem 0.4rem; font-family: var(--mono); }
.pathbar .sep { color: var(--fg-muted); font-weight: 400; }
.pathbar [aria-current] { color: var(--fg); }
.filebar .finfo { display: flex; gap: 1rem; color: var(--fg-muted); }
.filebar .factions { margin-left: auto; display: flex; gap: 0.75rem; align-items: center; }
.notice {
	margin: 0; padding: 0.5rem 1.25rem; background: var(--notice-bg); color: var(--notice-fg);
	border-bottom: 1px solid var(--border); font-size: 0.9rem;
}

table.code {
	border-collapse: collapse; width: 100%; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.45;
}
table.code td { padding: 0; vertical-align: top; }
table.code td.ln {
	width: 1px; text-align: right; user-select: none;
	background: var(--bg-soft); border-right: 1px solid var(--border);
}
table.code td.ln pre { padding: 0.75rem 0; }
table.code td.ln a {
	display: block; padding: 0 0.75rem; color: var(--fg-muted); text-decoration: none;
	/* #L42 lands roughly mid-pane instead of at the top edge. */
	scroll-margin-top: 45vh;
}
table.code td.ln a:hover { color: var(--link); }
table.code td.ln a:target { background: var(--accent); color: var(--on-accent); }
table.code td.src pre { padding: 0.75rem 1rem; overflow-x: auto; }
/* The page owns backgrounds; the syntax style only colours tokens. The
   chroma rules are theme-scoped and would otherwise outrank these, painting
   a box behind every line. */
table.code .chroma, .markdown pre.chroma, .markdown pre .chroma { background: transparent !important; }
.markdown pre.chroma { background: var(--bg-alt) !important; }
/* Lexers flag anything they do not know (a "$" in a C-like language) as an
   error; styles paint that loudly. Highlighting should not shout. */
.chroma .err { background: none !important; color: inherit !important; }
pre.chroma { overflow-x: auto; }

figure.image { margin: 0; padding: 2rem; text-align: center; }
figure.image img { max-width: 100%; height: auto; background: var(--bg-alt); border: 1px solid var(--border); }
p.binary { padding: 2rem 1.25rem; color: var(--fg-dim); }

/* markdown file: rendered/source toggle, pure CSS */
.toggle { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.toggle label { padding: 0.15rem 0.7rem; cursor: pointer; color: var(--fg-dim); background: var(--bg-alt); }
.toggle label:hover { background: var(--hover); }
#v-rendered:checked ~ .filebar label[for="v-rendered"],
#v-source:checked ~ .filebar label[for="v-source"] { background: var(--link); color: var(--on-link); }
#v-rendered:focus-visible ~ .filebar .toggle, #v-source:focus-visible ~ .filebar .toggle { outline: 2px solid var(--link); outline-offset: 2px; }
#v-source:checked ~ .rendered { display: none; }
#v-rendered:checked ~ .source { display: none; }
.mdpage .rendered { max-width: var(--measure); margin: 0 auto; padding: 2rem 1.5rem; }

/* ---- markdown body ---- */

.markdown { line-height: 1.6; overflow-wrap: anywhere; }
.markdown > :first-child { margin-top: 0; }
.markdown > :last-child { margin-bottom: 0; }
.markdown h1, .markdown h2, .markdown h3, .markdown h4 { margin: 1.5em 0 0.5em; line-height: 1.25; }
.markdown h1 { font-size: 1.75rem; } .markdown h2 { font-size: 1.4rem; } .markdown h3 { font-size: 1.15rem; }
.markdown p, .markdown ul, .markdown ol, .markdown blockquote, .markdown table, .markdown pre { margin: 0 0 1rem; }
.markdown ul, .markdown ol { padding-left: 1.4em; }
.markdown li > ul, .markdown li > ol { margin: 0.25rem 0; }
.markdown li + li { margin-top: 0.15rem; }
.markdown code {
	background: var(--bg-alt); padding: 0.15em 0.35em; border-radius: 0.25rem; font-size: 0.9em;
}
.markdown pre {
	background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
	padding: 0.85rem 1rem; font-size: 0.85rem; line-height: 1.45;
}
.markdown pre code { background: transparent; padding: 0; font-size: inherit; }
.markdown pre.raw-html { color: var(--fg-muted); white-space: pre-wrap; }
.markdown blockquote {
	border-left: 0.25rem solid var(--accent); padding: 0.5rem 1.25rem; color: var(--fg-dim);
	background: var(--bg-soft);
}
.markdown img { max-width: 100%; height: auto; }
.markdown table { border-collapse: collapse; display: block; overflow-x: auto; max-width: 100%; }
.markdown th, .markdown td { border: 1px solid var(--border); padding: 0.4rem 0.75rem; text-align: left; }
.markdown th { background: var(--bg-alt); }
.markdown hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }
.markdown input[type="checkbox"] { margin-right: 0.4em; }
.markdown .footnotes { font-size: 0.9rem; color: var(--fg-dim); }

/* ---- search ---- */

.search-page { max-width: 70rem; margin: 0 auto; padding: 1.5rem 1.25rem; width: 100%; }
.search-title { margin: 0 0 0.5rem; font-size: 1.5rem; }
.search-help { margin: 0 0 1rem; color: var(--fg-muted); font-size: 0.9rem; }
.search-help b { font-family: var(--mono); color: var(--fg-dim); }
.search-page .row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem; align-items: center; }
.search-page input[type="text"] {
	flex: 1 1 14rem; max-width: 24rem; padding: 0.45rem 0.75rem; font: inherit; color: var(--fg);
	background: var(--bg-alt); border: 1px solid var(--border); border-radius: var(--radius);
}
.search-page input:focus { outline: 2px solid var(--link); outline-offset: -1px; }
.status { color: var(--fg-muted); font-size: 0.9rem; margin: 0.75rem 0 1rem; }
.hit-file { margin-bottom: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-alt); }
.hit-file summary {
	padding: 0.4rem 0.75rem; cursor: pointer; font-weight: 600; display: flex; gap: 1rem; align-items: baseline;
}
.hit-file summary .count { margin-left: auto; color: var(--fg-muted); font-weight: 400; font-size: 0.85rem; }
.hits { border-top: 1px solid var(--border); font-family: var(--mono); font-size: 0.8125rem; }
.hit { display: flex; gap: 0.75rem; padding: 0.15rem 0.75rem; color: var(--fg); }
.hit:hover { background: var(--hover); text-decoration: none; }
.hit .ln { color: var(--fg-muted); min-width: 3em; text-align: right; user-select: none; }
.hit code { white-space: pre-wrap; overflow-wrap: anywhere; }
.hit mark { background: var(--mark); color: #1a1b26; border-radius: 2px; }

/* ---- small screens ---- */

@media (max-width: 40rem) {
	.top { padding-left: 0.75rem; padding-right: 0.75rem; }
	.bottom { padding-left: 0.75rem; padding-right: 0.75rem; }
	body.index .page, body.error .page, body.listing .page, .search-page { padding: 1rem 0.75rem; }
	table.files td, table.files th { padding: 0.5rem 0.6rem; }
	.readme .markdown, .readme pre.plain { padding: 1rem; }
	.mdpage .rendered { padding: 1.25rem 0.75rem; }
	.filebar { padding: 0.5rem 0.75rem; }
	/* Smallest size that stays comfortably readable, so lines fit. */
	table.code { font-size: 0.6875rem; line-height: 1.45; }
	table.code td.ln a { padding: 0 0.4rem; }
	table.code td.src pre { padding: 0.75rem 0.5rem; }
	.markdown pre { font-size: 0.6875rem; padding: 0.65rem 0.75rem; }
	table.files th.when, table.files td.when { display: none; }
	td.bar .amount { display: none; }
	table.files th.bar, table.files td.bar { text-align: center; }
	.repos-head { display: none; }
	a.repo-row { grid-template-columns: 1fr; gap: 0.1rem 0; padding: 0.7rem 0.9rem; }
	a.repo-row .num { text-align: left; font-size: 0.85rem; color: var(--fg-muted); }
	a.repo-row .num::before { content: "Updated "; }
	.crumbs { font-size: 1.05rem; }
}