/* The online documentation at /documentation/ has one page per chapter.
   scripts/sync-docs.mjs copies this file next to docs.css. It adds the chapter
   pages, the list of chapters, the links to the next page, and the scrollbars. */

:root{--scroll-thumb:#BCC3CB;--scroll-thumb-hover:#737C87}
@media (prefers-color-scheme:dark){
  :root:not([data-mode="light"]){--scroll-thumb:#39414A;--scroll-thumb-hover:#5A636E}
}
:root[data-mode="dark"]{--scroll-thumb:#39414A;--scroll-thumb-hover:#5A636E}

/* Scrollbars: square, in the colors of the page, amber while dragged. The ::-webkit-scrollbar rules
   are for Chrome, Edge, and Safari. Firefox only knows the two colors, so it gets those below. */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:var(--surface)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:4px solid var(--surface);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--scroll-thumb-hover)}
::-webkit-scrollbar-thumb:active{background:var(--accent)}
::-webkit-scrollbar-corner{background:var(--surface)}
html::-webkit-scrollbar-track{background:var(--surface);border-left:1px solid var(--border-2)}

/* The contents list and the code blocks are dark, so their scrollbars are dark and thin. */
.toc{scrollbar-width:auto;scrollbar-color:auto}
.toc::-webkit-scrollbar{width:10px}
.toc::-webkit-scrollbar-track{background:var(--nav-bg);border:0}
.toc::-webkit-scrollbar-thumb{background:var(--nav-border);border:3px solid var(--nav-bg)}
.toc::-webkit-scrollbar-thumb:hover{background:var(--nav-text-2)}
.toc::-webkit-scrollbar-thumb:active{background:var(--accent)}
.code pre::-webkit-scrollbar{height:10px}
.code pre::-webkit-scrollbar-track{background:var(--code-bg)}
.code pre::-webkit-scrollbar-thumb{background:var(--code-border);border:3px solid var(--code-bg)}
.code pre::-webkit-scrollbar-thumb:hover{background:var(--code-mute)}
.code pre::-webkit-scrollbar-corner{background:var(--code-bg)}

@supports (-moz-appearance:none){
  html{scrollbar-color:var(--scroll-thumb) var(--surface)}
  .toc{scrollbar-width:thin;scrollbar-color:var(--nav-border) transparent}
  .code pre{scrollbar-width:thin;scrollbar-color:var(--code-border) var(--code-bg)}
}

/* Contents: the open chapter and the overview link, which has no number. */
.toc .here>a{color:var(--nav-active-text)}
.toc .here>a .n{color:var(--accent)}

/* A chapter page starts with a short path back to the overview. */
.crumb{display:flex;align-items:center;gap:8px;margin:0 0 6px;font:500 11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}
.crumb a{color:var(--accent-ink);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb+section.doc{margin-top:0;padding-top:0;border-top:0}
.crumb+section.doc>h2:first-child{margin-top:8px;font-size:28px}

/* Previous and next chapter */
.pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:56px}
.pager a{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s}
.pager a:hover{border-color:var(--accent)}
.pager .next{grid-column:2;align-items:flex-end;text-align:right}
.pager-k{font:500 11px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--text-3)}
.pager .prev .pager-k::before{content:"\2190  "}
.pager .next .pager-k::after{content:"  \2192"}
.pager-t{display:flex;align-items:baseline;gap:8px;font-weight:600;font-size:15.5px;line-height:1.35}
.pager .n{font:500 12px/1 var(--mono);color:var(--accent-ink)}

/* The list of chapters on the overview */
.chapters-h{margin:48px 0 14px;font-size:22px;line-height:1.3;font-weight:600}
.chapters{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.chapters a{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;height:100%;padding:14px 16px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s}
.chapters a:hover{border-color:var(--accent)}
.chapters .n{grid-row:span 2;font:500 12px/1.9 var(--mono);color:var(--accent-ink)}
.chapter-d{font-size:13.5px;line-height:1.5;color:var(--text-2)}
.chapter-t{font-weight:600;line-height:1.4}

@media (max-width:640px){
  .crumb+section.doc>h2:first-child{font-size:23px}
  .pager,.chapters{grid-template-columns:minmax(0,1fr)}
  .pager .next{grid-column:auto}
}

@media print{
  .crumb,.pager{display:none!important}
}