/* The public docs (werkzeuge/docs.mjs builds the pages from docs/*.md). Dark like the start page, calm, made for reading.
   No script: every page works and reads as plain HTML. Long code and tables scroll inside their own box, the page never
   gets wider than the screen. */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("marke/ibm-plex-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("marke/ibm-plex-sans-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #17191D;
  --raised: #20252B;
  --code: #111419;
  --line: rgba(160, 193, 205, .13);
  --line-2: rgba(160, 193, 205, .24);
  --text: #EEF3F5;
  --soft: #BCC8CD;
  --dim: #7D8C93;
  --petrol: #2586A7;
  --petrol-hi: #52AFCF;
  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "Liberation Mono", Menlo, monospace;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); color: var(--soft); font: 400 16px/1.68 var(--font); -webkit-font-smoothing: antialiased; }
a { color: var(--petrol-hi); text-underline-offset: 3px; }
a:hover { color: var(--text); }
a:focus-visible, summary:focus-visible { outline: 2px solid var(--petrol-hi); outline-offset: 2px; border-radius: 4px; }

.d-skip { position: absolute; left: -999px; top: 8px; background: var(--raised); color: var(--text); padding: 8px 14px; border-radius: 8px; z-index: 10; }
.d-skip:focus { left: 12px; }

.d-bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; height: 60px; padding: 0 24px; background: rgba(23, 25, 29, .96); border-bottom: 1px solid var(--line); }
.d-brand { display: flex; align-items: center; }
.d-brand img { display: block; height: 22px; width: auto; }
.d-bar-docs { color: var(--soft); text-decoration: none; font-weight: 500; padding-left: 14px; border-left: 1px solid var(--line-2); line-height: 22px; }
.d-cta { margin-left: auto; padding: 8px 16px; border-radius: 99px; background: var(--petrol); color: #fff; font-weight: 500; font-size: 14px; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.d-cta:hover { color: #fff; background: #2d97bb; }

.d-banner { margin: 0; padding: 9px 24px; background: rgba(37, 134, 167, .13); border-bottom: 1px solid var(--line); color: var(--soft); font-size: 14px; line-height: 1.45; text-align: center; }

.d-layout { display: grid; grid-template-columns: 250px minmax(0, 760px); gap: 56px; justify-content: center; max-width: 1180px; margin: 0 auto; padding: 0 24px; }

.d-side { position: sticky; top: 60px; align-self: start; max-height: calc(100vh - 60px); overflow-y: auto; padding: 28px 8px 40px 10px; font-size: 14.5px; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; }
/* The banner pushes the list down until it scrolls away. Without this the end of the list hangs below the window there,
   its padding is out of sight and the last chapter sits on the bottom edge. */
.d-banner + .d-layout .d-side { max-height: calc(100vh - 100px); }
.d-nav-title { margin: 22px 0 6px; color: var(--dim); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.d-nav-title:first-child { margin-top: 0; }
.d-side ul, .d-toc ul { list-style: none; margin: 0; padding: 0; }
.d-side li a, .d-toc li a { display: block; padding: 5px 10px; margin-left: -10px; border-radius: 7px; color: var(--soft); text-decoration: none; line-height: 1.4; }
.d-side li a:hover, .d-toc li a:hover { color: var(--text); background: var(--raised); }
.d-side a[aria-current], .d-toc a[aria-current] { color: var(--text); background: rgba(37, 134, 167, .18); font-weight: 500; }

.d-toc { display: none; margin: 18px 0 0; border: 1px solid var(--line-2); border-radius: 10px; background: var(--raised); }
.d-toc summary { cursor: pointer; padding: 11px 14px; color: var(--text); font-weight: 500; }
.d-toc nav { padding: 0 14px 14px 24px; font-size: 15px; }

.d-main { min-width: 0; padding: 36px 0 56px; }
.d-main .d-section { margin: 0 0 4px; color: var(--petrol-hi); font-size: 14px; font-weight: 500; }
.d-main h1 { margin: 0 0 22px; color: var(--text); font-size: 34px; font-weight: 600; line-height: 1.18; letter-spacing: -.015em; }
.d-main h2 { margin: 42px 0 12px; color: var(--text); font-size: 23px; font-weight: 600; line-height: 1.28; letter-spacing: -.01em; }
.d-main h3 { margin: 28px 0 8px; color: var(--text); font-size: 18px; font-weight: 600; line-height: 1.35; }
.d-main p { margin: 0 0 14px; }
.d-main strong { color: var(--text); font-weight: 600; }
.d-main ul, .d-main ol { margin: 0 0 16px; padding-left: 24px; }
.d-main li { margin: 0 0 7px; }
.d-main li > ul, .d-main li > ol { margin: 7px 0 0; }
.d-main li > pre { margin: 10px 0; }
.d-anchor { color: var(--dim); text-decoration: none; font-weight: 400; opacity: 0; }
h2:hover .d-anchor, h3:hover .d-anchor, .d-anchor:focus { opacity: 1; }

.d-main code { padding: .12em .36em; border-radius: 5px; background: var(--raised); color: var(--text); font: 400 .88em/1.5 var(--mono); overflow-wrap: anywhere; }
.d-main pre { margin: 0 0 18px; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--code); }
.d-main pre code { padding: 0; background: none; color: #DCE5EA; font-size: 13.5px; line-height: 1.6; overflow-wrap: normal; white-space: pre; }

.d-table { margin: 0 0 18px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; }
.d-main table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; }
.d-main th { padding: 9px 13px; background: var(--raised); color: var(--text); font-weight: 600; text-align: left; white-space: nowrap; }
.d-main td { padding: 9px 13px; border-top: 1px solid var(--line); vertical-align: top; }

.d-note { margin: 0 0 18px; padding: 12px 16px; border-left: 3px solid var(--petrol); border-radius: 0 10px 10px 0; background: rgba(37, 134, 167, .1); }
.d-note p:last-child { margin-bottom: 0; }

.d-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.d-page { display: block; padding: 12px 15px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--text); font-weight: 500; line-height: 1.35; text-decoration: none; }
.d-page:hover { background: var(--raised); color: var(--text); }
.d-page span { display: block; margin-bottom: 3px; color: var(--dim); font-size: 13px; font-weight: 400; }
.d-page:last-child:not(:first-child) { text-align: right; }

.d-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 22px 24px 28px; border-top: 1px solid var(--line); color: var(--dim); font-size: 14px; }
.d-foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.d-foot a { color: var(--dim); }
.d-foot a:hover { color: var(--text); }

@media (max-width: 900px) {
  .d-layout { display: block; padding: 0 16px; }
  .d-side { display: none; }
  .d-toc { display: block; }
  .d-main { padding-top: 0; }
  .d-main .d-section { margin-top: 26px; }
  .d-main h1 { font-size: 28px; }
  .d-main h2 { font-size: 21px; margin-top: 36px; }
  .d-bar { padding: 0 16px; }
  .d-banner { padding: 9px 16px; }
  .d-foot { padding: 20px 16px 26px; }
  .d-pager { grid-template-columns: 1fr; }
  .d-page:last-child:not(:first-child) { text-align: left; }
  .d-main pre code { font-size: 13px; }
}