* {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 {
	padding: 0.5rem;
	
	background-color: var(--header-color);
	border-bottom: 0.2rem solid var(--accent-color);
}

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 1fr;
		gap: 1rem;
		align-items: start;

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

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

@media (min-width: 64em) {
	.sidebar {
		display: block;
		position: sticky;
		top: 2rem;
		max-height: calc(100vh - 4rem);
		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;
	border-bottom: 1px solid var(--underlay-color);
}

.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: all 0.2s ease;
}

.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;
}

pre {
	margin: 2rem 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;
}

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 {
	visibility: hidden;
}

*:hover > a.self {
	visibility: visible;
}

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: all 0.2s ease;
}

.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;
	border-bottom: 1px solid var(--underlay-color);
	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 {
	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;
	transform: scale(0.98);
	transition: transform 0.1s ease;
}

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