* {box-sizing: border-box;}

html {
	font-family: "PT Sans", Verdana, Helvetica, Arial, sans-serif;
	font-size: 16px;
	
	/* Fix odd text-size in `display: flex` elements on Safari iOS */
	text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	
	line-height: 1.5;
}

@media (min-width: 40em) {
	html {
		font-size: 18px;
		--tab-size: 4;
	}
	
	main > pre {
		margin: 2rem;
	}
}

@media (min-width: 80em) {
	html {
		font-size: 20px;
	}
}

p code {
	padding: 0 0.2rem;
}

p code:first-child, p code:last-child {
	padding: 0;
}

pre {
	/* -moz-tab-size is still required by Firefox */
	--tab-size: 2;
	tab-size: var(--tab-size);
	-moz-tab-size: var(--tab-size);
}

html {
	--main-color: #111;
	--main-background-color: #fff;
	
	--header-color: #dfebff;
	--underlay-color: #ddd;
	
	--accent-color: #1a73e8;
	--accent-hover-color: #33a3ff;
	
	--overlay-color: rgba(255, 255, 255, 0.9);
	--underlay-color: rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
	html {
		--main-color: #e1e1e1;
		--main-background-color: #111;
		
		--header-color: #222;
		--overlay-color: #333;
		
		--accent-color: #01b9ff;
		--accent-hover-color: #80dcff;
		
		--overlay-color: rgba(0, 0, 0, 0.8);
		--underlay-color: rgba(255, 255, 255, 0.9);
		
		background-color: black;
	}
}

html {
	color: var(--main-color);
	background-color: var(--main-background-color);
}

body {
	margin: 0;
	padding: 0;
}

header {
	background-color: var(--header-color);
	border-bottom: 0.2rem solid var(--accent-color);
}

pagefind-modal-trigger,
pagefind-modal {
	--pf-text: var(--main-color);
	--pf-text-secondary: var(--main-color);
	--pf-text-muted: var(--main-color);
	--pf-background: var(--main-background-color);
	--pf-border: var(--underlay-color);
	--pf-border-focus: var(--accent-color);
	--pf-skeleton: var(--header-color);
	--pf-skeleton-shine: color-mix(in srgb, var(--header-color), white 10%);
	--pf-hover: var(--header-color);
	--pf-mark: var(--accent-color);
	--pf-outline-focus: var(--accent-color);
	--pf-font: inherit;
}

header pagefind-modal-trigger {
	flex: 0 0 auto;
}

header .sections {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.5rem;
}

header .section-links,
header .header-actions {
	display: flex;
	align-items: center;
	gap: 0.125rem;
}

header .section-links {
	min-width: 0;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}

header .section-links::-webkit-scrollbar,
.subnav::-webkit-scrollbar {
	display: none;
}

header .header-actions {
	justify-self: end;
}

header .sections a {
	text-decoration: none;
	color: var(--main-color);
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	white-space: nowrap;
}

header .sections a:hover {
	background-color: var(--overlay-color);
}

header .sections a.active {
	color: var(--accent-color);
	font-weight: bold;
}

header .sections .project-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	font-weight: bold;
}

header .sections .github {
	opacity: 0.7;
}

header .sections .github:hover {
	opacity: 1;
}

header .sections a:focus-visible,
.subnav a:focus-visible {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
}

@media (max-width: 39.99em) {
	header .sections {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 0.25rem;
		padding-bottom: 0;
	}
	
	header .section-links {
		grid-column: 1 / -1;
		grid-row: 2;
		padding: 0.25rem 0 0.375rem;
	}

	header .header-actions {
		grid-column: 2;
		grid-row: 1;
	}
}

.site-navigation {
	background-color: var(--main-background-color);
}

@media (min-width: 64em) {
	html {
		--site-navigation-height: 5.2rem;
		scroll-padding-top: calc(var(--site-navigation-height) + 1rem);
	}
	
	.site-navigation {
		position: sticky;
		top: 0;
		z-index: 10;
	}
}

.subnav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.125rem;
	padding: 0.25rem 0.5rem;
	border-bottom: 1px solid var(--underlay-color);
	font-size: 0.9em;
	overflow-x: auto;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}

.subnav a {
	text-decoration: none;
	color: var(--main-color);
	padding: 0.15rem 0.5rem;
	border-radius: 0.25rem;
	white-space: nowrap;
}

.subnav a:hover {
	background-color: var(--overlay-color);
}

.subnav a.active {
	color: var(--accent-color);
	font-weight: bold;
}

.subnav.breadcrumb a + a::before {
	content: "::";
	margin-left: -0.5rem;
	margin-right: 0.5rem;
	opacity: 0.4;
}

main {
	scroll-margin-top: 2rem;
	
	/* Force the element to contain margins */
	display: flow-root;
	
	margin: 0 auto;
	max-width: 48rem;
}

@media (min-width: 64em) {
	main.with-sidebar {
		display: grid;
		grid-template-columns: 16rem minmax(0, 1fr);
		gap: 1rem;
		align-items: start;

		 /* 48rem content + 16rem sidebar + 1rem gap */
		max-width: 65rem;
	}
	
	main.with-sidebar .content {
		min-width: 0;
		max-width: 48rem;
	}
}

.sidebar {
	display: none; /* Hidden on small screens */
}

@media (min-width: 64em) {
	.sidebar {
		display: block;
		position: sticky;
		top: var(--site-navigation-height);
		max-height: calc(100vh - var(--site-navigation-height));
		max-height: calc(100dvh - var(--site-navigation-height));
		overflow-y: auto;
		
		/* Custom scrollbar styling */
		scrollbar-width: thin;
		scrollbar-color: var(--underlay-color) transparent;
	}
}

/* Sidebar navigation styles */
.sidebar nav {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 1rem;
	position: sticky;
	top: 0;
}

.sidebar nav h2 {
	font-size: 0.9rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
}

.sidebar nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar nav li {
	margin: 0.1rem 0;
}

.sidebar nav li.level-2 {
	padding-left: 0;
}

.sidebar nav li.level-3 {
	padding-left: 1rem;
}

.sidebar nav li.level-4 {
	padding-left: 2rem;
}

.sidebar nav li.level-5 {
	padding-left: 3rem;
}

.sidebar nav li.level-6 {
	padding-left: 4rem;
}

.sidebar nav a {
	padding: 0.4rem 0.75rem;
	font-size: 0.9rem;
	border-left: 3px solid transparent;
	color: var(--main-color);
	text-decoration: none;
	display: block;
	border-radius: 0.25rem;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.sidebar nav a:hover {
	border-left-color: var(--accent-color);
	background-color: var(--header-color);
}

main img {
	max-width: 100%;
}

/* Ensure last section has enough height to be scrollable */
.content section:last-of-type {
	min-height: 100vh;
}

section {
	padding: 1rem 0;
}

main > section {
	margin: 4rem 0;
}

section > section {
	margin: 1rem 0;
}

footer {
	text-align: right;
	font-size: 0.8rem;
	
	padding: 1rem;
	margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6, p, pre, ul, dl, ol {
	margin: 1rem;
}

div.mermaid {
	margin: 1rem;
	text-align: center;
}

div.giscus {
	margin: 1rem 0;
	padding: 0 1rem;
}

h1 span {
	display: inline-block;
}

header img {
	max-height: 50vh;
}

li, dt, dd {
	margin: 0.5rem 0;
}

details dt, details dd {
	margin: 1rem 0;
}

dl.relationships {
	display: grid;
	grid-template-columns: max-content minmax(0, 1fr);
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin-top: 0.5rem;
}

dl.relationships dt, dl.relationships dd {
	margin: 0;
}

dl.nested-definitions {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
	gap: 1.5rem 2rem;
}

dl.nested-definitions > div {
	min-width: 0;
}

dl.nested-definitions dt, dl.nested-definitions dd,
dl.nested-definitions dd p {
	margin: 0;
}

dl.nested-definitions dt {
	font-size: 1.05em;
}

dl.nested-definitions dt code,
dl.nested-definitions dt syntax-code {
	display: block;
	max-width: 100%;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

dl.nested-definitions dd {
	margin-top: 0.25rem;
}

ul.index {
	padding: 0;
	list-style: none;
}

li ul, li ol {
	margin: 0;
	margin-left: 1rem;
}

img {
	border: none;
}

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

a.self {
	opacity: 0;
	transition: opacity 0.15s;
}

*:hover > a.self,
*:focus-within > a.self {
	opacity: 1;
}

@media (hover: none) {
	a.self {
		opacity: 0.5;
	}
}

a:hover {
	color: var(--accent-hover-color);
}

pre {
	overflow: auto;
}

details {
	margin: 1rem;
	border: 1px solid #aaa;
	border-radius: 0.5rem;
	
	padding: .5em .5em 0;
}

summary > * {
	margin: 0;
	display: inline-block;
}

summary {
	font-weight: bold;
	margin: -.5rem -.5rem 0;
	padding: .5rem;
	cursor: pointer;
}

details[open] {
	padding: .5rem;
}

details[open] summary {
	border-bottom: 1px solid #aaa;
	/* margin-bottom: .5rem; */
}

figure {
	text-align: center;
	margin: 1rem;
}

figure.youtube-wrapper {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}

figure.youtube-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

table {
	width: 100%;
	margin: 1rem;
	
	border-collapse: collapse;
	width: calc(100% - 2rem);
}

table thead {
	background-color: var(--header-color);
	border-bottom: 0.2rem solid var(--accent-color);
}

table tr:hover {
	background-color: var(--header-color);
}

ul.pragmas {
	margin: 0 1rem;
	padding: 0;
	
	font-size: 80%;
}

ul.pragmas.inline {
	display: inline;
}

ul.pragmas li {
	list-style: none;
	
	border: 1px solid #ccf;
	border-radius: 0.5em;
	
	box-shadow: 0 0 2px #eee;
	padding: 0.1rem 0.2rem;
	
	display: inline-block;
}

ul.pragmas li + li {
	margin-left: 0.5rem;
}

ul.pragmas li.public {
	border-color: #8CFF00;
	box-shadow: 0 0 0.3rem #8CFF00;
	color: #8CFF00;
}

ul.pragmas li.private,
ul.pragmas li.deprecated {
	border-color: #FF8C00;
	box-shadow: 0 0 0.3rem #FF8C00;
	color: #FF8C00;
}

ul.pragmas li.asynchronous {
	border-color: #8C00FF;
	box-shadow: 0 0 0.3rem #8C00FF;
	color: #8C00FF;
}

/* Navigation - Inline styles (boxed display for small screens) */
.inline-nav nav {
	background-color: var(--header-color);
	border-radius: 0.5rem;
	padding: 1rem;
	margin: 1rem;
	border-left: 0.25rem solid var(--accent-color);
}

.inline-nav nav heading {
	margin-top: 0;
	margin-bottom: 0.5rem;
	color: var(--accent-color);
	font-size: 1rem;
	display: block;
	font-weight: 500;
}

.inline-nav nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.inline-nav nav li {
	margin: 0.25rem 0;
}

.inline-nav nav li.level-2 {
	padding-left: 0;
}

.inline-nav nav li.level-3 {
	padding-left: 1rem;
}

.inline-nav nav li.level-4 {
	padding-left: 2rem;
}

.inline-nav nav li.level-5 {
	padding-left: 3rem;
}

.inline-nav nav li.level-6 {
	padding-left: 4rem;
}

.inline-nav nav a {
	color: var(--main-color);
	text-decoration: none;
	display: block;
	padding: 0.25rem 0.5rem;
	border-radius: 0.25rem;
	transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.inline-nav nav a:hover {
	color: var(--accent-hover-color);
	background-color: var(--overlay-color);
	text-decoration: none;
}

/* Sidebar navigation styles */
.sidebar nav,
.sidebar details nav {
	background-color: transparent;
	border: none;
	border-radius: 0;
	padding: 0;
	margin: 1rem;
	position: sticky;
	top: 0;
}

.sidebar nav heading {
	font-size: 0.9rem;
	margin-bottom: 1rem;
	padding-bottom: 0.5rem;
	display: block;
	font-weight: 500;
	color: var(--accent-color);
}

.sidebar nav li,
.sidebar details nav li {
	margin: 0.1rem 0;
}

.sidebar nav li.level-2 {
	padding-left: 0;
}

.sidebar nav li.level-3 {
	padding-left: 1rem;
}

.sidebar nav li.level-4 {
	padding-left: 2rem;
}

.sidebar nav li.level-5 {
	padding-left: 3rem;
}

.sidebar nav li.level-6 {
	padding-left: 4rem;
}

.sidebar nav a,
.sidebar details nav a {
	padding: 0.4rem 0.75rem;
	font-size: 0.9rem;
	border-left: 3px solid transparent;
	color: var(--main-color);
	text-decoration: none;
	display: block;
	border-radius: 0.25rem;
	transition: all 0.2s ease;
}

/* Compact mode for long navigation lists */
.sidebar nav.compact li {
	margin: 0.05rem 0;
}

.sidebar nav.compact a {
	padding: 0.25rem 0.5rem;
	font-size: 0.85rem;
	line-height: 1.3;
}

.sidebar nav.compact heading {
	font-size: 0.8rem;
	margin-bottom: 0.75rem;
}

.sidebar nav.compact li.level-3 {
	padding-left: 0.75rem;
}

.sidebar nav.compact li.level-4 {
	padding-left: 1.5rem;
}

.sidebar nav.compact li.level-5 {
	padding-left: 2.25rem;
}

.sidebar nav.compact li.level-6 {
	padding-left: 3rem;
}

.sidebar nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sidebar nav a:hover {
	border-left-color: var(--accent-color);
	background-color: var(--header-color);
}

/* Subtle focus indicator for keyboard navigation */
.sidebar nav a:focus-visible {
	outline: 2px solid var(--accent-color);
	outline-offset: 2px;
	border-radius: 0.25rem;
}

/* Brief click feedback */
.sidebar nav a:active {
	background-color: var(--accent-hover-color);
	color: white;
}

/* Active section highlighting (set by JavaScript) */
.sidebar nav a.active {
	background-color: var(--header-color);
	color: var(--accent-color);
	border-left-color: var(--accent-color);
	font-weight: bold;
}

/* Guide navigation (previous/next) */
.content nav {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin: 1rem;
	font-size: 0.9rem;
	font-weight: 500;
}

.content nav.top {
	border-bottom: 1px solid var(--underlay-color);
	padding-bottom: 0.5rem;
}

.content nav.bottom {
	border-top: 1px solid var(--underlay-color);
	padding-top: 0.5rem;
}

.content nav .next {
	margin-left: auto;
}

@media (max-width: 768px) {
	.content nav {
		flex-direction: column;
	}
	
	.content nav .next {
		margin-left: 0;
	}
}