* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;

  gap: 1rem;
  padding: 1rem;

  /* ensure the body covers at least the whole screen */
  min-height: 100vh;

  font-family: sans-serif;
}

body>header {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  padding: 0.25rem;
  gap: 1rem;
}

body>header ul {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
}

body>header ul li {
  display: inline-block;
}

body>header ul li:not(:first-child)::before {
  content: "•";
  padding-right: 0.5rem;
}

body>header hr {
  width: 1px;
  display: block;
  align-self: stretch;
}

body>header search {
  width: 17em;
  display: flex;
  flex-direction: row;
}

body>header search input {
  flex: 1;
}

header>.site-title {
  font-size: 2em;
  font-weight: bold;
}

body>header>.logo-wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
}

body>header>img.logo {
  object-fit: contain;
  height: 2.25em;
}

.panel,
.admonition {
  padding: 0.5rem;
  border: 2px ridge silver;
  background-color: #EEE;
  box-shadow: black 4px 4px 8px;
}

main#page {
  display: grid;

  grid-template-columns: min-content auto;
  grid-template-rows: max-content;

  gap: 1rem;
}

main#page nav {
  align-self: start;
}

main#page>.panel {
  height: 100%;
}

.devlog-date {
  font-size: 0.9em;
}

.devlog-title h3 {
  margin-top: 0;
}

.devlog-archive-title {
  white-space: nowrap;
  margin-bottom: 0.2em;
}

ul.treeview,
ul.devlog-archive {
  padding-left: 1em;
  margin-right: 0.25em;
}

ul.devlog-archive li {
  list-style-type: none;
  white-space: nowrap;
}

ul.treeview li {
  list-style-type: "❓";
  white-space: nowrap;
}

ul.treeview li.folder {
  list-style-type: "📂";
  /* 📁 📂*/
}

ul.treeview li.file {
  list-style-type: "📄";
  /*📃📄📝📰🗎*/
}

ul.treeview li[data-indent="0"] {
  margin-left: 0em;
}

ul.treeview li[data-indent="1"] {
  margin-left: 1em;
}

ul.treeview li[data-indent="2"] {
  margin-left: 2em;
}

ul.treeview li[data-indent="3"] {
  margin-left: 3em;
}

ul.treeview li[data-indent="4"] {
  margin-left: 4em;
}

ul.treeview li[data-indent="5"] {
  margin-left: 5em;
}

ul.treeview li[data-indent="6"] {
  margin-left: 6em;
}

ul.treeview li[data-indent="7"] {
  margin-left: 7em;
}

ul.treeview li[data-indent="8"] {
  margin-left: 8em;
}

ul.treeview li[data-indent="9"] {
  margin-left: 9em;
}

div.flex-spacer {
  flex: 1;
  visibility: hidden;
}

.docs-container h1 {
  border-bottom: 1px dashed;
  margin-bottom: 1em;
}

.docs-container h2 {
  border-bottom: 1px solid;
  margin-top: 1em;
  margin-bottom: 0.5em;
}

.docs-container ul {
  column-width: 15em;
  margin-left: 2em;
}

.docs-container dl {
  display: grid;
  gap: 0.5em;
  grid-template-columns: 100%;
}

.docs-container dl>div {
  padding: 0.5em;
  border: 1px solid #373737;
}

.docs-container dl dd p {
  margin-left: 2rem;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

:not(pre)>code {
  white-space: break-spaces;
  background-color: #d5d5d5;
  padding: .05em .4em .075em;
  margin: 0;
  border-radius: 4px;
}

code {
  font-family: "Source Code Pro", monospace;
  font-size: 90%;
}

code .tok-kw {
  color: blue;
}

code .tok-type {
  color: slateblue;
}

code .tok-name {
  color: purple;
}

* {
  --markup-block-spacing: 0.75em;
  --hdoc-callout-bar-width: 3rem;
  --hdoc-callout-icon-size: 1.5rem;
}

.markup-container {
  overflow-x: auto;
}

.markup-container ul,
.markup-container ol {
  margin-left: 1.5em;
}

/* .markup-container h1~p.hdoc-doc-meta {
  opacity: 50%;
} */

.markup-container header {
  border-bottom: 1px dashed black;
}

.markup-container :is(h2, h3, h4, h5, h6) {
  margin-top: 1em;
}

/* Paragraph */
.markup-container :is(p, ul, ol, table, pre) {
  line-height: 125%;
  margin-block: 0.75em;
}

.markup-container li :is(p, ul, ol, table, pre) {
  margin-block-start: 0;
  margin-block-end: 0;
}

.markup-container pre {
  display: block;
  border: 1px solid gray;
  padding: 0.5em;
  overflow-x: auto;
  font-family: "Source Code Pro", monospace;
  font-size: 1em;
  /* background-color: #d5d5d5; */
}

.markup-container figure {
  text-align: center;
}

.markup-container table {
  border-collapse: collapse;
  min-width: 100%;
}

.markup-container table thead :is(th),
.markup-container table tbody :is(tr, th, td) {
  border: 1px solid gray;
}

.markup-container table :is(th, td) {
  padding: 0.25rem;
}


.markup-container table :is(th, td) p {
  margin-block: 1.25em;
  margin-block-start: 0;
  margin-block-end: 0;
}

.markup-container table th[scope="row"] {
  border-right: 1px solid gray;
  text-align: left;
}

.markup-container table th[scope="rowgroup"] {
  padding-top: 1rem;
  text-align: left;
}

.markup-container table tr:has(th[scope="rowgroup"]) td {
  border-right: 1px solid silver;
}

.markup-container table tr:has(th[scope="rowgroup"]) th {
  border-left: 1px solid silver;
}

.markup-container table thead th,
.markup-container table tbody:nth-child(even) tr:nth-of-type(even),
.markup-container table tbody:nth-child(odd) tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 5%);
}

.markup-container table thead td.top-left {
  visibility: hidden;
}

.markup-container table.grouped tbody:not(:first-of-type) {
  border-top: 2px solid black;
}

.markup-container img {
  max-width: 100%;
}

.markup-container div> :is(h1, h2):first-child a,
.markup-container div>header a {
  color: black;
  text-decoration: none;
}

footer {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

footer hr {
  width: 100%;
}

* {
  --markup-block-spacing: 0.75em;
  --kh-callout-bar-width: 3rem;
  --kh-callout-icon-size: 1.5rem;
}

.admonition.tip {
  --kh-callout-icon: "💡";
  --kh-callout-color: green;
  --kh-callout-bg: #ecfdf5;
}

.admonition.note {
  --kh-callout-icon: "ℹ️";
  --kh-callout-color: cornflowerblue;
  --kh-callout-bg: #eff6ff;
}

.admonition.warning {
  --kh-callout-icon: "⚠️";
  --kh-callout-color: gold;
  --kh-callout-bg: #fffbeb;
}

.admonition.danger {
  --kh-callout-icon: "🛑";
  --kh-callout-color: crimson;
  --kh-callout-bg: #fef2f2;
}

.markup-container .admonition {
  margin-block: 1em;
  position: relative;
}

.markup-container :is(.admonition.tip, .admonition.note, .admonition.warning, .admonition.danger) {
  background-color: var(--kh-callout-bg);
  padding-left: var(--kh-callout-bar-width);
  position: relative;
  min-height: var(--kh-callout-bar-width);

  padding-top: 0.25em;
  padding-bottom: 0.25em;
}


.markup-container :is(.admonition.tip, .admonition.note, .admonition.warning, .admonition.danger)::before {
  display: flex;
  content: var(--kh-callout-icon);
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;

  width: var(--kh-callout-bar-width);
  font-size: var(--kh-callout-icon-size);
  align-items: center;
  justify-content: center;
  border-left: 3px solid var(--kh-callout-color);
}