/* The user manual (/manual/). Built on site.css; generated by tools/manual-gen.py.
   Screen: the site's dark look, contents on the left. Print and PDF: light, see the end. */

.man-head { padding-bottom: 1rem; }
.man-head h1 { max-width: 16ch; }
.man-meta { margin-top: 1.4rem; }
.man-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.8rem; }
.print-cover { display: none; }

.man-layout { display: grid; gap: 2rem; margin-top: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 1000px) {
  .man-layout { grid-template-columns: 17rem minmax(0, 1fr); gap: 4.5rem; align-items: start; }
}

/* contents */
.man-toc { font-size: .9rem; }
.man-toc details { border: 1px solid var(--line); border-radius: 8px; padding: .9rem 1.1rem; }
.man-toc summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; }
.man-toc summary::-webkit-details-marker { display: none; }
.man-toc summary::after { content: "+"; font-family: var(--mono); }
.man-toc details[open] summary::after { content: "−"; }
.toc-list, .toc-list ol { list-style: none; margin: 0; padding: 0; }
.toc-list { margin-top: .8rem; }
.toc-list > li { border-top: 1px solid var(--line); }
.toc-list a { display: flex; color: var(--dim); text-decoration: none; padding: .45rem 0; line-height: 1.35; }
.toc-list a:hover, .toc-list a.on { color: var(--text); }
.toc-list .n { flex: none; width: 1.9rem; padding-top: .3em; font: 500 .7rem/1 var(--mono); color: var(--faint); }
.toc-list ol { display: none; padding: 0 0 .5rem 1.9rem; }
.toc-list ol a { padding: .22rem 0; font-size: .84rem; }
.toc-list li:has(> a.on) > ol, .toc-list li:has(ol a.on) > ol { display: block; }
@media (min-width: 1000px) {
  .man-toc { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; scrollbar-width: thin; }
  .man-toc details { border: 0; padding: 0; }
  .man-toc summary { pointer-events: none; }
  .man-toc summary::after, .man-toc details[open] summary::after { content: none; }
}

/* the text */
.man-body { max-width: 50rem; min-width: 0; color: #c9c8c3; font-size: 1.02rem; line-height: 1.7; }
.man-body .chapter + .chapter { margin-top: clamp(4rem, 9vw, 6rem); }
.man-body h2 { font-size: clamp(1.8rem, 3.6vw, 2.6rem); max-width: none; padding-top: 1.4rem; border-top: 1px solid var(--line); scroll-margin-top: 1.5rem; }
.man-body h3 { margin-top: 2.8rem; font-size: 1.3rem; color: var(--text); scroll-margin-top: 1.5rem; }
.man-body h2 + h3 { margin-top: 2rem; }
.man-body p, .man-body ul, .man-body ol { margin: 1rem 0 0; }
.man-body ul { padding-left: 1.3rem; }
.man-body ol { padding-left: 2rem; }
.man-body li { margin: .4rem 0; padding-left: .2rem; }
.man-body li::marker { color: var(--faint); }
.man-body ol > li::marker { font: 500 .8em var(--mono); }
.man-body strong { color: var(--text); font-weight: 600; }
.man-body a { color: var(--text); }
.man-body code { font: 500 .78em/1 var(--mono); color: var(--text); background: rgba(241,240,236,.07);
  border: 1px solid var(--line); border-radius: 4px; padding: .18em .38em; white-space: nowrap; }
.man-body pre code, .man-body td code { white-space: normal; }

.man-body .table-wrap { margin-top: 1.4rem; }
.man-body table { font-size: .93rem; line-height: 1.5; }
.man-body th, .man-body td { padding: .7rem 1.2rem .7rem 0; }
.man-body tbody th { width: auto; color: var(--text); }
.man-body td { color: #c9c8c3; }
.man-body td:first-child { color: var(--text); }
.man-body thead th { white-space: nowrap; }

.man-body figure { margin: 2rem 0 0; }
.man-body figure img { width: 100%; border-radius: 8px; }
.man-body figure.screen img { padding: 5px; background: #050506; box-shadow: 0 0 0 1px rgba(241,240,236,.08), 0 24px 60px -24px rgba(0,0,0,.9); }
.man-body figure.diagram img { background: #fff; padding: clamp(.5rem, 2vw, 1.2rem); max-width: 44rem; }
.man-body figcaption { margin-top: .8rem; font: 500 .68rem/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.man-top { margin-top: 4rem !important; font: 500 .72rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.man-top a { text-decoration: none; color: var(--dim); }

@media (max-width: 599px) {
  .man-body { font-size: 1rem; }
  .man-body code { white-space: normal; }
}

/* ---------- print and PDF ---------- */
@media print {
  @page { size: A4; }
  :root { --text: #111; --dim: #444; --faint: #777; --line: #d7d6d2; }
  html, body { background: #fff !important; color: #111; font-size: 10pt; }
  .nav, .foot, .consent, .skip, .man-head, .man-top, .man-toc summary { display: none !important; }
  a { color: inherit !important; text-decoration: none !important; }

  .print-cover { display: flex; flex-direction: column; justify-content: flex-end; height: 245mm; padding-bottom: 10mm; break-after: page; }
  .print-cover img { filter: invert(1); width: 34mm; height: auto; margin-bottom: auto; }
  .print-cover h1 { font: 500 44pt/1 var(--font); letter-spacing: -.03em; margin: 3mm 0 6mm; color: #111; }
  .print-cover p { color: #444; font-size: 11pt; }
  .print-cover .url { margin-top: 2mm; }

  .wrap { padding: 0 !important; max-width: none; }
  .man-layout { display: block; margin: 0; }
  .man-toc { break-after: page; font-size: 10pt; position: static; max-height: none; overflow: visible; }
  .man-toc::before { content: "Contents"; display: block; font: 500 22pt/1.1 var(--font); letter-spacing: -.02em; margin-bottom: 5mm; }
  .man-toc details { border: 0; padding: 0; }
  .man-toc details > :not(summary) { display: block !important; }
  .toc-list { margin: 0; columns: 2; column-gap: 10mm; }
  .toc-list > li { break-inside: avoid; border-top: 1px solid var(--line); }
  .toc-list a { color: #111 !important; padding: .9mm 0; }
  .toc-list ol { display: block !important; padding: 0 0 1.5mm 7mm; }
  .toc-list ol a { color: #555 !important; font-size: 8pt; padding: .2mm 0; }

  .man-body { max-width: none; color: #222; font-size: 10pt; line-height: 1.5; }
  .man-body .chapter { break-before: page; }
  .man-body .chapter + .chapter { margin-top: 0; }
  .man-body h2 { border-top: 0; padding-top: 0; font-size: 22pt; color: #111; }
  .man-body h3 { font-size: 13pt; margin-top: 7mm; color: #111; break-after: avoid; }
  .man-body h2, .man-body h3 { break-after: avoid; }
  .man-body p, .man-body li { orphans: 3; widows: 3; }
  .man-body strong { color: #111; }
  .man-body code { color: #111; background: #f1f0ec; border-color: #dcdad5; font-size: .82em; }
  .man-body table { font-size: 9pt; }
  .man-body tr { break-inside: avoid; }
  .man-body thead { display: table-header-group; }
  .man-body thead th { color: #555; border-bottom-color: #999; }
  .man-body td, .man-body td:first-child, .man-body tbody th { color: #222; }
  .man-body th, .man-body td { padding: 1.6mm 4mm 1.6mm 0; border-bottom: 1px solid var(--line); }
  .man-body .table-wrap { overflow: visible; }
  .man-body figure { break-inside: avoid; margin-top: 5mm; }
  .man-body figure.screen img { box-shadow: none; padding: 0; background: none; border-radius: 3px; }
  .man-body figure.diagram img { padding: 0; border: 1px solid var(--line); max-width: 140mm; }
  .man-body figure img[src*="step-legend"] { max-height: 225mm; width: auto; max-width: 100%; }
  .man-body figcaption { color: #777; }
}
