/* The documentation (/docs). Three columns on a wide screen: every page on the left, the page itself, and "on this page"
   on the right. Colours, fonts and corner sizes all come from styles.css, so it follows the site and the chosen appearance. */

/* As wide as the header and footer (styles.css: .container), with the same gutters, so the logo sits over the page list and
   the header does not move when coming here from another page. */
.docs { display: grid; grid-template-columns: 240px minmax(0, 1fr) 200px; gap: 0 clamp(1.5rem, 3vw, 3rem); align-items: start; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* Arriving from another page of the site, the documentation settles into place from just below, under the header, which
   styles.css holds still. Moving between two pages of the documentation keeps the plain fade: both pages have this block, and
   ":only-child" is true only when the page left behind had none. Only in browsers that can; the rest, and anyone who has
   asked for less motion, get what every other page gets (styles.css). */
.docs { view-transition-name: docs; }
::view-transition-new(docs):only-child { animation: docs-arrive .3s cubic-bezier(.2, .8, .2, 1) .06s both; }
@keyframes docs-arrive { from { opacity: 0; translate: 0 10px; } }

/* ---------- left: search and every page ---------- */
.docs-side, .docs-toc { position: sticky; top: 88px; max-height: calc(100vh - 88px); padding: 2rem 0 3rem; }
/* The search box stays put and the list of pages scrolls under it, so a long list never takes the search box away. */
.docs-side { display: flex; flex-direction: column; padding-right: .5rem; }
.docs-nav, .docs-toc { overflow-y: auto; scrollbar-width: thin; }
.docs-nav { min-height: 0; }
.docs-search { position: relative; margin-bottom: 1.25rem; }
.docs-search input { width: 100%; }
/* The key that jumps to the box, shown in it until it is in use. Not on a touch screen, which has no "/" to press. */
.docs-key { position: absolute; right: .6rem; top: 50%; translate: 0 -50%; padding: .1rem .45rem; border: 1px solid var(--line-2); border-radius: var(--radius-sm); color: var(--muted); font: 500 .72rem/1.4 var(--mono); pointer-events: none; }
.docs-search input:focus ~ .docs-key, .docs-search input:not(:placeholder-shown) ~ .docs-key { display: none; }
@media (hover: none) { .docs-key { display: none; } }
/* Wider than the column it hangs from, so a result is a line or two and not a paragraph. */
.docs-results { position: absolute; z-index: 20; left: 0; width: min(26rem, calc(100vw - 2.5rem)); top: calc(100% + 6px); max-height: 60vh; overflow-y: auto; margin: 0; padding: .35rem; list-style: none; border: 1px solid var(--line-2); border-radius: var(--radius-btn); background: var(--surface); box-shadow: var(--shadow); }
.docs-results[hidden] { display: none; }
.docs-results a { display: block; padding: .55rem .65rem; border-radius: var(--radius-sm); text-decoration: none; }
.docs-results a:hover, .docs-results a[aria-selected="true"] { background: var(--raised); }
.docs-results strong { display: block; font-size: .9rem; font-weight: 600; }
.docs-results small { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin-top: .15rem; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.docs-results .docs-none { padding: .6rem .65rem; color: var(--muted); font-size: .88rem; }

.docs-menu-btn { display: none; }
.docs-nav-group { margin: 1.5rem 0 .5rem; font: 500 .72rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.docs-nav ul { margin: 0; padding: 0; list-style: none; }
.docs-nav a { display: block; padding: .42rem .7rem; border-radius: var(--radius-sm); color: var(--muted); font-size: .92rem; text-decoration: none; transition: color .15s, background .15s; }
.docs-nav a:hover { color: var(--text); }
.docs-nav a[aria-current="page"] { background: var(--raised); color: var(--text); font-weight: 600; }

/* ---------- right: on this page ---------- */
.docs-toc { font-size: .85rem; }
.docs-toc:empty { visibility: hidden; }
.docs-toc-title { margin: 0 0 .6rem; font: 500 .72rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.docs-toc ul { margin: 0; padding: 0; list-style: none; border-left: 1px solid var(--line); }
.docs-toc a { display: block; margin-left: -1px; padding: .28rem 0 .28rem .9rem; border-left: 1px solid transparent; color: var(--muted); text-decoration: none; line-height: 1.4; transition: color .15s, border-color .15s; }
.docs-toc a:hover { color: var(--text); }
.docs-toc a.on { border-left-color: var(--accent); color: var(--accent-text); }
.docs-toc .docs-toc-3 a { padding-left: 1.7rem; }

/* ---------- the page itself ---------- */
.docs-main { min-width: 0; padding: 2.5rem 0 5rem; }
.docs-main:focus { outline: none; } /* focused by docs.js after a page change, so reading carries on from there */
.docs-eyebrow { margin: 0 0 .6rem; font: 500 .75rem/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-text); }
.docs-content { max-width: 46rem; font-size: 1rem; line-height: 1.75; overflow-wrap: break-word; }
.docs-content h1 { margin: 0 0 1rem; font-size: clamp(1.9rem, 4vw, 2.5rem); letter-spacing: -.03em; }
.docs-content h2 { margin: 2.75rem 0 .75rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 1.45rem; }
.docs-content h3 { margin: 2rem 0 .5rem; font-size: 1.15rem; }
.docs-content h4 { margin: 1.5rem 0 .4rem; font-size: 1rem; }
.docs-content h1 + p { font-size: 1.1rem; color: var(--muted); }
.docs-content p, .docs-content ul, .docs-content ol { margin: 0 0 1.1rem; }
.docs-content li { margin-bottom: .35rem; }
.docs-content li > ul, .docs-content li > ol { margin: .35rem 0 0; }
.docs-content a { color: var(--accent-text); text-underline-offset: 3px; }
.docs-content img { display: block; max-width: 100%; height: auto; margin: 1.5rem 0; border: 1px solid var(--line); border-radius: var(--radius-btn); }
.docs-content hr { margin: 2.5rem 0; border: 0; border-top: 1px solid var(--line); }
.docs-content blockquote { margin: 0 0 1.1rem; padding: .1rem 0 .1rem 1.1rem; border-left: 2px solid var(--line-2); color: var(--muted); }
.docs-content blockquote p:last-child { margin-bottom: 0; }
/* The "#" beside a heading, for copying a link to that part of the page. It appears when the heading is pointed at or reached by keyboard. */
.docs-anchor { margin-left: .2rem; color: var(--muted); font-weight: 400; text-decoration: none; opacity: 0; transition: opacity .15s; }
:is(h2, h3, h4):hover > .docs-anchor, .docs-anchor:focus-visible { opacity: 1; }

/* Code: a word in a sentence, and a block with a Copy button (added by docs.js). */
.docs-content code { padding: .12em .38em; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); font: 400 .86em var(--mono); }
.docs-content pre { position: relative; margin: 0 0 1.25rem; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); overflow-x: auto; }
.docs-content pre code { padding: 0; border: 0; background: none; font-size: .84rem; line-height: 1.65; }
.docs-pre { position: relative; }
.docs-pre .copy-btn { position: absolute; top: .5rem; right: .5rem; min-height: 30px; padding: .2rem .6rem; font-size: .76rem; opacity: 0; transition: opacity .15s; }
.docs-pre:hover .copy-btn, .docs-pre .copy-btn:focus-visible, .docs-pre .copy-btn.copied { opacity: 1; }
@media (hover: none) { .docs-pre .copy-btn { opacity: 1; } }

.docs-content .table-wrap { margin: 0 0 1.25rem; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-btn); }
.docs-content table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.docs-content th, .docs-content td { padding: .6rem .85rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.docs-content th { background: var(--surface); font-weight: 600; white-space: nowrap; }
.docs-content tr:last-child td { border-bottom: 0; }
.docs-content td code { white-space: nowrap; } /* a code or an address stays in one piece; a table too wide for a phone scrolls */

/* Labelled boxes: a quote that starts with [!NOTE], [!TIP], [!IMPORTANT], [!WARNING] or [!CAUTION]. The colour is in the
   label and a faint wash, and the word says what kind it is, so nothing depends on colour alone. */
.docs-callout { --tone: var(--info); margin: 0 0 1.25rem; padding: .9rem 1.1rem; border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--line)); border-radius: var(--radius-btn); background: color-mix(in srgb, var(--tone) 7%, transparent); }
.docs-callout p:last-child { margin-bottom: 0; }
.docs-callout .docs-callout-title { margin: 0 0 .3rem; font: 500 .74rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--tone); }
.docs-tip { --tone: var(--ok); }
.docs-important { --tone: var(--accent-text); }
.docs-warning { --tone: var(--warn); }
.docs-caution { --tone: var(--bad); }

/* Previous and next page. */
.docs-steps { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; max-width: 46rem; margin-top: 3.5rem; }
.docs-steps:empty { display: none; }
.docs-step { display: block; padding: .9rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius-btn); background: var(--surface); text-decoration: none; transition: border-color .15s, background .15s; }
.docs-step:hover { border-color: var(--line-2); background: var(--raised); }
.docs-prev small::before { content: '\2190\a0'; }
.docs-next small::after { content: '\a0\2192'; }
.docs-step small { display: block; margin-bottom: .2rem; font: 500 .7rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.docs-step span { font-weight: 600; }
.docs-next { text-align: right; }

/* ---------- narrower screens ---------- */
/* No room for three columns: "on this page" goes first. */
@media (max-width: 1180px) {
  .docs { grid-template-columns: 240px minmax(0, 1fr); }
  .docs-toc { display: none; }
}
/* A phone or a small tablet: the page list folds away behind a button above the page. */
@media (max-width: 820px) {
  .docs { display: block; }
  .docs-side { position: static; display: block; max-height: none; padding: 1.25rem 0 0; }
  .docs-results { width: 100%; }
  .docs-key { display: none; }
  .docs-content td code { white-space: normal; overflow-wrap: anywhere; } /* no room to keep it in one piece */
  .docs-search { margin-bottom: .75rem; }
  .docs-menu-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 44px; padding: .55rem .9rem; border: 1px solid var(--line-2); border-radius: var(--radius-btn); background: var(--surface); color: var(--text); font: 600 .92rem var(--sans); cursor: pointer; }
  .docs-menu-btn::after { content: '+'; font: 400 1.2rem var(--mono); color: var(--muted); }
  .docs-menu-btn[aria-expanded="true"]::after { content: '\2212'; }
  .docs-nav { display: none; padding: .25rem 0 .5rem; }
  .docs-nav.open { display: block; }
  .docs-main { padding-top: 1.75rem; }
  .docs-steps { grid-template-columns: 1fr; }
  .docs-next { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .docs-nav a, .docs-toc a, .docs-anchor, .docs-step, .docs-pre .copy-btn { transition: none; }
}
/* A table written with an empty first row (two columns of "what" and "value", no headings) shows no empty heading band. */
.docs-content thead:not(:has(th:not(:empty))) { display: none; }