/* The docs portal, over base.css: a sidebar of the documents beside the one
   being read. Its own file so the pages that have no use for it do not carry
   it. */
.docs-head { margin-bottom: 1.5rem; }
.docs-brand { margin: 0; font-weight: 600; font-size: 1.05rem; }
.docs-brand a { color: var(--fg); text-decoration: none; }

.docs { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; align-items: start; }
.docs-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
             font-size: .88rem; padding-right: .25rem; }
.docs-side ul { list-style: none; padding: 0; margin: 0; }
.docs-side li { margin: 0; }
.docs-side a { display: block; padding: .22rem .55rem; border-radius: 5px;
               color: var(--muted); text-decoration: none; }
.docs-side a:hover { color: var(--fg); }
.docs-side a[aria-current="page"] { color: var(--fg); background: var(--card);
                                    font-weight: 600; border: 1px solid var(--line); }
.docs-side .sections { margin: .25rem 0 .6rem .7rem; padding-left: .3rem;
                       border-left: 1px solid var(--line); font-size: .82rem; }
.docs-side .sections a { padding: .12rem .45rem; }

.doc { line-height: 1.65; min-width: 0; }
.doc h1 { font-size: 1.7rem; margin: 0 0 1rem; }
.doc h2 { font-size: 1.2rem; margin: 2.6rem 0 .8rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.doc h3 { font-size: 1rem; margin: 1.8rem 0 .5rem; }
.doc h4 { font-size: .93rem; margin: 1.4rem 0 .4rem; }
.doc :is(h1, h2, h3, h4) { scroll-margin-top: 1rem; }
.doc .anchor { margin-left: .4rem; color: var(--muted); text-decoration: none;
               font-weight: 400; opacity: 0; }
.doc :is(h1, h2, h3, h4):hover .anchor, .doc .anchor:focus-visible { opacity: 1; }
.doc pre { line-height: 1.45; }
.doc :not(pre) > code { background: var(--card); border: 1px solid var(--line);
                        border-radius: 4px; padding: .05rem .3rem; }
.doc table { display: block; overflow-x: auto; margin: .8rem 0 1.4rem; width: auto; max-width: 100%; }
.doc th { text-transform: none; letter-spacing: 0; font-size: .82rem; }
.doc blockquote { margin: 1rem 0; padding: .2rem 1rem; border-left: 3px solid var(--accent);
                  background: var(--card); border-radius: 0 6px 6px 0; }
.doc img { max-width: 100%; }
.doc li > p { margin: .2rem 0; }

.docs-lead { background: var(--card); border: 1px solid var(--line); border-radius: 8px;
             padding: .2rem 1.1rem .9rem; margin: 1.5rem 0; }
.docs-lead h2 { border-top: none; padding-top: 0; margin-top: 1rem; }
.docs-index { columns: 2 16rem; }

@media (max-width: 760px) {
  .docs { grid-template-columns: 1fr; gap: 1rem; }
  .docs-side { position: static; max-height: none; border-bottom: 1px solid var(--line);
               padding-bottom: 1rem; }
}