/* {1 Fonts} */

@font-face {
  font-family: "Iosevka Web";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("iosevka-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Iosevka Web";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("iosevka-400-italic.woff2") format("woff2");
}

/* {1 Themes}

   light or dark. */

:root, :root[data-theme="light"] {
  --paper: #fdfdfc;
  --ink: #1b1b1a;
  --muted: #6f6a63;
  --rule: #ddd9d2;
  --plate: #f6f5f2;
  --accent: #d1590f;

  --keyword: #8a3fa0;
  --string: #3c6b34;
  --constant: #1a4d8f;
  --type: #0f6060;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121312;
    --ink: #d8d5ce;
    --muted: #8b867e;
    --rule: #2c2d2b;
    --plate: #1a1b1a;
    --accent: #f2823c;

    --keyword: #cb9ce0;
    --string: #a3c987;
    --constant: #8fb3e3;
    --type: #77c6c6;
  }
}

:root[data-theme="dark"] {
  --paper: #121312;
  --ink: #d8d5ce;
  --muted: #8b867e;
  --rule: #6f6a63;
  --plate: #1a1b1a;
  --accent: #f2823c;

  --keyword: #cb9ce0;
  --string: #a3c987;
  --constant: #8fb3e3;
  --type: #77c6c6;
}

:root {
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --mono: "Iosevka Web", "Iosevka", ui-monospace, "SF Mono", "JetBrains Mono",
    Menlo, Consolas, monospace;

  --nav: 20rem;
  --main: 38rem;
  --gap: 2.75rem;
  --cols: 80;
  --pad: 1.25rem;
  --aside: 30rem;

  color-scheme: light dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 var(--gap) 6rem;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  overflow-wrap: break-word;
  display: grid;
  column-gap: var(--gap);
  grid-template-columns:
    [nav] var(--nav)
    [main] minmax(0, var(--main))
    [side] minmax(0, 1fr) [end];
}

a {
  color: inherit;
  text-decoration-color: var(--rule);
  text-underline-offset: 0.15em;
}

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

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* {1 Navigation}  */

#summary {
  grid-column: nav;
  align-self: start;
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 3rem 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
  counter-reset: part;
}

#summary > summary { display: none; }

.book {
  display: block;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
  text-decoration: none;
}

#summary h2 {
  counter-increment: part;
  counter-reset: chapter;
  margin: 1.75rem 0 0.5rem;
  font-size: inherit;
  font-weight: 400;
  color: var(--muted);
  text-transform: lowercase;
}

#summary h2::before {
  content: counter(part) " ";
  color: var(--rule);
}

#summary ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

#summary > nav > ol > li {
  counter-increment: chapter;
  position: relative;
  padding: 0.15rem 0 0.15rem 2.25rem;
}

#summary > nav > ol > li::before {
  content: counter(part) "." counter(chapter);
  position: absolute;
  left: 0;
  color: var(--rule);
}

#summary > nav > ol > li > a { text-decoration: none; }
#summary > nav > ol > li > a:hover { text-decoration: underline; }

#summary > nav > ul.catalog-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

#summary > nav > ul.catalog-nav > li {
  position: relative;
  padding: 0.15rem 0 0.15rem 1.5rem;
}

#summary > nav > ul.catalog-nav > li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--rule);
}

#summary > nav > ul.catalog-nav > li > a { text-decoration: none; }
#summary > nav > ul.catalog-nav > li > a:hover { text-decoration: underline; }

#summary li.current::before { color: var(--accent); }
#summary li.current > a { font-weight: 600; }

#summary li.current ul {
  margin: 0.35rem 0 0.75rem;
  padding: 0 0 0 0.85rem;
  border-left: 1px solid var(--rule);
  list-style: none;
}

#summary li.current ul a {
  display: block;
  padding: 0.1rem 0;
  color: var(--muted);
  text-decoration: none;
}

#summary li.current ul a:hover { color: var(--ink); }

/* {1 Pagefind} */

#search {
  display: block;
  margin: 1.5rem 0 0.5rem;
}

:root {
  --pf-font: var(--mono);
  --pf-background: var(--paper);
  --pf-text: var(--ink);
  --pf-text-secondary: var(--muted);
  --pf-text-muted: var(--muted);
  --pf-border: var(--rule);
  --pf-border-focus: var(--accent);
  --pf-outline-focus: var(--accent);
  --pf-hover: var(--plate);
  --pf-skeleton: var(--plate);
  --pf-mark: var(--accent);
  --pf-border-radius: 0;
  --pf-shadow-sm: none;
  --pf-shadow-md: none;
  --pf-shadow-lg: none;
  --pf-modal-backdrop: rgb(0 0 0 / 0.4);
  --pf-input-font-size: 0.9375rem;
  --pf-result-title-font-size: 0.9375rem;
  --pf-result-excerpt-font-size: 0.875rem;
}

#theme {
  display: block;
  margin-top: 2.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}

#theme:hover { color: var(--accent); }
#theme::before { content: "→ "; color: var(--rule); }
#theme::after { content: "dark"; }

@media (prefers-color-scheme: dark) {
  #theme::after { content: "light"; }
}

:root[data-theme="light"] #theme::after { content: "dark"; }
:root[data-theme="dark"] #theme::after { content: "light"; }

/* {2 Body} */

main {
  grid-column: main / end;
  display: grid;
  grid-template-columns: subgrid;
  align-content: start;
  padding: 3rem 0;
  min-width: 0;
}

main > * {
  grid-column: main;
  margin: 0 0 1.25rem;
  min-width: 0;
}

main > h1,
main > h2,
main > h3,
main > h4 {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.25;
}

main > h1 {
  font-size: 1.875rem;
  margin: 0 0 0.5rem;
}

main > h2 {
  font-size: 1.1875rem;
  margin: 3rem 0 1rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

main > h3 { font-size: 1rem; margin: 2rem 0 0.75rem; }
main > h4 { font-size: 0.9375rem; margin: 1.5rem 0 0.5rem; color: var(--muted); }

.anchor {
  float: left;
  width: 1.25rem;
  margin-left: -1.25rem;
  text-decoration: none;
  color: var(--rule);
  opacity: 0;
}

.anchor::before { content: "#"; }
h1:hover .anchor, h2:hover .anchor, h3:hover .anchor { opacity: 1; }
.anchor:focus-visible { opacity: 1; }

.lede {
  color: var(--muted);
  font-style: italic;
  margin-bottom: 2.5rem;
}

main > ul, main > ol { padding-left: 1.25rem; }
li { margin: 0.25rem 0; }

blockquote {
  margin: 1.5rem 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--rule);
  color: var(--muted);
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 3rem 0;
}

img, svg { max-width: 100%; height: auto; }

table {
  display: block;
  overflow-x: auto;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.875rem;
}

th, td {
  text-align: left;
  padding: 0.35rem 1rem 0.35rem 0;
  border-bottom: 1px solid var(--rule);
}

/* {2 Code} */

code {
  font-family: var(--mono);
  font-size: 0.875em;
}

:not(pre) > code {
  background: var(--plate);
  padding: 0.1em 0.3em;
}

pre {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1rem;
  background: var(--plate);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: 0.875rem;
  line-height: 1.55;
  tab-size: 2;
}

pre > code { font-size: inherit; background: none; padding: 0; }

main > pre {
  grid-column: main / end;
  width: calc(var(--cols) * 1ch + 2rem);
  max-width: 100%;
}

/* {2 Two-column layouts} */

.annotate,
.document {
  grid-column: main / end;
  display: grid;
  column-gap: 2rem;
  margin: 1.75rem 0 2rem;
  font-family: var(--mono);
  font-size: 0.875rem;
}

.annotate {
  grid-template-columns:
    minmax(0, var(--aside))
    minmax(0, calc(var(--cols) * 1ch + var(--pad)));
}

.document {
  grid-template-columns:
    minmax(0, calc(var(--cols) * 1ch + var(--pad)))
    minmax(0, calc(var(--cols) * 1ch + var(--pad)));
}

.row { display: contents; }

.annotate .note,
.annotate .code,
.document .code,
.document .doc {
  min-width: 0;
}

.annotate .note,
.document .doc > p {
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  padding-bottom: 1rem;
}

.annotate .note > *:first-child,
.document .doc > *:first-child { margin-top: 0; }
.annotate .note > *:last-child,
.document .doc > *:last-child { margin-bottom: 0; }
.annotate .code { border-left: 1px solid var(--rule); padding-left: var(--pad); }
.document .doc { border-left: 1px solid var(--rule); padding-left: var(--pad); }
.document .code { padding-right: var(--pad); }

.annotate .code pre,
.document .code pre {
  margin: 0;
  padding: 0 0 1rem;
  background: none;
  width: calc(var(--cols) * 1ch);
  max-width: 100%;
}

.annotate .note pre,
.document .doc pre {
  font-family: var(--mono);
  white-space: pre-wrap;
  overflow-wrap: break-word;
  overflow-x: visible;
}

main > .wide { grid-column: main / end; }

/* {2 Pager} */

.pager {
  grid-column: main / end;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.875rem;
}

.pager a { text-decoration: none; }
.pager a:hover { color: var(--accent); }
.pager .next { margin-left: auto; text-align: right; }

.pager span {
  display: block;
  color: var(--muted);
  font-size: 0.75rem;
  text-transform: lowercase;
}

/* {2 Contents on the home page} */

.contents,
.contents ol {
  list-style: none;
  padding: 0;
  counter-reset: part;
}

.contents > li { counter-increment: part; }

.contents h2 {
  font-family: var(--mono);
  font-size: 1rem;
  font-weight: 600;
  margin: 2.5rem 0 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--rule);
}

.contents h2::before {
  content: counter(part) " ";
  color: var(--rule);
}

.contents ol { counter-reset: chapter; }

.contents ol li {
  counter-increment: chapter;
  padding-left: 2.25rem;
  position: relative;
}

.contents ol li::before {
  content: counter(part) "." counter(chapter);
  position: absolute;
  left: 0;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--rule);
}

.zones {
  margin: 1.25rem 0;
  padding: 0 0 1.25rem;
  border-bottom: 1px solid var(--rule);
  list-style: none;
}

.zones li { padding: 0.15rem 0; }
.zones a { text-decoration: none; }
.zones a:hover { text-decoration: underline; }
.zones li.current > a { color: var(--accent); font-weight: 600; }
.zones li.current > a::before { content: "› "; }

/* {2 Home page} */

main > .landing {
  grid-column: main / end;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin: 2.5rem 0;
}

.tile {
  display: flex;
  flex-direction: column;
  padding: 1.25rem;
  background: var(--plate);
  border: 1px solid var(--rule);
  text-decoration: none;
}

.tile:hover { border-color: var(--accent); }

.tile h2 {
  font-family: var(--mono);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.tile p { margin: 0 0 1rem; font-size: 0.9375rem; }

.tile .go {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--accent);
}

/* {2 Catalogue} */

main > .filter {
  grid-column: main / end;
  width: 100%;
  max-width: calc(var(--cols) * 1ch + 2rem);
  margin: 1rem 0 1.5rem;
  padding: 0.6rem 0.8rem;
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule);
}

main > .filter:focus { outline: none; border-color: var(--accent); }

main > .cards {
  grid-column: main / end;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
  gap: 1rem;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 1rem;
  border: 1px solid var(--rule);
}

.card[hidden] { display: none; }
.card-link { display: block; text-decoration: none; }

.card-head { display: flex; align-items: baseline; gap: 0.6rem; }
.card-name { font-family: var(--mono); font-weight: 600; }
.card-link:hover .card-name { color: var(--accent); }

.card-version {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--muted);
}

.card-desc {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.9375rem;
}

main > .empty {
  grid-column: main / end;
  color: var(--muted);
  font-style: italic;
}

.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.tag {
  font-family: var(--mono);
  font-size: 0.6875rem;
  padding: 0.1rem 0.4rem;
  border: 1px solid var(--rule);
  color: var(--muted);
  text-transform: lowercase;
}

.tag.kind { color: var(--accent); border-color: var(--accent); }

/* {2 Artifact metadata} */

main > .meta {
  grid-column: main / end;
  max-width: calc(var(--cols) * 1ch + 2rem);
  margin: 0 0 2rem;
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.8125rem;
}

.meta > div { display: flex; gap: 1rem; padding: 0.25rem 0; }
.meta dt { width: 8rem; flex: none; color: var(--muted); }
.meta dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.meta .version { color: var(--accent); }

.people { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.person {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
}

.person img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--plate);
}

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

/* {2 Syntax highlighting} */

.hljs-comment,
.hljs-quote { color: var(--muted); font-style: italic; }

.hljs-keyword,
.hljs-literal,
.hljs-selector-tag,
.hljs-built_in { color: var(--keyword); }

.hljs-string,
.hljs-regexp,
.hljs-char.escape_,
.hljs-addition,
.hljs-attribute { color: var(--string); }

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-variable,
.hljs-template-variable { color: var(--constant); }

.hljs-title,
.hljs-name,
.hljs-type,
.hljs-class .hljs-title,
.hljs-attr { color: var(--type); }

.hljs-meta { color: var(--muted); }
.hljs-deletion { color: var(--accent); }
.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }

@media (max-width: 68rem) {
  body {
    padding: 0 1.5rem 4rem;
    grid-template-columns: minmax(0, 1fr);
  }

  #summary {
    grid-column: 1;
    position: static;
    max-height: none;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--rule);
  }

  #summary > summary {
    display: block;
    cursor: pointer;
    font-weight: 600;
  }

  #summary > summary::marker,
  #summary > summary::-webkit-details-marker { content: ""; display: none; }
  #summary > summary::after { content: " ▾"; color: var(--muted); }
  #summary[open] > summary::after { content: " ▴"; }

  #summary > nav { padding-top: 1rem; }
  .book { display: none; }

  main {
    grid-column: 1;
    display: block;
    padding: 2rem 0;
  }

  .annotate,
  .document {
    display: block;
    margin: 1.5rem 0;
  }

  .annotate .code,
  .document .doc,
  .document .code {
    border-left: 0;
    padding-left: 0;
    padding-right: 0;
  }

  .annotate .code pre,
  .document .code pre {
    background: var(--plate);
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
  }

  .annotate .note,
  .document .doc { padding-bottom: 0.5rem; }

  .meta > div { flex-direction: column; gap: 0.15rem; }
  .meta dt { width: auto; }
}