/* guardpup.io/docs: a sidebar of pages beside the article. Builds on page.css and site.css. */
.docs { max-width: 1080px; margin: 0 auto; padding: 36px 20px 72px; display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 48px; }
.docs main { max-width: 760px; margin: 0; padding: 0; }
.docs-nav { position: sticky; top: 24px; align-self: start; font-size: 15px; }
.docs-nav b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.docs-nav a { display: block; padding: 6px 10px; border-radius: 8px; color: var(--fg); text-decoration: none; }
.docs-nav a:hover { background: var(--soft); }
.docs-nav a[aria-current="page"] { background: var(--soft); color: var(--accent); font-weight: 650; }
.docs-nav .sub { padding-left: 22px; font-size: 14px; }
.docs h2 { font-size: 23px; margin: 44px 0 10px; }
.docs h3 { font-size: 18px; margin: 28px 0 6px; }
.docs code { font-size: .9em; background: #f3ebe0; border-radius: 5px; padding: 1px 5px; }
.docs pre { background: #1c1917; color: #f5f1ea; border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.docs pre code { background: none; padding: 0; font-size: inherit; }
.docs pre .c { color: #a8a29e; }
.shot { margin: 18px 0 22px; }
.shot img { display: block; max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); background: #202124; }
.shot.bare img { border: 0; background: none; }
.shot figcaption { font-size: 14px; color: var(--muted); margin-top: 8px; }
.pair { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.docs table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 10px 0 18px; }
.docs th, .docs td { text-align: left; vertical-align: top; padding: 9px 10px; border-top: 1px solid var(--line); }
.docs th { font-size: 13px; color: var(--muted); font-weight: 650; border-top: 0; }
.docs td:first-child { white-space: nowrap; }
.tag { display: inline-block; font-size: 11px; font-weight: 750; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 0 7px; margin-left: 4px; vertical-align: 2px; }
.next { display: flex; justify-content: space-between; gap: 12px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid2 .card { margin: 0; }
.grid2 .card h3 { margin-top: 0; }
@media (max-width: 860px) {
  .docs { grid-template-columns: minmax(0, 1fr); gap: 20px; padding-top: 24px; }
  .docs td code { word-break: break-word; }
  .docs-nav { position: static; display: flex; flex-wrap: wrap; gap: 4px; }
  .docs-nav b { width: 100%; }
  .docs-nav .sub { padding-left: 10px; }
  .grid2 { grid-template-columns: 1fr; }
  .docs td:first-child { white-space: normal; }
}
@media (max-width: 480px) { .docs { padding: 20px 16px 56px; } }