@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url(fonts/barlow-400-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(fonts/barlow-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url(fonts/barlow-500-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-display: swap; src: url(fonts/barlow-600-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 700; font-display: swap; src: url(fonts/barlow-700-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-display: swap; src: url(fonts/barlow-condensed-600-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url(fonts/barlow-condensed-700-latin-ext.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 600; font-display: swap; src: url(fonts/jetbrains-mono-400-600-latin.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400 600; font-display: swap; src: url(fonts/jetbrains-mono-400-600-latin-ext.woff2) format('woff2'); }
/* The manual site (build-manual-site.mjs): a reading page on screen, the PDF
   manual in print (build-manual-pdf.mjs). The @font-face rules are put in
   front of this file by the builder. */

:root {
  --text: #18202a; --muted: #5b6675; --faint: #8a94a3; --line: #d6dde6; --soft: #eef2f6;
  --accent: #0a86c8; --heading: #0f2a3d; --code: #f1f4f7;
  --ink: #0B0E12; --ink-text: #E8EDF3; --ink-muted: #95A1B2; --ink-line: #2A3340; --cyan: #4CC2FF;
}
* { box-sizing: border-box; }
html { font: 400 17px/1.6 'Barlow', 'Segoe UI', sans-serif; color: var(--text); background: #fff;
  -webkit-print-color-adjust: exact; print-color-adjust: exact; scroll-padding-top: 16px; }
body { margin: 0; background: #fff; }

/* ------------------------------------------------------------ cover */

.cover { background: var(--ink); color: var(--ink-text); }
.cover-inner { max-width: 1240px; margin: 0 auto; padding: 28px 32px 36px; display: flex; flex-direction: column; }
.sitenav { display: flex; gap: 4px; align-self: flex-end; margin-bottom: 8px; }
.sitenav a { padding: 6px 12px; border-radius: 6px; color: var(--ink-muted); font-weight: 600; font-size: 15px; text-decoration: none; }
.sitenav a:hover { color: var(--ink-text); }
.sitenav a[aria-current] { color: var(--cyan); background: #152029; }
.cover-logo svg { width: 56px; height: 56px; display: block; }
.product { margin-top: 18px; font: 700 15px 'Barlow Condensed', sans-serif; letter-spacing: 0.34em; text-transform: uppercase; color: var(--cyan); }
.cover h1 { margin: 4px 0 0; font: 700 clamp(34px, 6vw, 56px)/1.02 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: 0.01em; }
.scope { margin-top: 8px; font-size: 18px; color: var(--ink-muted); }
.lead { margin-top: 22px; max-width: 720px; color: var(--ink-muted); border-top: 1px solid var(--ink-line); padding-top: 16px; }
.edition { margin-top: 8px; font-weight: 600; font-size: 15px; }
.cover .lead + .edition { margin-top: 6px; }

/* ------------------------------------------------------------ layout */

.layout { max-width: 1240px; margin: 0 auto; padding: 40px 32px 80px; display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 56px; }
.toc { position: sticky; top: 20px; align-self: start; max-height: calc(100vh - 40px); overflow-y: auto; font-size: 14.5px; line-height: 1.4; padding-right: 8px; }
.toc-title { margin: 0 0 10px; font: 700 13px 'Barlow Condensed', sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc > ol > li { margin: 0 0 10px; font-weight: 600; }
.toc ol ol { margin: 5px 0 0 12px; padding-left: 10px; border-left: 1px solid var(--line); }
.toc ol ol li { font-weight: 400; margin-bottom: 3px; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--accent); }
main { max-width: 820px; min-width: 0; }

/* ------------------------------------------------------------ content */

main h2, main h3, main h4 { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; line-height: 1.15; }
main h2 { font-size: 34px; text-transform: uppercase; letter-spacing: 0.01em; margin: 64px 0 18px; padding-bottom: 8px; border-bottom: 3px solid var(--accent); }
main h2:first-child { margin-top: 0; }
main h3 { font-size: 23px; margin: 36px 0 10px; color: var(--heading); }
main h4 { font-size: 19px; margin: 24px 0 8px; }
p { margin: 0 0 12px; }
ul, ol { margin: 0 0 14px; padding-left: 26px; }
li { margin-bottom: 4px; }
li > p { margin: 0; }
strong { font-weight: 600; }
a { color: var(--accent); }
code { font: 400 0.84em 'JetBrains Mono', monospace; background: var(--code); border-radius: 4px; padding: 1px 5px; }
pre { background: var(--code); border: 1px solid var(--line); border-radius: 6px; padding: 12px 16px; overflow-x: auto; }
pre code { background: none; padding: 0; white-space: pre; }
blockquote { margin: 0 0 14px; padding: 4px 16px; border-left: 3px solid var(--accent); color: var(--muted); }

table { width: 100%; border-collapse: collapse; margin: 6px 0 20px; font-size: 15px; line-height: 1.4; }
th { text-align: left; font-weight: 600; background: var(--soft); color: #2b3440; }
th, td { border: 1px solid var(--line); padding: 7px 10px; vertical-align: top; }

figure { margin: 16px 0 28px; text-align: center; }
figure img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid #1f2630; }
figcaption { margin-top: 8px; font-size: 14.5px; color: var(--muted); font-style: italic; }
.diagram { margin: 16px 0 24px; text-align: center; }
.diagram svg { max-width: min(100%, 600px); height: auto; }

@media screen and (max-width: 900px) {
  html { font-size: 16px; }
  .cover-inner, .layout { padding-left: 16px; padding-right: 16px; }
  .layout { display: block; padding-top: 24px; }
  .toc { position: static; max-height: none; margin-bottom: 32px; padding: 14px 16px; background: var(--soft); border-radius: 8px; }
  .toc ol ol { display: none; }
  main h2 { font-size: 28px; margin-top: 48px; }
  table { display: block; overflow-x: auto; }
}

/* ------------------------------------------------------------ print: the PDF manual */

@page { size: A4; margin: 18mm 17mm 20mm; @bottom-center { content: counter(page) " / " counter(pages); font: 500 8.5pt 'Barlow', sans-serif; color: #8a94a3; } }
@page :first { margin: 0; @bottom-center { content: none; } }

@media print {
  html { font-size: 10.5pt; line-height: 1.5; }
  .sitenav { display: none; }

  .cover { height: 297mm; break-after: page; }
  .cover-inner { height: 100%; max-width: none; padding: 38mm 24mm 26mm; }
  .cover-logo svg { width: 30mm; height: 30mm; }
  .product { margin-top: 14mm; font-size: 15pt; }
  .cover h1 { margin-top: 3mm; font-size: 44pt; }
  .scope { margin-top: 5mm; font-size: 13pt; }
  .spacer { flex: 1; }
  .lead { max-width: 128mm; font-size: 10.5pt; padding-top: 5mm; margin-top: 0; }
  .edition { margin-top: 3mm; font-size: 10.5pt; }

  .layout { display: block; max-width: none; padding: 0; }
  .toc { position: static; max-height: none; overflow: visible; padding: 0; font-size: 10pt; break-after: page; }
  .toc-title { margin: 0 0 5mm; padding-bottom: 2.5mm; border-bottom: 2.5px solid var(--accent); font-size: 23pt; letter-spacing: 0.01em; color: var(--text); }
  .toc > ol > li { margin: 0 0 2.4mm; font-size: 11.5pt; }
  .toc ol ol { margin: 1.2mm 0 0 7mm; padding: 0; border: 0; }
  .toc ol ol li { font-size: 10pt; margin-bottom: 0.6mm; }
  main { max-width: none; }

  main h2, main h3, main h4 { break-after: avoid; }
  main h2 { font-size: 23pt; margin: 0 0 5mm; padding-bottom: 2.5mm; border-bottom-width: 2.5px; break-before: page; }
  main h3 { font-size: 15pt; margin: 7mm 0 2.5mm; }
  p { margin: 0 0 2.6mm; orphans: 3; widows: 3; }
  p:has(+ ul, + ol, + table) { break-after: avoid; } /* an intro line stays with what it introduces */
  ul, ol { margin: 0 0 3mm; padding-left: 6mm; }
  li { margin-bottom: 1mm; }
  code { font-size: 8.8pt; border-radius: 3px; padding: 0.2mm 1mm; }
  pre { padding: 3mm 4mm; border-radius: 4px; white-space: pre-wrap; break-inside: avoid; }
  pre code { white-space: pre-wrap; }

  table { margin: 1mm 0 4mm; font-size: 9pt; line-height: 1.35; }
  thead { display: table-header-group; }
  th, td { padding: 1.2mm 2.2mm; }
  tr { break-inside: avoid; }

  figure { margin: 3mm 0 5mm; break-inside: avoid; }
  figure img { max-height: 118mm; width: auto; border-radius: 3px; }
  figcaption { margin-top: 2mm; font-size: 8.8pt; }
  .diagram { margin: 3mm 0 5mm; break-inside: avoid; }
  .diagram svg { max-width: 125mm !important; max-height: 100mm; }
}