/* docs.qkvm.com: what the documentation adds to website/site.css. */

.brand small { margin-left: 2px; padding: 2px 8px; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--muted); font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* On a phone the bar holds the name and the switch for the colours. The pages are under "All pages",
   and the way to the website and the demo is at the foot of the page. */
.nav .theme { margin-left: auto; }
@media (max-width: 560px) { .nav nav { display: none; } }

.docs { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 56px; padding: 44px 0 80px; align-items: start; }
.docs-menu { display: none; }
.docs-side { position: sticky; top: 92px; display: grid; gap: 2px; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 6px; }
.docs-side a, .docs-menu nav a {
  display: block;
  padding: 7px 12px;
  border-left: 2px solid transparent;
  border-radius: 0 7px 7px 0;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
}
.docs-side a:hover, .docs-menu nav a:hover { color: var(--text); background: var(--accent-soft); }
.docs-side a[aria-current="page"], .docs-menu nav a[aria-current="page"] { border-left-color: var(--accent-text); color: var(--text); background: var(--accent-soft); font-weight: 650; }

@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 22px; padding-top: 22px; }
  .docs-side { display: none; }
  .docs-menu { display: block; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
  .docs-menu summary { padding: 12px 16px; font-weight: 600; cursor: pointer; }
  .docs-menu nav { display: grid; gap: 2px; padding: 0 10px 12px; }
}

.prose { max-width: 74ch; font-size: 16.5px; line-height: 1.72; }
.prose h1 { margin: 0 0 22px; max-width: none; font-size: clamp(30px, 4vw, 40px); line-height: 1.12; letter-spacing: -.028em; text-align: left; }
.prose h3 { margin: 44px 0 10px; font-size: 21px; font-weight: 650; letter-spacing: -.014em; }
.prose h4 { margin: 30px 0 8px; font-size: 17px; font-weight: 650; }
.prose p { margin: 0 0 16px; color: color-mix(in srgb, var(--text) 88%, var(--muted)); text-wrap: pretty; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 24px; }
.prose li { margin: 7px 0; color: color-mix(in srgb, var(--text) 88%, var(--muted)); }
.prose li > ul, .prose li > ol { margin: 6px 0 2px; }
.prose strong { color: var(--text); font-weight: 650; }
.prose pre { margin: 0 0 20px; }
.prose table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 15px; }
.prose th, .prose td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--muted); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 74ch; margin-top: 54px; }
.pager a { padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); color: var(--text); font-weight: 600; text-decoration: none; }
.pager a:hover { border-color: var(--accent-text); }
.pager a span { display: block; color: var(--faint); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.pager .next { grid-column: 2; text-align: right; }