html {
  font-size: var(--font-size-normal);
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-stack-primary);
  line-height: var(--line-height-large);
  background: var(--color-background);
  color: var(--color-text);
  margin: 0 auto;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background-color: var(--color-text-selection);
}

.theme-alternative ::selection {
  background-color: var(--color-text-selection-alternative);
}

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

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

a:active {
  color: var(--color-link-active);
  transition: color 80ms ease;
}

mark {
  background-color: var(--color-text-mark);
}

code,
pre {
  font-family: var(--font-stack-monospace);
  font-size: calc(1em * 0.85);
/*   -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: auto; */

  background: var(--color-background-contrast);
  padding: 0.2em 0.3em;
  border-radius: var(--border-radius);
}

pre {
  padding: var(--spacing-vertical-small) var(--spacing-horizontal-small);
  max-width: 100%;
  overflow-x: auto;
}

math,
math-ml {
  font-family: serif;
  white-space: nowrap;
  /* font-size: 1.15em; */
}

math mi,
math-ml math-i {
  font-style: italic;
}

.link--does-not-exist {
  color: var(--color-text-muted);
  cursor: help;
}

.link--external::after {
  /* content: " ⌅"; */
  content: " ◳";
}


.nav {
  display: grid;
  grid-auto-flow: column dense;
  width: fit-content;
  gap: var(--spacing-horizontal-large);
  align-items: self-end;
}

.nav-item {
  color: var(--color-link-current);
}

.nav-item:hover {
  color: var(--color-link);
}

.nav-item:active {
  color: var(--color-link-active);
}

.nav-item--current {
  color: var(--color-link);
}

.site-header,
.site-footer {
  margin: var(--spacing-vertical-large-4) 0;
  color: var(--color-text-muted);
}

.site-logo {
  height: 1.75em;
  vertical-align: bottom;
  display: inline;
  margin-right: 0.2em;
  filter: invert(0.5) sepia(1) saturate(0.5) hue-rotate(175deg);
}

.wrapper {
  margin: var(--spacing-vertical) auto var(--spacing-vertical-large-4) auto;
  padding: 0 var(--spacing-horizontal);
  max-width: 26em;  /* ≈ 42ch ≈ 61% */
}

.note-navigation {
  gap: var(--grid-gap);
}

.flex {
  display: flex;
}

.flex-horizontal {
  flex-direction: row;
}

.flex-vertical {
  flex-direction: column;
}

.grid {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
  align-self: self-start;
}

.grid-compact {
  gap: var(--grid-gap-small);
}

.grid-large {
  gap: var(--grid-gap-large);
}

.note-preview--transclusion {
  border-radius: var(--border-radius);
  background: var(--color-background-contrast);
  padding: var(--spacing-vertical-small) var(--spacing-horizontal);
}

.note-preview-introduction--transclusion {
  color: var(--color-text-muted);
}

.note-preview-title-link {
  display: block;
}

/* .note-preview--transclusion:hover .note-preview-introduction--transclusion {
  color: var(--color-text-highlight);
} */

/* .note-preview--transclusion:active .note-preview-introduction--transclusion {
  color: var(--color-text-muted-2);
  transition: color 80ms ease;
} */

.note-preview-title {
  font-weight: normal;
  font-size: var(--font-size-normal);
}

.note-preview-introduction {
  font-weight: normal;
  font-size: var(--font-size-small);
}

.note-content {
  font-size: var(--font-size-small);
}

.note-content > * + * {
  margin-top: var(--spacing-vertical-large);
}

.note-content > h1 {
  font-size: var(--font-size-large-3);
  line-height: var(--line-height-normal);
  margin-right: var(--spacing-horizontal-large-3);
  letter-spacing: -0.011em;
  font-weight: normal;
  margin-top: -0.28em;
}

.note-content > h2 {
  font-size: var(--font-size-large);
  font-weight: 400;
  margin-top: var(--spacing-vertical-large-3);
}

.note-content > h2:first-child {
  margin-top: 0;
}

.note-content > h3 {
  font-size: 1em;
  font-weight: 600;
  margin-top: var(--spacing-vertical-large-2);
}

.note-content hr {
  border: 0;
  height: 1px;
  background-color: var(--color-border-muted);
}

.note-content blockquote {
  border-left: 1px solid var(--color-border-muted);
  padding-left: calc(var(--spacing-horizontal-large) - var(--border-width-normal));
}

.note-content blockquote > * + * {
  margin-top: var(--spacing-vertical);
}

.note-content ul,
.note-content ol {
  counter-reset: list;
  padding: 0;
  margin-left: var(--spacing-horizontal-large);
  list-style: none;
}

.note-content li {
  text-indent: calc(var(--spacing-horizontal) * -2);
  margin-top: var(--spacing-vertical-small);
}

.note-content ul > li::before {
  display: inline-block;
  width: var(--spacing-horizontal);
  height: var(--border-width-normal);
  margin-right: var(--spacing-horizontal);
  margin-bottom: var(--spacing-vertical-small-2);
  content: "";
  background: var(--color-text-muted-2);
}
.note-content ol > li::before {
  counter-increment: list;
  display: inline-block;
  width: var(--spacing-horizontal);
  /* height: var(--border-width-normal); */
  margin-right: var(--spacing-horizontal);
  margin-bottom: var(--spacing-vertical-small-2);
  content: counter(list);
  text-indent: 0;
  /* background: var(--color-text-muted-2); */
}

.note-content table {
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  border-collapse: collapse;
  max-width: 100%;
  overflow-x: scroll;
  width: 100%;
  font-size: var(--font-size-small-2);
}

.note-content table th {
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  padding: var(--spacing-vertical-small) var(--spacing-horizontal-small) var(--spacing-vertical-small) var(--spacing-horizontal-small-3);
}

.note-content table td {
  padding: var(--spacing-vertical-small) var(--spacing-horizontal-small) var(--spacing-vertical-small) var(--spacing-horizontal-small-3);
  vertical-align: top;
}

.note-content table tr:not(:first-child) td {
  border-top: 1px solid var(--color-border-muted);
}

.note-metadata {
  font-size: var(--font-size-small-2);
  color: var(--color-text-muted);
}

.note-aside {
  font-size: var(--font-size-small);
}

.footnotes-list {
  font-size: var(--font-size-small);
  padding: 0;
  margin-left: var(--spacing-horizontal-large);
}

.footnotes-list li:not(:first-child) {
  /* text-indent: calc(var(--spacing-horizontal) * -2); */
  margin-top: var(--spacing-vertical-small);
}

.backlink-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.backlink-list > * + * {
  margin-top: var(--spacing-vertical);
}

.graph-mini {
  background: var(--color-background-contrast);
  border-radius: var(--border-radius);
}

#graph-view {
  min-height: 500px;
}

.graph-node-group {
  stroke: var(--color-link);
  stroke-width: 1.5;
}

.graph-node {
  cursor: pointer;
  fill: var(--color-link-inverted);
}

.graph-node--current {
  fill: var(--color-node-current);
  stroke: var(--color-node-current-outline);
}

.graph-node:hover {
  transition: stroke-width 300ms ease, stroke 80ms ease;
  stroke-width: 2;
  stroke: var(--color-link-inverted-background);
}

.graph-node--current:hover {
  stroke: var(--color-node-current-outline);
}

.graph-node:active {
  stroke: var(--color-node-current-outline-hover);
}

.graph-node--current:active {
  stroke: var(--color-node-current-outline-active);
}



.graph-line {
  stroke: var(--color-text-muted-3);
  stroke-opacity: 0.6;
}

.graph-tooltip {
  position: absolute;
  padding: var(--spacing-vertical-small-2) var(--spacing-horizontal-small-2);
  transform: translate(-50%, -100%);
  font-size: var(--font-size-small-2);
  background: var(--color-background-contrast);
  border-radius: var(--border-radius);
  pointer-events: none;
}


input[type=checkbox] {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  border-radius: 3px;
  color: inherit;
  background: var(--color-background-contrast);
  font: inherit;
  width: 0.8em;
  height: 0.8em;
  line-height: 0.7;
  margin: 0;
  margin-right: 0.1em;
  cursor: pointer;
  text-align: center;
  transition: background 100ms;
  vertical-align: baseline;
  position: relative;
  flex-shrink: 0;
}

input[type=checkbox]:active {
  background: var(--color-text-muted-2);
}

input[type=checkbox]::after {
  content: "✶";
  position: absolute;
  color: var(--color-text-muted-3);
  font-size: 0.5em;
  line-height: 1.8em;
  vertical-align: middle;
  height: 100%;
  right: 50%;
  top: 0;
  width: 100%;
  opacity: 0;
  transition: opacity 200ms, right 200ms;
}

input[type=checkbox]:checked:active {
  background: var(--color-text-muted-2);
}

input[type=checkbox]:checked {
  color: var(--color-text);
  background: var(--color-background-contrast);
}

input[type=checkbox]:checked::after {
  opacity: 1;
  right: 0;
}

/* Media queries */

@media (min-width: 32em) {
  body {
    margin: 8vw 0;
  }
}

@media (min-width: 48em) {
}

@media (min-width: 66em) {
  .wrapper {
    max-width: 42em;
  }

  .grid-layout {
    grid-template-areas: "main aside"
                         "main aside";
    grid-template-columns: 2fr 1fr;
    grid-auto-flow: dense;
  }

  .all-notes {
    order: 2;
  }
  .pinned-notes {
    order: 1;
  }
  .recent-notes {
    grid-area: aside;
    order: 3;
  }

  .note-preview-introduction--compact {
    line-height: var(--line-height-large-2);
  }

 /*  .note-footer {
    grid-area: aside;
    align-self: self-start;
    position: sticky;
    top: var(--spacing-vertical-large-4);
  } */
}

@media (min-width: 72em) {
  .grid-large {
    column-gap: var(--grid-gap-large-2);
  }
  .wrapper {
    max-width: 47em;
  }
}

/* @media (min-width: 72em) {
  .grid-layout {
    grid-template-areas: "main footnotes aside";
    grid-template-columns: 2fr 1fr 1fr;
  }

  .pinned-notes {
    grid-area: footnotes;
  }

  .note-navigation {
    grid-area: footnotes;
    align-self: self-start;
    position: sticky;
    top: var(--spacing-vertical-large-4);
  }

  .wrapper {
    max-width: 56em;
  }
}