index : cgit

/*
 * cgit.css: styling for the cgit web interface
 *
 * Colours are driven by CSS custom properties via light-dark(), so the
 * whole theme follows the reader's system preference and can be flipped
 * with the header toggle (which sets data-theme on <html>). All rules
 * stay scoped under div#cgit so cgit can be embedded in another page.
 */

div#cgit {
	color-scheme: light dark;

	/* Palette: light-dark(light value, dark value) */
	--bg:            light-dark(#ffffff, #1b1b1b);
	--fg:            light-dark(#333333, #d6d6d6);
	--muted:         light-dark(#777777, #9a9a9a);
	--faint:         light-dark(#888888, #7f7f7f);
	--footer-fg:     light-dark(#bbbbbb, #666666);
	--link:          light-dark(#0053b3, #6ea8fe);

	--border:        light-dark(#cccccc, #3a3a3a);
	--border-mid:    light-dark(#aaaaaa, #4a4a4a);
	--border-strong: light-dark(#666666, #6a6a6a);

	--surface:       light-dark(#eeeeee, #2a2a2a);
	--surface-2:     light-dark(#f7f7f7, #232323);
	--row-hover:     light-dark(#ebebeb, #303030);
	--tab-active-bg: light-dark(#cccccc, #3a3a3a);

	--add:           light-dark(#007000, #6cc26c);
	--del:           light-dark(#c00000, #e07070);
	--upd:           light-dark(#0000cc, #6ea8fe);
	--hunk:          light-dark(#000099, #7aa2f7);
	--accent:        light-dark(#cc0000, #ff6b6b);
	/* Faded yellow wash for the fragment-targeted source line. Kept
	 * translucent so it reads over any token colour in both themes. */
	--line-hl:       light-dark(rgba(212, 167, 44, 0.18), rgba(224, 192, 80, 0.14));

	--notes-bg:      light-dark(#ffffdd, #33331a);
	--notes-border:  light-dark(#eeee99, #55551f);

	--ss-add-bg:     light-dark(#ccffcc, #24402a);
	--ss-add-bg2:    light-dark(#aaccaa, #2e4a33);
	--ss-del-bg:     light-dark(#ffcccc, #402424);
	--ss-del-bg2:    light-dark(#ccaaaa, #4a2e2e);
	--ss-chg-bg:     light-dark(#ffffcc, #40401f);
	--ss-chg-bg2:    light-dark(#ccccaa, #4a4a2e);
	--ss-lineno-bg:  light-dark(#eeeeee, #2a2a2a);
	--ss-hunk-bg:    light-dark(#ccccff, #2a2a45);
	--graph-add:     light-dark(#55cc55, #4a8f4a);
	--graph-rem:     light-dark(#cc5555, #8f4a4a);

	--age-mins:      light-dark(#008000, #5cb85c);
	--age-hours:     light-dark(#008000, #5cb85c);
	--age-days:      light-dark(#004400, #7cba7c);
	--age-weeks:     light-dark(#444444, #a0a0a0);
	--age-months:    light-dark(#888888, #8a8a8a);
	--age-years:     light-dark(#bbbbbb, #6a6a6a);

	--deco-fg:       light-dark(#000000, #f0f0f0);
	--branch-bg:     light-dark(#88ff88, #1c5c2c);
	--branch-bd:     light-dark(#007700, #2f8f3f);
	--tag-bg:        light-dark(#ffff88, #5c5c1c);
	--tag-bd:        light-dark(#777700, #8f8f2f);
	--tag-ann-bg:    light-dark(#ffcc88, #6c4a1c);
	--tag-ann-bd:    light-dark(#777700, #8f6f2f);
	--remote-bg:     light-dark(#ccccff, #2c2c6c);
	--remote-bd:     light-dark(#000077, #4a4a9f);
	--head-bg:       light-dark(#ff8888, #6c1c1c);
	--head-bd:       light-dark(#770000, #9f3f3f);

	--col1:          light-dark(#aa0000, #ff6b6b);
	--col2:          light-dark(#00aa00, #6cc26c);
	--col3:          light-dark(#aaaa00, #cccc60);
	--col4:          light-dark(#0000aa, #6ea8fe);
	--col5:          light-dark(#aa00aa, #d06cd0);
	--col6:          light-dark(#00aaaa, #6cd0d0);

	--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
		"Liberation Mono", "DejaVu Sans Mono", monospace;

	/* Shared horizontal inset so every region lines up down the page. */
	--gutter: 1.25rem;
	/* Shared height so the toggle, dropdowns and fields all agree. */
	--control-h: 2em;
	/* Corner radii, one size for controls and blocks, smaller for
	 * inline code, smallest for ref badges. */
	--radius: 5px;
	--radius-s: 3px;
	--radius-xs: 2px;

	padding: 0;
	margin: 0em;
	font-family: var(--font-sans);
	font-size: 13px;
	line-height: 1.4;
	/* Hold the type size steady when a phone is turned to landscape. */
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	color: var(--fg);
	background: var(--bg);
}

/* Explicit theme choices made through the header toggle. The marker is on
 * <html> rather than div#cgit so the script can set it before the body is
 * parsed, which is what keeps the first paint from showing the other theme. */
html[data-theme="light"] div#cgit { color-scheme: light; }
html[data-theme="dark"]  div#cgit { color-scheme: dark; }

/* On a standalone cgit page, paint the page background to match the app
 * and drop the default body margin so the interface is part of the page
 * rather than a card floating on a mismatched canvas. Scoped to the
 * cgit-standalone class so an embedding host page is left alone; the
 * toggle keeps the two in sync by setting color-scheme on <html>. */
html.cgit-standalone {
	color-scheme: light dark;
	background: light-dark(#ffffff, #1b1b1b);
}

html.cgit-standalone,
html.cgit-standalone body {
	margin: 0;
}

div#cgit * {
	box-sizing: border-box;
}

div#cgit a {
	color: var(--link);
	text-decoration: none;
}

div#cgit a:hover {
	text-decoration: underline;
}

div#cgit img {
	border: none;
	max-width: 100%;
}

div#cgit table {
	border-collapse: collapse;
}

/* Form controls */

div#cgit select,
div#cgit input,
div#cgit button {
	font-family: inherit;
	font-size: inherit;
	height: var(--control-h);
	color: var(--fg);
	background-color: var(--surface);
	border: solid 1px var(--border);
	border-radius: var(--radius);
	padding: 0 0.5em;
	line-height: 1.3;
	vertical-align: middle;
}

div#cgit input[type="search"],
div#cgit input[type="text"] {
	background-color: var(--bg);
}

div#cgit select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 1.7em;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.55em center;
	cursor: pointer;
}

div#cgit button,
div#cgit input[type="submit"] {
	cursor: pointer;
}

div#cgit select:hover,
div#cgit button:hover,
div#cgit input[type="submit"]:hover {
	border-color: var(--border-mid);
	color: var(--fg);
}

div#cgit select:focus-visible,
div#cgit input:focus-visible,
div#cgit button:focus-visible {
	outline: 2px solid var(--link);
	outline-offset: 1px;
}

/* Masthead */

div#cgit #header {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	/* The owner spans the switcher and toggle columns so it right-aligns
	 * to the same edge as the toggle above it. Confined to the switcher
	 * column alone it stopped short by the toggle's width plus the gap. */
	grid-template-areas:
		"logo heading switch theme"
		"logo desc    owner  owner";
	align-items: center;
	column-gap: 10px;
	width: 100%;
	padding: 0.85rem var(--gutter) 0.55rem;
	margin-bottom: 0;
}

div#cgit #header .theme-toggle {
	grid-area: theme;
	justify-self: end;
	align-self: center;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--control-h);
	height: var(--control-h);
	padding: 0;
	color: var(--muted);
	background-color: var(--surface);
	border: solid 1px var(--border);
	border-radius: var(--radius);
	cursor: pointer;
	line-height: 1;
}

/* Keep the button hidden until the script reveals it, since the display
 * rule above would otherwise override the hidden attribute. */
div#cgit #header .theme-toggle[hidden] {
	display: none;
}

div#cgit #header .theme-toggle:hover {
	color: var(--fg);
	border-color: var(--border-mid);
}

div#cgit #header .theme-toggle svg {
	width: 1.1em;
	height: 1.1em;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The toggle starts hidden and is revealed once the script has run, so its
 * column is reserved up front to keep the header from jumping. Only when
 * scripting is on, otherwise the space would sit empty forever. */
html.cgit-js div#cgit #header {
	grid-template-columns: auto 1fr auto var(--control-h);
}

/* Reserve the logo's box so the header does not grow when the image
 * arrives. The height matches the shipped 192x128 logo capped to 96px. */
div#cgit #header .logo {
	grid-area: logo;
	align-self: start;
	min-width: 96px;
	min-height: 64px;
}

div#cgit #header .logo img {
	display: block;
	max-width: 96px;
}

div#cgit #header h1.main {
	grid-area: heading;
	margin: 0;
	font-size: 250%;
	font-weight: normal;
	white-space: nowrap;
}

div#cgit #header h1.main a {
	color: var(--fg);
}

div#cgit #header .branch-switch {
	grid-area: switch;
	justify-self: end;
	align-self: center;
}

div#cgit #header .branch-switch select {
	max-width: 40vw;
}

div#cgit #header .sub {
	grid-area: desc;
	margin: 0;
	color: var(--muted);
	overflow-wrap: anywhere;
}

/* The rule under the masthead. A grid pseudo item rather than a border
 * on the description, so it runs from the title through under the
 * branch switcher and theme toggle to the right edge. */
div#cgit #header::before {
	content: "";
	grid-column: 2 / -1;
	grid-row: 2;
	align-self: start;
	height: 0;
	border-top: solid 1px var(--border);
}

div#cgit #header .owner {
	grid-area: owner;
	justify-self: end;
	text-align: right;
}

/* Tab bar */

div#cgit .tabs {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.15em 0.75em;
	border-bottom: solid 2px var(--border);
	padding: 0 var(--gutter);
	margin-top: 0.5rem;
}

div#cgit .tabs ul {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	flex: 1 1 auto;
	gap: 0.1em 0.15em;
	list-style: none;
	margin: 0;
	padding: 0;
}

div#cgit .tabs li {
	margin: 0;
}

div#cgit .tabs a {
	display: inline-block;
	padding: 0.3em 0.7em;
	color: var(--muted);
	border-radius: var(--radius) var(--radius) 0 0;
}

div#cgit .tabs a:hover {
	color: var(--fg);
	background-color: var(--surface);
	text-decoration: none;
}

div#cgit .tabs a.active {
	color: var(--fg);
	background-color: var(--tab-active-bg);
}

/* Outbound-link marker on tabs that leave the site. Drawn through a
 * mask filled with currentColor, so it follows the tab's text colour
 * in both themes instead of staying a fixed-colour image. */
div#cgit .tabs a.external:after {
	content: "";
	display: inline-block;
	width: 0.7em;
	height: 0.7em;
	margin-left: 5px;
	vertical-align: -0.02em;
	background-color: currentColor;
	opacity: 0.6;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 5h5v5M19 5l-8 8M19 14v4a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

div#cgit .tabs .search {
	padding-bottom: 2px;
	white-space: nowrap;
}

div#cgit input.txt {
	max-width: 12em;
}

/* Page frame */

div#cgit .path {
	margin: 0px;
	padding: 0.45rem var(--gutter);
	color: var(--fg);
	background-color: var(--surface);
	overflow-wrap: anywhere;
}

div#cgit .content {
	margin: 0px;
	padding: 1.25rem var(--gutter);
	border-bottom: solid 1px var(--border);
	overflow-x: auto;
}

/* Listing tables */

div#cgit table.list {
	width: 100%;
	border: none;
	border-collapse: collapse;
}

div#cgit table.list tr {
	background: var(--bg);
}

div#cgit table.list tr.logheader {
	background: var(--surface);
}

div#cgit table.list tr:nth-child(even) {
	background: var(--surface-2);
}

div#cgit table.list tr:nth-child(odd) {
	background: var(--bg);
}

div#cgit table.list tr:hover {
	background: var(--row-hover);
}

div#cgit table.list tr.nohover {
	background: var(--bg);
}

div#cgit table.list tr.nohover:hover {
	background: var(--bg);
}

div#cgit table.list tr.nohover-highlight:hover:nth-child(even) {
	background: var(--surface-2);
}

div#cgit table.list tr.nohover-highlight:hover:nth-child(odd) {
	background: var(--bg);
}

div#cgit table.list th {
	font-weight: bold;
	padding: 0.35em 0.6em 0.3em 0.6em;
	vertical-align: baseline;
}

div#cgit table.list td {
	border: none;
	padding: 0.3em 0.6em 0.3em 0.6em;
}

div#cgit table.list td.commitgraph {
	font-family: var(--font-mono);
	white-space: pre;
}

div#cgit table.list td.commitgraph .column1 { color: var(--col1); }
div#cgit table.list td.commitgraph .column2 { color: var(--col2); }
div#cgit table.list td.commitgraph .column3 { color: var(--col3); }
div#cgit table.list td.commitgraph .column4 { color: var(--col4); }
div#cgit table.list td.commitgraph .column5 { color: var(--col5); }
div#cgit table.list td.commitgraph .column6 { color: var(--col6); }

div#cgit table.list td.logsubject {
	font-weight: bold;
}

div#cgit table.list td.logmsg {
	font-family: var(--font-mono);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	padding: 0 0.5em;
}

div#cgit table.list td a {
	color: var(--fg);
}

div#cgit table.list td a.ls-dir {
	font-weight: bold;
	color: var(--link);
}

div#cgit table.list td a:hover {
	color: var(--link);
}

/* Repository index */

div#cgit div#summary {
	vertical-align: top;
	margin-bottom: 1em;
}

div#cgit div#summary img,
div#cgit div#summary video {
	max-width: 100%;
}

div#cgit div#summary pre {
	overflow-x: auto;
}

/* A plaintext readme served without an about filter. Wrapped instead of
 * scrolled, since prose is the common case. */
div#cgit pre.plaintext {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: var(--font-mono);
	line-height: 1.5;
	margin: 0;
}

div#cgit .markdown {
	line-height: 1.6;
	overflow-wrap: break-word;
}

div#cgit .markdown > :first-child {
	margin-top: 0;
}

div#cgit .markdown > :last-child {
	margin-bottom: 0;
}

div#cgit .markdown h1,
div#cgit .markdown h2,
div#cgit .markdown h3,
div#cgit .markdown h4,
div#cgit .markdown h5,
div#cgit .markdown h6 {
	margin: 1.2em 0 0.5em;
	font-weight: bold;
	line-height: 1.25;
}

div#cgit .markdown h1 { font-size: 1.6em; }
div#cgit .markdown h2 {
	font-size: 1.35em;
	border-bottom: 1px solid var(--border);
	padding-bottom: 0.2em;
}
div#cgit .markdown h3 { font-size: 1.15em; }
div#cgit .markdown h4 { font-size: 1em; }
div#cgit .markdown h5,
div#cgit .markdown h6 { font-size: 0.9em; color: var(--muted); }

div#cgit .markdown p { margin: 0.7em 0; }
div#cgit .markdown a { color: var(--link); }

div#cgit .markdown ul,
div#cgit .markdown ol { margin: 0.7em 0; padding-left: 2em; }
div#cgit .markdown li { margin: 0.2em 0; }

div#cgit .markdown blockquote {
	margin: 0.7em 0;
	padding: 0.1em 1em;
	color: var(--muted);
	border-left: 3px solid var(--border-mid);
}

div#cgit .markdown hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 1.2em 0;
}

div#cgit .markdown code {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-s);
	padding: 0.1em 0.35em;
	font-size: 0.95em;
}

div#cgit .markdown pre {
	background: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 0.7em 0.9em;
	overflow-x: auto;
}

div#cgit .markdown pre code {
	background: none;
	border: none;
	padding: 0;
}

div#cgit .markdown table {
	border-collapse: collapse;
	margin: 0.7em 0;
}

div#cgit .markdown th,
div#cgit .markdown td {
	border: 1px solid var(--border);
	padding: 0.35em 0.7em;
}

div#cgit .markdown th { background: var(--surface-2); }

div#cgit div#blob {
	border: solid 1px var(--border-strong);
}

div#cgit div.error {
	color: var(--accent);
	font-weight: bold;
	margin: 1em 2em;
}

div#cgit table.list td.reposection {
	font-style: italic;
	color: var(--faint);
}

div#cgit table.list td.sublevel-repo {
	padding-left: 1.5em;
}

/* Directory / blob listings */

div#cgit a.ls-blob, div#cgit a.ls-dir, div#cgit .ls-mod {
	font-family: var(--font-mono);
}

div#cgit td.ls-size {
	text-align: right;
	font-family: var(--font-mono);
	width: 10em;
}

div#cgit td.ls-mode {
	font-family: var(--font-mono);
	width: 10em;
}

/* Source blob */

div#cgit table.blob {
	margin-top: 0.5em;
	border-top: solid 1px var(--border-strong);
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

div#cgit table.blob td.hashes,
div#cgit table.blob td.lines {
	margin: 0; padding: 0 0 0 0.5em;
	vertical-align: top;
	color: var(--fg);
}

div#cgit table.blob td.linenumbers {
	margin: 0; padding: 0 0.5em 0 0.5em;
	vertical-align: top;
	text-align: right;
	border-right: 1px solid var(--border-mid);
}

div#cgit table.blob pre {
	padding: 0; margin: 0;
	font-family: var(--font-mono);
}

div#cgit table.blob td.linenumbers a,
div#cgit table.ssdiff td.lineno a {
	color: var(--muted);
	text-align: right;
	text-decoration: none;
}

div#cgit table.blob td.linenumbers a:hover,
div#cgit table.ssdiff td.lineno a:hover {
	color: var(--fg);
}

/* Land a fragment-targeted line mid-viewport rather than at the top. */
div#cgit table.blob td.linenumbers a,
div#cgit table.blame td.linenumbers a {
	scroll-margin-top: calc(50vh - 1em);
}

/* No-JS fallback tints the targeted number itself; cgit.js widens the
 * highlight into the full-width bar below. */
div#cgit table.blob td.linenumbers a:target,
div#cgit table.blame td.linenumbers a:target {
	background: var(--line-hl);
	color: var(--fg);
}

/* Anchor box for the highlight bar cgit.js positions over the target. */
div#cgit table.blob,
div#cgit table.blame {
	position: relative;
}

div#cgit div.line-hl {
	position: absolute;
	left: 0;
	right: 0;
	background: var(--line-hl);
	pointer-events: none;
}

/* Tokens produced by the syntax-highlight.lua source filter. */
div#cgit .hl-comment { color: light-dark(#6a737d, #8b949e); font-style: italic; }
div#cgit .hl-keyword { color: light-dark(#cf222e, #ff7b72); }
div#cgit .hl-string  { color: light-dark(#0a7d24, #7ee787); }
div#cgit .hl-number  { color: light-dark(#0550ae, #79c0ff); }
div#cgit .hl-type    { color: light-dark(#953800, #ffa657); }
div#cgit .hl-func    { color: light-dark(#6639ba, #d2a8ff); }

/* Blame */

div#cgit table.blame {
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

div#cgit table.blame td.hashes,
div#cgit table.blame td.lines,
div#cgit table.blame td.linenumbers {
	padding: 0;
}

div#cgit table.blame td.hashes div.alt,
div#cgit table.blame td.lines div.alt {
	padding: 0 0.5em 0 0.5em;
}

div#cgit table.blame td.linenumbers div.alt {
	padding: 0 0.5em 0 0;
}

div#cgit table.blame div.alt:nth-child(even) {
	background: var(--surface);
}

div#cgit table.blame div.alt:nth-child(odd) {
	background: var(--bg);
}

div#cgit table.blame td.lines > div {
	position: relative;
}

div#cgit table.blame td.lines > div > pre {
	padding: 0 0 0 0.5em;
	position: absolute;
	top: 0;
	font-family: var(--font-mono);
}

div#cgit table.blame .oid {
	font-size: 100%;
}

/* Binary blob */

div#cgit table.bin-blob {
	margin-top: 0.5em;
	border: solid 1px var(--border-strong);
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

div#cgit table.bin-blob th {
	font-family: var(--font-mono);
	white-space: pre;
	border: solid 1px var(--border-mid);
	padding: 0.5em 1em;
}

div#cgit table.bin-blob td {
	font-family: var(--font-mono);
	white-space: pre;
	border-left: solid 1px var(--border-mid);
	padding: 0em 1em;
}

/* Commit / tag */

div#cgit table.nowrap td {
	white-space: nowrap;
}

div#cgit table.commit-info {
	border-collapse: collapse;
	margin-top: 1.5em;
}

div#cgit div.cgit-panel {
	float: right;
	margin-top: 1.5em;
}

div#cgit div.cgit-panel table {
	border-collapse: collapse;
	border: solid 1px var(--border-mid);
	background-color: var(--surface);
}

div#cgit div.cgit-panel th {
	text-align: center;
}

div#cgit div.cgit-panel td {
	padding: 0.25em 0.5em;
}

div#cgit div.cgit-panel td.label {
	padding-right: 0.5em;
}

div#cgit div.cgit-panel td.ctrl {
	padding-left: 0.5em;
}

div#cgit table.commit-info th {
	text-align: left;
	font-weight: normal;
	padding: 0.1em 1em 0.1em 0.1em;
	vertical-align: top;
}

div#cgit table.commit-info td {
	font-weight: normal;
	padding: 0.1em 1em 0.1em 0.1em;
	overflow-wrap: anywhere;
}

div#cgit div.commit-subject {
	font-weight: bold;
	font-size: 125%;
	margin: 1.5em 0em 0.5em 0em;
	padding: 0em;
	overflow-wrap: anywhere;
}

div#cgit div.commit-msg {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: var(--font-mono);
}

div#cgit div.notes-header {
	font-weight: bold;
	padding-top: 1.5em;
}

div#cgit div.notes {
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-family: var(--font-mono);
	border: solid 1px var(--notes-border);
	background-color: var(--notes-bg);
	padding: 0.3em 2em 0.3em 1em;
	float: left;
}

div#cgit div.notes-footer {
	clear: left;
}

/* Diffstat */

div#cgit div.diffstat-header {
	font-weight: bold;
	padding-top: 1.5em;
}

div#cgit table.diffstat {
	border-collapse: collapse;
	border: solid 1px var(--border-mid);
	background-color: var(--surface);
	max-width: 100%;
}

div#cgit table.diffstat th {
	font-weight: normal;
	text-align: left;
	text-decoration: underline;
	padding: 0.1em 1em 0.1em 0.1em;
}

div#cgit table.diffstat td {
	padding: 0.2em 0.2em 0.1em 0.1em;
	border: none;
}

div#cgit table.diffstat td.mode {
	white-space: nowrap;
}

div#cgit table.diffstat td span.modechange {
	padding-left: 1em;
	color: var(--del);
}

div#cgit table.diffstat td.add a {
	color: var(--add);
}

div#cgit table.diffstat td.del a {
	color: var(--del);
}

div#cgit table.diffstat td.upd a {
	color: var(--upd);
}

div#cgit table.diffstat td.graph {
	width: 500px;
	max-width: 40vw;
	vertical-align: middle;
}

div#cgit table.diffstat td.graph table {
	border: none;
	width: 100%;
}

div#cgit table.diffstat td.graph td {
	padding: 0px;
	border: 0px;
	height: 7pt;
}

div#cgit table.diffstat td.graph td.add {
	background-color: var(--graph-add);
}

div#cgit table.diffstat td.graph td.rem {
	background-color: var(--graph-rem);
}

div#cgit div.diffstat-summary {
	color: var(--faint);
	padding-top: 0.5em;
}

/* Unified diff */

div#cgit table.diff {
	width: 100%;
}

div#cgit table.diff td {
	font-family: var(--font-mono);
	white-space: pre;
}

div#cgit table.diff td div.head {
	font-weight: bold;
	margin-top: 1em;
	color: var(--fg);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

div#cgit table.diff td div.hunk {
	color: var(--hunk);
}

div#cgit table.diff td div.add {
	color: var(--add);
}

div#cgit table.diff td div.del {
	color: var(--del);
}

/* Notice shown in place of a diff that exceeds max-diff-lines or
 * max-diff-files, pointing at the page that renders it in full. */
div#cgit div.truncated,
div#cgit table.ssdiff td.truncated {
	color: var(--muted);
	font-family: var(--font-sans);
	white-space: normal;
	padding: 0.4em 0;
}

div#cgit .oid {
	font-family: var(--font-mono);
	font-size: 90%;
	overflow-wrap: anywhere;
}

div#cgit .left {
	text-align: left;
}

div#cgit .right {
	text-align: right;
}

/* Buttons / pager */

div#cgit a.button {
	font-size: 90%;
	padding: 0em 0.5em;
}

div#cgit ul.pager {
	list-style-type: none;
	text-align: center;
	margin: 1em 0em 0em 0em;
	padding: 0;
}

div#cgit ul.pager li {
	display: inline-block;
	margin: 0.25em 0.5em;
}

div#cgit ul.pager a {
	color: var(--muted);
}

div#cgit ul.pager .current {
	font-weight: bold;
}

/* Ages / line counts */

div#cgit span.age-mins,
div#cgit span.age-hours,
div#cgit span.age-days,
div#cgit span.age-weeks,
div#cgit span.age-months,
div#cgit span.age-years {
	white-space: nowrap;
}

div#cgit span.age-mins {
	font-weight: bold;
	color: var(--age-mins);
}

div#cgit span.age-hours {
	color: var(--age-hours);
}

div#cgit span.age-days {
	color: var(--age-days);
}

div#cgit span.age-weeks {
	color: var(--age-weeks);
}

div#cgit span.age-months {
	color: var(--age-months);
}

div#cgit span.age-years {
	color: var(--age-years);
}

div#cgit span.insertions {
	color: var(--add);
}

div#cgit span.deletions {
	color: var(--del);
}

/* Footer */

div#cgit .footer {
	padding: 0.85rem var(--gutter);
	text-align: center;
	font-size: 85%;
	color: var(--footer-fg);
}

div#cgit .footer a {
	color: var(--footer-fg);
	text-decoration: none;
}

div#cgit .footer a:hover {
	text-decoration: underline;
}

/* Ref decorations */

div#cgit a.branch-deco,
div#cgit a.tag-deco,
div#cgit a.tag-annotated-deco,
div#cgit a.remote-deco,
div#cgit a.deco {
	white-space: nowrap;
}

div#cgit a.branch-deco {
	color: var(--deco-fg);
	margin: 0px 0.5em;
	padding: 0px 0.25em;
	background-color: var(--branch-bg);
	border: solid 1px var(--branch-bd);
	border-radius: var(--radius-xs);
}

div#cgit a.tag-deco {
	color: var(--deco-fg);
	margin: 0px 0.5em;
	padding: 0px 0.25em;
	background-color: var(--tag-bg);
	border: solid 1px var(--tag-bd);
	border-radius: var(--radius-xs);
}

div#cgit a.tag-annotated-deco {
	color: var(--deco-fg);
	margin: 0px 0.5em;
	padding: 0px 0.25em;
	background-color: var(--tag-ann-bg);
	border: solid 1px var(--tag-ann-bd);
	border-radius: var(--radius-xs);
}

div#cgit a.remote-deco {
	color: var(--deco-fg);
	margin: 0px 0.5em;
	padding: 0px 0.25em;
	background-color: var(--remote-bg);
	border: solid 1px var(--remote-bd);
	border-radius: var(--radius-xs);
}

div#cgit a.deco {
	color: var(--deco-fg);
	margin: 0px 0.5em;
	padding: 0px 0.25em;
	background-color: var(--head-bg);
	border: solid 1px var(--head-bd);
	border-radius: var(--radius-xs);
}

div#cgit div.commit-subject a.branch-deco,
div#cgit div.commit-subject a.tag-deco,
div#cgit div.commit-subject a.tag-annotated-deco,
div#cgit div.commit-subject a.remote-deco,
div#cgit div.commit-subject a.deco {
	margin-left: 1em;
	font-size: 80%;
}

/* Statistics */

div#cgit table.stats {
	border: solid 1px var(--border-strong);
	border-collapse: collapse;
	display: block;
	width: max-content;
	max-width: 100%;
	overflow-x: auto;
}

div#cgit table.stats th {
	text-align: left;
	padding: 1px 0.5em;
	background-color: var(--surface);
	border: solid 1px var(--border-strong);
}

div#cgit table.stats td {
	text-align: right;
	padding: 1px 0.5em;
	border: solid 1px var(--border-strong);
}

div#cgit table.stats td.total {
	font-weight: bold;
	text-align: left;
}

div#cgit table.stats td.sum {
	color: var(--accent);
	font-weight: bold;
}

div#cgit table.stats td.left {
	text-align: left;
}

/* Side-by-side diff */

div#cgit table.ssdiff {
	width: 100%;
}

div#cgit table.ssdiff td {
	font-size: 85%;
	font-family: var(--font-mono);
	white-space: pre;
	padding: 1px 4px 1px 4px;
	border-left: solid 1px var(--border-mid);
	border-right: solid 1px var(--border-mid);
}

div#cgit table.ssdiff td.add {
	color: var(--fg);
	background: var(--ss-add-bg);
	min-width: 50%;
}

div#cgit table.ssdiff td.add_dark {
	color: var(--fg);
	background: var(--ss-add-bg2);
	min-width: 50%;
}

div#cgit table.ssdiff span.add {
	background: var(--ss-add-bg);
	font-weight: bold;
}

div#cgit table.ssdiff td.del {
	color: var(--fg);
	background: var(--ss-del-bg);
	min-width: 50%;
}

div#cgit table.ssdiff td.del_dark {
	color: var(--fg);
	background: var(--ss-del-bg2);
	min-width: 50%;
}

div#cgit table.ssdiff span.del {
	background: var(--ss-del-bg);
	font-weight: bold;
}

div#cgit table.ssdiff td.changed {
	color: var(--fg);
	background: var(--ss-chg-bg);
	min-width: 50%;
}

div#cgit table.ssdiff td.changed_dark {
	color: var(--fg);
	background: var(--ss-chg-bg2);
	min-width: 50%;
}

div#cgit table.ssdiff td.lineno {
	color: var(--fg);
	background: var(--ss-lineno-bg);
	text-align: right;
	width: 3em;
	min-width: 3em;
}

div#cgit table.ssdiff td.hunk {
	color: var(--fg);
	background: var(--ss-hunk-bg);
	border-top: solid 1px var(--border-mid);
	border-bottom: solid 1px var(--border-mid);
}

div#cgit table.ssdiff td.head {
	border-top: solid 1px var(--border-mid);
	border-bottom: solid 1px var(--border-mid);
}

div#cgit table.ssdiff td.head div.head {
	font-weight: bold;
	color: var(--fg);
}

div#cgit table.ssdiff td.foot {
	border-top: solid 1px var(--border-mid);
	border-left: none;
	border-right: none;
	border-bottom: none;
}

div#cgit table.ssdiff td.space {
	border: none;
}

div#cgit table.ssdiff td.space div {
	min-height: 3em;
}

/* Three tiers around the default layout. Wide screens get a roomier
 * gutter and a slightly larger base size, phones trade chrome for
 * content, and the smallest phones tighten the masthead further. */

@media (min-width: 1440px) {
	div#cgit {
		--gutter: 2rem;
		font-size: 14px;
	}
}

@media (max-width: 640px) {
	div#cgit {
		--gutter: 0.85rem;
		/* Grow the controls into comfortable tap targets on a touch
		 * screen; the toggle, selects, inputs and buttons all track this. */
		--control-h: 2.5em;
	}
	/* Keep the index to name and age on a phone; the description, owner
	 * and the summary/log/tree shortcuts drop away since tapping the
	 * name already opens the repository. Auto layout is deliberate: with
	 * table-layout fixed the hidden columns still reserve equal width and
	 * squeeze the name, so we let the name take all the slack and the age
	 * hug its own text instead. */
	div#cgit .col-desc,
	div#cgit .col-owner,
	div#cgit .col-links {
		display: none;
	}
	/* Ref and log listings drop the author and file/line-count columns
	 * on a phone, since the subject and age carry the story and long
	 * author names otherwise wrap every row onto two lines. */
	div#cgit table.list th.col-author,
	div#cgit table.list td.col-author,
	div#cgit table.list th.col-count,
	div#cgit table.list td.col-count {
		display: none;
	}
	/* Keep any remaining long token from forcing a sideways page. */
	div#cgit table.list td {
		overflow-wrap: anywhere;
	}
	div#cgit table.repolist {
		width: 100%;
	}
	div#cgit table.repolist th.col-name,
	div#cgit table.repolist td.col-name {
		width: 100%;
		overflow-wrap: anywhere;
	}
	div#cgit table.repolist th.col-idle,
	div#cgit table.repolist td.col-idle {
		width: 1%;
		white-space: nowrap;
		text-align: right;
	}
	/* Give the tabs a finger-sized target while keeping them tight enough
	 * to wrap onto as few rows as possible. */
	div#cgit .tabs a {
		padding: 0.55em 0.7em;
	}
	/* No search on a phone. Typing queries there is nobody's real
	 * workflow and the q= url form keeps working regardless. */
	div#cgit .tabs .search {
		display: none;
	}
	/* Stack the masthead: logo, title and toggle across the top, then
	 * the description and owner on their own full rows. */
	div#cgit #header {
		grid-template-columns: auto 1fr auto;
		grid-template-areas:
			"logo heading theme"
			"desc desc    desc"
			"owner owner  owner";
		column-gap: 8px;
		row-gap: 6px;
	}
	div#cgit #header .logo {
		min-width: 56px;
		min-height: 37px;
	}
	div#cgit #header .logo img {
		max-width: 56px;
	}
	/* On the stacked mobile masthead the rule spans the full width. */
	div#cgit #header::before {
		grid-column: 1 / -1;
	}
	div#cgit #header h1.main {
		white-space: normal;
		overflow-wrap: anywhere;
		min-width: 0;
		font-size: 190%;
	}
	div#cgit #header .owner {
		justify-self: start;
		text-align: left;
	}
	/* No branch switcher on a phone. The refs page switches branches
	 * with less chrome, and every page link carries h= along. */
	div#cgit #header .branch-switch {
		display: none;
	}
	/* Unfloat the side panels so they stack full width instead of
	 * squeezing the content into a sliver beside them. */
	div#cgit div.cgit-panel,
	div#cgit div.notes {
		float: none;
		margin-left: 0;
	}
	div#cgit div.cgit-panel {
		margin: 1em 0;
	}
	div#cgit table.commit-info {
		width: 100%;
	}
	div#cgit table.nowrap td {
		white-space: normal;
	}
}

@media (max-width: 380px) {
	/* Reclaim width on the smallest phones by shrinking the logo and the
	 * title further so the masthead does not crowd out the content. */
	div#cgit #header .logo {
		min-width: 44px;
	}
	div#cgit #header .logo img {
		max-width: 44px;
	}
	div#cgit #header h1.main {
		font-size: 160%;
	}
	div#cgit .tabs a {
		padding: 0.55em 0.55em;
	}
}