/* Bunker site: a manual, not a landing page.
   Follows the visitor's light/dark setting. Fonts are Windows system faces (Bunker is Windows-only). */
:root {
  --bg: #eceef1;
  --panel: #e1e4e8;
  --line: #c6ccd4;
  --text: #1b1f25;
  --dim: #555d69;
  --link: #b83f12;
  --btn: #c4461a;
  --code-bg: #f6f7f9;
  --code-k: #b83f12;
  --code-s: #1f7a50;

  --display: "Bahnschrift SemiCondensed", "Bahnschrift", "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
  --body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111316; --panel: #181b20; --line: #2b3037; --text: #dcdfe4; --dim: #8f97a3;
    --link: #f0703f; --btn: #e0592a; --code-bg: #0c0d10; --code-k: #f0703f; --code-s: #86d3ad;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #111316; --panel: #181b20; --line: #2b3037; --text: #dcdfe4; --dim: #8f97a3;
  --link: #f0703f; --btn: #e0592a; --code-bg: #0c0d10; --code-k: #f0703f; --code-s: #86d3ad;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 24px; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; }
p { margin: 0 0 1em; max-width: 68ch; }
code, pre { font-family: var(--mono); }
code { font-size: .92em; }

/* Page: contents on the left, text on the right */
.layout {
  width: min(1120px, 100% - 40px); margin-inline: auto; padding-block: 44px 96px;
  display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 72px; align-items: start;
}
.side { position: sticky; top: 36px; }
.brand { display: flex; align-items: center; gap: 10px; font: 700 20px/1 var(--display); letter-spacing: .1em; color: var(--text); text-decoration: none; margin-bottom: 30px; }
.brand img { width: 28px; height: 28px; }
.toc { margin: 0; padding: 0; list-style: none; font: 13.5px/1 var(--mono); display: grid; gap: 4px; }
.toc a { display: block; padding: 7px 0; color: var(--dim); text-decoration: none; }
.toc a:hover { color: var(--text); }
.side .meta { margin-top: 26px; font: 12.5px/1.6 var(--mono); color: var(--dim); }
@media (max-width: 920px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 28px; }
  .side { position: static; }
  .brand { margin-bottom: 16px; }
  .toc { display: flex; flex-wrap: wrap; gap: 2px 18px; }
  .toc a { padding: 4px 0; }
  .side .meta { display: none; }
}

main { max-width: 800px; }
h1 { margin: 0 0 14px; font: 700 clamp(2.4rem, 5vw, 3.4rem)/1.02 var(--display); letter-spacing: -.01em; }
.lede { font-size: 1.22rem; line-height: 1.5; color: var(--text); max-width: 34em; margin-bottom: 1.1em; }
h2 { margin: 76px 0 18px; padding-top: 22px; border-top: 1px solid var(--line); font: 700 1.9rem/1.1 var(--display); letter-spacing: -.005em; }
h3 { margin: 28px 0 6px; font: 700 1.2rem/1.25 var(--display); }
strong, b { font-weight: 650; }

/* Download table */
.get { width: 100%; border-collapse: collapse; margin: 26px 0 10px; }
.get th, .get td { text-align: left; vertical-align: top; padding: 14px 18px 14px 0; border-top: 1px solid var(--line); }
.get tr:last-child th, .get tr:last-child td { border-bottom: 1px solid var(--line); }
.get th { font-weight: 650; white-space: nowrap; width: 9rem; }
.get td { color: var(--dim); }
.get td.act { text-align: right; padding-right: 0; white-space: nowrap; }
.btn { display: inline-block; padding: 9px 16px; background: var(--btn); color: #fff; font: 600 15px/1.2 var(--body); text-decoration: none; border-radius: 2px; }
.btn:hover { filter: brightness(1.1); text-decoration: none; }
.note { font-size: 15px; color: var(--dim); max-width: 64ch; }
@media (max-width: 640px) { .get, .get tbody, .get tr, .get th, .get td { display: block; width: auto; } .get td.act { text-align: left; padding-top: 0; } .get th { padding-bottom: 2px; border-top: 1px solid var(--line); } .get td { border-top: 0; padding: 0 0 14px; } .get tr:last-child td { border-bottom: 1px solid var(--line); } }

/* Figures */
figure { margin: 30px 0; }
figure img { border: 1px solid var(--line); width: 100%; }
figcaption { margin-top: 9px; font: 13px/1.5 var(--mono); color: var(--dim); max-width: 78ch; }
figcaption b { color: var(--text); font-weight: 600; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 26px; margin-top: 26px; }
.gallery figure { margin: 0; }
.gallery a { display: block; }
.gallery .nat img { width: auto; max-width: 100%; }
@media (max-width: 640px) { .gallery { grid-template-columns: minmax(0, 1fr); } }

/* Prose lists */
.terms p { margin-bottom: .85em; }
.terms b { color: var(--text); }
ol.steps { margin: 20px 0 0; padding: 0; list-style: none; counter-reset: s; }
ol.steps > li { counter-increment: s; padding-left: 2.6rem; position: relative; margin-bottom: 30px; }
ol.steps > li::before { content: counter(s) "."; position: absolute; left: 0; top: -.02em; font: 700 1.45rem/1.2 var(--display); color: var(--link); }
ol.steps h3 { margin: 0 0 6px; }
ul.plain { margin: 0 0 1em; padding-left: 1.2em; max-width: 68ch; }
ul.plain li { margin: 0 0 .55em; }
ul.plain li::marker { color: var(--link); }

/* Tables and code */
.scroll { overflow-x: auto; margin: 20px 0 8px; }
table.t { width: 100%; border-collapse: collapse; font-size: 16px; }
table.t th, table.t td { text-align: left; vertical-align: top; padding: 11px 18px 11px 0; border-top: 1px solid var(--line); }
table.t tr:last-child td { border-bottom: 1px solid var(--line); }
table.t th { font: 600 12.5px/1.3 var(--mono); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; border-top: 0; padding-top: 0; }
table.t td:first-child { font-weight: 600; white-space: nowrap; }
table.t code { color: var(--link); overflow-wrap: anywhere; }
@media (max-width: 640px) { table.t td:first-child { white-space: normal; } }
.codebar { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; font: 12.5px/1 var(--mono); color: var(--dim); max-width: 700px; }
pre { margin: 0 0 1em; padding: 18px 20px; background: var(--code-bg); border: 1px solid var(--line); overflow-x: auto; font-size: 13.5px; line-height: 1.7; max-width: 700px; }
.k { color: var(--code-k); } .s { color: var(--code-s); }
.copy { background: none; border: 1px solid var(--line); color: var(--text); padding: 4px 10px; font: 12px/1 var(--mono); cursor: pointer; border-radius: 2px; }
.copy:hover { border-color: var(--link); }

/* Changelog */
.log { margin: 0; }
.log div { display: grid; grid-template-columns: 9rem 1fr; gap: 4px 20px; padding: 13px 0; border-top: 1px solid var(--line); }
.log div:last-child { border-bottom: 1px solid var(--line); }
.log dt { font: 600 14px/1.6 var(--mono); }
.log dt span { color: var(--dim); font-weight: 400; margin-left: 8px; }
.log dd { margin: 0; color: var(--dim); }
@media (max-width: 640px) { .log div { grid-template-columns: 1fr; } }

/* Footer */
footer { margin-top: 84px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14.5px; color: var(--dim); }
footer p { max-width: 70ch; }