body {
	background-color: var(--color-body-bg);
	color: var(--color-text);
	font-family: var(--font-text);
	margin: 0;
	padding: var(--space-4) 0 var(--space-3) 0;
}

hr {
	border: 1px solid var(--color-text);
	opacity: 1;
}

code {
	font-family: var(--font-code);
}

pre code {
	white-space: pre;
	display: block;
}

ul {
	list-style-type: "- ";
	padding-left: var(--space-3);
}

ol {
	padding-left: 1.5em;
}

kbd {
	background-color: var(--color-surface-raised);
	border: var(--border-width-thin) solid var(--color-text);
	box-shadow: 1px 1px var(--color-shadow);
	font-family: var(--font-code);
	padding: 0 var(--space-1);
}

/* Nav */

.nav {
	background-color: var(--color-surface);
	border-bottom: var(--border-width) solid var(--color-text);
	box-shadow: 0 2px var(--color-shadow);
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	padding: var(--space-1) var(--space-2);
}

.nav > *:first-child { margin-right: auto; }
.nav > *:last-child { margin-left: auto; }

.nav h1 {
	font-family: var(--font-code);
	font-size: 1.2em;
	margin: 0;
}

.nav h1 a {
	color: inherit;
	text-decoration: inherit;
}

.nav h1 a:hover { text-decoration: underline; }

.nav button {
	background-color: var(--color-surface);
	border: var(--border-width-thin) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	color: var(--color-text);
	font-family: var(--font-symbols);
	margin: 0 var(--space-1);
	height: 1.5em;
	width: 1.5em;
	padding: 0;
	text-align: center;
	cursor: pointer;
}

.nav button:hover:not(:active):not([disabled]) {
	background-color: var(--color-text);
	color: var(--color-surface);
}

.nav button:active:not([disabled]) {
	box-shadow: 0 0 0 2px var(--color-shadow-active);
}

.nav button[disabled] {
	background-color: var(--color-body-bg);
	border-color: var(--color-text-muted);
	color: var(--color-text-muted);
	cursor: not-allowed;
}

/* Card */

.card {
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	margin: var(--space-4) auto 0 auto;
	max-width: 40em;
	overflow-x: auto;
	padding: var(--space-2);
}

.card > header a {
	color: inherit;
	text-decoration: inherit;
}
.card > header a:hover { text-decoration: underline; }

.card .publish-date {
	color: var(--color-text-muted);
}

.card h2, .card h3 { margin: 0; }

.card p { max-width: 40em; }

.card hr {
	margin-left: calc(-1 * var(--space-2));
	margin-right: calc(-1 * var(--space-2));
}

/* Box / blockquote */

.box, blockquote {
	background-color: var(--color-surface-raised);
	border: var(--border-width) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	margin: var(--space-3) auto;
	padding: var(--space-2);
	width: fit-content;
	max-width: 100%;
	overflow-x: auto;
}

.box:has(> img), blockquote:has(> img) { padding: 0; }
.box > img, blockquote > img {
	display: block;
	margin: 0;
	width: 100%;
}

/* Tables */

.table {
	border-spacing: 0;
	width: 100%;
}
.table th { text-align: left; }
.table th, .table td {
	padding: 0.2em 2px 0.2em calc(var(--space-2) + 2px);
}
.table th:first-child, .table td:first-child { padding-left: 1px; }
.box > .table td { border-top: 1px solid var(--color-text); }

.table-grid { display: grid; }
.table-grid thead, .table-grid thead > tr,
.table-grid tbody, .table-grid tbody > tr { display: contents; }
.table-grid thead > tr > td, .table-grid tbody > tr > td {
	display: flex;
	align-items: center;
}

.table-of-contents td:first-child {
	color: var(--color-text-muted);
	font-family: var(--font-code);
	width: 6em;
}
.table-of-contents td:nth-child(2) {
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.table-of-contents td:nth-child(2):not(.toc-header) {
	padding-left: var(--space-3);
}

/* Buttons */

.btn {
	display: inline-block;
	font-family: var(--font-text);
	font-size: 1em;
	border: var(--border-width-thin) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	padding: var(--space-1) var(--space-2);
	cursor: pointer;
	background-color: var(--color-surface);
	color: var(--color-text);
}
.btn:active:not([disabled]) {
	box-shadow: 0 0 0 2px var(--color-shadow-active);
}
.btn[disabled] {
	background-color: var(--color-body-bg);
	border-color: var(--color-text-muted);
	color: var(--color-text-muted);
	cursor: not-allowed;
	box-shadow: none;
}

.btn-primary {
	background-color: var(--color-text);
	color: var(--color-surface);
}
.btn-primary:hover:not([disabled]) {
	background-color: var(--color-text-muted);
}

.btn-secondary {
	background-color: transparent;
}
.btn-secondary:hover:not([disabled]) {
	background-color: var(--color-surface-raised);
}

.btn-danger {
	background-color: var(--color-accent-danger);
	color: var(--color-surface);
}
.btn-danger:hover:not([disabled]) {
	filter: brightness(0.9);
}

/* Forms */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
	font-family: var(--font-text);
	font-size: 1em;
	background-color: var(--color-surface);
	color: var(--color-text);
	border: var(--border-width-thin) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow);
	padding: var(--space-1) var(--space-2);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--color-shadow-active);
}

input[type="checkbox"],
input[type="radio"] {
	accent-color: var(--color-text);
	width: 1.1em;
	height: 1.1em;
}

/* Alerts */

.alert {
	--alert-accent: var(--color-text);
	background-color: var(--color-surface);
	border: var(--border-width) solid var(--color-text);
	box-shadow: var(--shadow-offset) var(--color-shadow), inset var(--space-1) 0 0 0 var(--alert-accent);
	margin: var(--space-4) auto 0 auto;
	max-width: 40em;
	overflow-x: auto;
	padding: var(--space-2) var(--space-2) var(--space-2) calc(var(--space-2) + var(--space-1));
}

.alert-info { --alert-accent: var(--color-accent-info); }
.alert-success { --alert-accent: var(--color-accent-success); }
.alert-warning { --alert-accent: var(--color-accent-warning); }
.alert-danger { --alert-accent: var(--color-accent-danger); }