/* Let the sidebar scroll past the last entry, so the bottom menu items can sit
   higher than the viewport edge. */
.sidebar-tree {
  padding-bottom: 8rem;
}

/* Card grid for the projects list (docs/about/projects.md). Each list item is
   a card: first link is the project name, second link the source repo. */
.project-grid ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  gap: 0.5rem;
  list-style: none;
  margin: 1rem 0;
  padding: 0;
}

.project-grid li {
  position: relative;
  margin: 0;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border: 1px solid var(--color-background-border);
  border-radius: 0.5rem;
  background: var(--color-background-secondary);
  transition: border-color 0.15s;
}

.project-grid li:hover {
  border-color: var(--color-brand-content);
}

.project-grid li p {
  margin: 0;
  line-height: 1.4;
}

.project-grid li a:first-of-type {
  display: block;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* Source link: GitHub mark in the top-right corner; the text (and the repo
   slug in the title attribute) stays for screen readers and tooltips. */
.project-grid a.sk-src {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 1rem;
  height: 1rem;
  overflow: hidden;
  color: transparent;
  background-color: var(--color-foreground-muted);
  -webkit-mask: var(--sk-github-icon) center / contain no-repeat;
  mask: var(--sk-github-icon) center / contain no-repeat;
}

.project-grid a.sk-src:hover {
  background-color: var(--color-brand-content);
}

.project-grid code.sk-lang,
.project-grid code.sk-tool {
  display: inline-block;
  margin: 0.3rem 0.15rem 0 0;
  padding: 0 0.5em;
  border: 1px solid var(--color-background-border);
  border-radius: 1em;
  background: var(--color-background-primary);
  color: var(--color-foreground-muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.project-grid code.sk-tool {
  border-color: color-mix(in srgb, var(--color-brand-content) 35%, transparent);
  background: color-mix(in srgb, var(--color-brand-content) 8%, transparent);
  color: var(--color-brand-content);
}

:root {
  --sk-github-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z'/%3E%3C/svg%3E");
}