/*
 * One face everywhere: Spleen 32x64, the most detailed cut. Its glyphs are
 * exactly half an em wide, so it holds a perfect character grid at any size,
 * and scaled down it stays smooth on high-density and fractionally scaled
 * screens, where the small bitmap cuts turn blurry or blocky.
 */
@font-face {
  font-family: "Spleen";
  src: url("spleen-2.2.0/spleen-32x64.woff2") format("woff2"),
       url("spleen-2.2.0/spleen-32x64.woff") format("woff");
  font-display: swap;
}

/*
 * The ASCII wordmark is the exception. Its block and double-line glyphs only
 * join cleanly when every font pixel lands on a screen pixel, so it uses the
 * small cuts at their native sizes (and exact multiples on 2x screens).
 */
@font-face {
  font-family: "Spleen 8x16";
  src: url("spleen-2.2.0/spleen-8x16.woff2") format("woff2"),
       url("spleen-2.2.0/spleen-8x16.woff") format("woff");
  font-display: swap;
}

@font-face {
  font-family: "Spleen 12x24";
  src: url("spleen-2.2.0/spleen-12x24.woff2") format("woff2"),
       url("spleen-2.2.0/spleen-12x24.woff") format("woff");
  font-display: swap;
}

:root {
  /* dark is the default; theme.js sets data-theme on <html> */
  color-scheme: dark;
  --bg: #000;
  --fg: #fff;
  --dim: #8a8a8a;
  --rule: #2a2a2a;
  --rule-strong: #444444;
  --tint: #1c1c1c;
  --tint-soft: #0d0d0d;

  --font: "Spleen", monospace;

  --gutter: 32px;
  --frame: 1056px;   /* header width, and the manual's sidebar + gap + text */
  --measure: 720px;  /* reading column */
  --sidebar: 272px;
  --gap: 64px;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #fff;
  --fg: #000;
  --dim: #6e6e6e;
  --rule: #dddddd;
  --rule-strong: #b5b5b5;
  --tint: #ededed;
  --tint-soft: #f5f5f5;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--fg);
  scroll-behavior: smooth;
  scroll-padding-top: 32px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
}

::selection {
  background: var(--fg);
  color: var(--bg);
}

a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--dim);
}

a:hover,
a:focus-visible {
  background: var(--fg);
  color: var(--bg);
  border-color: var(--fg);
  outline: none;
}

/* ---------- page grid ----------
 *
 * A centered frame with the menu bar across the top. The landing page puts
 * a single reading column in the middle of it; the manual splits it into a
 * chapter sidebar and the text. The frame never grows past --frame, and as
 * the window narrows the columns give way until everything stacks.
 */

.page {
  /* where the text column starts, measured from the left edge of the frame */
  --lead: max(0px, calc((100% - var(--measure)) / 2));
  display: grid;
  grid-template-columns: minmax(0, var(--frame));
  grid-template-areas:
    "header"
    "main"
    "footer";
  justify-content: center;
  padding: 0 var(--gutter);
}

/*
 * Plain centering can put the frame on a half pixel when the leftover space
 * is odd, which softens every glyph and rule. Where round() is available,
 * center with side padding snapped down to a whole pixel instead.
 */
@supports (padding: round(down, 1px, 1px)) {
  body {
    container-type: inline-size;
  }

  .page {
    /* side padding that centers the frame, and where Home's text column starts */
    --pad: max(var(--gutter), round(down, (100cqw - var(--frame)) / 2, 1px));
    --home-lead: max(0px, round(down, (100cqw - 2 * var(--pad) - var(--measure)) / 2, 1px));
    --lead: var(--home-lead);
    justify-content: start;
    padding-inline: var(--pad);
  }

  /*
   * Start the text column where the menu links start, snapped to a whole
   * pixel.
   */
  .page > main,
  .page > .site-footer {
    justify-self: start;
    width: min(var(--measure), 100% - var(--lead));
    margin-left: var(--lead);
  }
}

main {
  grid-area: main;
  min-width: 0;
  width: 100%;
  max-width: var(--measure);
  justify-self: center;
}

.site-footer {
  grid-area: footer;
  width: 100%;
  max-width: var(--measure);
  justify-self: center;
}

/* ---------- menu bar ----------
 *
 * The lead column is empty space up to the text column. The links and the
 * tools share the next column, which spans exactly the wordmark: links from
 * its left edge, tools ending at its right edge. The wordmark is 58 cells at 12px (696px) or 8px
 * (464px) wide, both multiples of 232px, so its width is the text column
 * rounded down to 232px (and never wider than the column itself).
 */

.site-header {
  --text: min(var(--measure), 100% - var(--lead));
  --art: var(--text);
  grid-area: header;
  display: grid;
  grid-template-columns: var(--lead) var(--art) minmax(0, 1fr);
  align-items: center;
  padding: 24px 0;
}

@supports (width: round(down, 1px, 1px)) {
  .site-header {
    --art: min(var(--text), max(464px, round(down, var(--text), 232px)));
  }
}

.site-header > nav {
  grid-area: 1 / 2;
  justify-self: start;
}

.nav {
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* one 24px row per item, whether it holds a link, a button or the widget */
.nav > li,
.header-tools > * {
  display: flex;
  align-items: center;
  height: 24px;
}

.nav a {
  border: 0;
  color: var(--dim);
  padding: 0 4px;
  margin: 0 -4px;
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--bg);
}

.nav a[aria-current="page"] {
  color: var(--fg);
}

.header-tools {
  grid-area: 1 / 2;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-self: end;
}

/* Discord: a pixel outline in the same style as the bulb and the cup */
.discord-link {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 4px;
  margin: 0 -4px;
  border: 0;
  color: var(--dim);
}

.discord-link svg {
  display: block;
  fill: currentColor;
}

.discord-link:hover,
.discord-link:focus-visible {
  background: var(--fg);
  color: var(--bg);
  outline: none;
}

/* light bulb: lit in light mode, off in dark mode */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 4px;
  margin: 0 -4px;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  cursor: pointer;
}

.theme-toggle svg {
  display: block;
  fill: currentColor;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  background: var(--fg);
  color: var(--bg);
  outline: none;
}

:root:not([data-theme="light"]) .bulb-glass {
  display: none;
}

/*
 * Ko-fi widget: strip the rounded button down to a plain menu item. Its own
 * styles use !important and an inline background, so these need it too. The
 * colored cup image is swapped for a pixel cup that takes the text color.
 */
.kofi .btn-container {
  display: flex !important;
  min-width: 0 !important;
}

.kofi a.kofi-button {
  display: flex !important;
  align-items: center;
  height: 24px;
}

.kofi a.kofi-button {
  min-width: 0 !important;
  padding: 0 4px !important;
  margin: 0 -4px;
  border-radius: 0;
  box-shadow: none;
  background: none !important;
  line-height: 24px !important;
  text-align: left !important;
}

.kofi span.kofitext {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--dim) !important;
  line-height: 24px !important;
  text-shadow: none;
}

.kofi img.kofiimg {
  display: none !important;
}

.kofi span.kofitext::before {
  content: "";
  width: 16px;
  height: 11px;
  background: currentColor;
  -webkit-mask: var(--cup) no-repeat;
  mask: var(--cup) no-repeat;
  --cup: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 11' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h13v1H0zM0 1h1v1H0zM12 1h1v1H12zM0 2h1v1H0zM4 2h2v1H4zM7 2h2v1H7zM12 2h4v1H12zM0 3h1v1H0zM3 3h7v1H3zM12 3h1v1H12zM15 3h1v1H15zM0 4h1v1H0zM3 4h7v1H3zM12 4h1v1H12zM15 4h1v1H15zM0 5h1v1H0zM4 5h5v1H4zM12 5h1v1H12zM15 5h1v1H15zM0 6h1v1H0zM5 6h3v1H5zM12 6h4v1H12zM0 7h1v1H0zM6 7h1v1H6zM12 7h1v1H12zM0 8h1v1H0zM12 8h1v1H12zM1 9h1v1H1zM11 9h1v1H11zM2 10h9v1H2z'/%3E%3C/svg%3E");
}

.kofi a.kofi-button:hover,
.kofi a.kofi-button:focus-visible {
  background: var(--fg) !important;
  opacity: 1;
}

.kofi a.kofi-button:hover span.kofitext,
.kofi a.kofi-button:focus-visible span.kofitext {
  color: var(--bg) !important;
}

/* ---------- sections ---------- */

section {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
}

section:last-child {
  border-bottom: 0;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: normal;
}

h1 {
  font-size: 64px;
  line-height: 64px;
}

h2 {
  font-size: 32px;
  line-height: 32px;
  margin-bottom: 32px;
}

h3 {
  font-size: 24px;
  line-height: 24px;
  margin-bottom: 8px;
}

/* One step below h3, for a sub-section inside a chapter. */
h4 {
  font-size: 19px;
  line-height: 24px;
  margin-bottom: 8px;
}

p {
  margin: 0 0 24px;
}

p:last-child {
  margin-bottom: 0;
}

.dim {
  color: var(--dim);
}

.label {
  display: block;
  color: var(--dim);
  margin-bottom: 8px;
}

/* ---------- hero ---------- */

.hero {
  padding: 64px 0 0;
  border-bottom: 0;
}

/*
 * The wordmark is 58 x 6 cells of block and box-drawing glyphs. Line height
 * must equal the font size or the rows will not touch. The size follows the
 * width of its own column, not the window: 24px (696px wide) when there is
 * room, 16px (464px) when not, and plain text below that.
 */
.wordmark {
  container: wordmark / inline-size;
}

.wordmark-art {
  display: block;
  white-space: pre;
  font-family: "Spleen 8x16", var(--font);
  font-size: 16px;
  line-height: 16px;
}

.wordmark-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

@container wordmark (min-width: 696px) {
  .wordmark-art {
    font-family: "Spleen 12x24", var(--font);
    font-size: 24px;
    line-height: 24px;
    /* the 12x24 cut advances 12.0118px, not 12; pull it back onto the pixel grid */
    letter-spacing: -0.0118px;
  }
}

/*
 * pour.js keeps the wordmark hidden until it starts pouring it in. If the
 * script never gets that far, the wordmark appears after a moment anyway.
 */
.pour .hero .wordmark-art {
  visibility: hidden;
  animation: wordmark-fallback 0s linear 1.5s forwards;
}

@keyframes wordmark-fallback {
  to { visibility: visible; }
}

@container wordmark (max-width: 463px) {
  .wordmark-art {
    display: none;
  }

  .wordmark-text {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
  }
}

.hero .tagline {
  margin-top: 32px;
  font-size: 24px;
  line-height: 32px;
}

.hero .meta {
  margin-top: 24px;
  color: var(--dim);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 48px;
}

.button {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--fg);
}

.button.primary {
  background: var(--fg);
  color: var(--bg);
}

.button.primary:hover,
.button.primary:focus-visible {
  background: var(--bg);
  color: var(--fg);
}

/* ---------- subpages ---------- */

.page-intro {
  padding-top: 64px;
}

.page-title {
  margin-bottom: 32px;
  font-size: 32px;
  line-height: 32px;
}

/* ---------- news ---------- */

.news {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
  padding: 16px 0;
  border-top: 1px solid var(--rule);
}

/* only the four newest entries (listed first) are shown */
.news li:nth-child(n + 5) {
  display: none;
}

.news time {
  flex: 0 0 104px;
  color: var(--dim);
}

.news span {
  flex: 1 1 240px;
}

/* ---------- tables ---------- */

.spec {
  width: 100%;
  border-collapse: collapse;
  margin-top: 32px;
}

.spec th,
.spec td {
  padding: 8px 0;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
  border-top: 1px solid var(--rule);
}

.spec tr:last-child th,
.spec tr:last-child td {
  border-bottom: 1px solid var(--rule);
}

.spec th {
  width: 40%;
  padding-right: 24px;
  color: var(--dim);
}

pre {
  margin: 32px 0 0;
  padding: 24px;
  border: 1px solid var(--rule);
  font-family: var(--font);
  font-size: 16px;
  line-height: 24px;
  overflow-x: auto;
}

/* ---------- manual page ----------
 *
 * The frame splits into a chapter sidebar and the text. The sidebar sticks
 * while you read and scrolls on its own when the list is taller than the
 * window.
 */

.page.manual {
  --lead: calc(var(--sidebar) + var(--gap));
  grid-template-columns: var(--sidebar) minmax(0, 1fr);
  grid-template-areas:
    "header header"
    "toc    main"
    ".      footer";
  column-gap: var(--gap);
}

.manual main,
.manual .site-footer {
  width: 100%;
  max-width: none;
  margin-left: 0;
}

/*
 * Line the manual up with the other pages: the menu sits where it does on
 * Home and the manual text starts exactly where Home's text starts. The
 * chapter list hangs in the space to the left of the text. Five columns:
 * spare space, chapters, gap, text, spare space.
 */
@supports (padding: round(down, 1px, 1px)) {
  .page.manual {
    --text-left: calc(var(--pad) + var(--home-lead));
    --toc-width: min(var(--sidebar), var(--text-left) - var(--gutter) - var(--gap));
    --lead: calc(var(--text-left) - var(--gutter));
    grid-template-columns:
      calc(var(--lead) - var(--gap) - var(--toc-width))
      var(--toc-width)
      var(--gap)
      minmax(0, var(--measure))
      minmax(0, 1fr);
    grid-template-areas:
      "header header header header header"
      ".      toc    .      main   ."
      ".      .      .      footer .";
    column-gap: 0;
    padding-inline: var(--gutter);
  }

  .page.manual .site-header {
    --text: min(var(--measure), 100cqw - 2 * var(--pad) - var(--home-lead));
  }

  /*
   * Too little room on the left for a readable chapter list (under 192px):
   * lay the manual out exactly like Home and use the Chapters dropdown.
   */
  @container (max-width: 1295px) {
    .page.manual {
      --lead: var(--home-lead);
      grid-template-columns: minmax(0, var(--frame));
      grid-template-areas:
        "header"
        "main"
        "footer";
      padding-inline: var(--pad);
    }

    .page.manual .site-header {
      --text: min(var(--measure), 100% - var(--lead));
    }

    .page.manual > main,
    .page.manual > .site-footer {
      width: min(var(--measure), 100% - var(--lead));
      margin-left: var(--lead);
    }

    .page.manual .toc-panel {
      display: none;
    }

    .page.manual .toc-mobile {
      display: block;
    }
  }
}

.toc-panel {
  grid-area: toc;
  align-self: start;
  position: sticky;
  top: 32px;
  max-height: calc(100vh - 32px);
  margin-top: 64px;
  padding-bottom: 32px;
  /* room for the highlight bars, which reach 8px past the text */
  padding-inline: 8px;
  margin-inline: -8px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.toc-panel::-webkit-scrollbar {
  display: none;
}

.toc ol,
.toc-mobile ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.toc a,
.toc-mobile a {
  display: flex;
  gap: 16px;
  padding: 4px 8px;
  margin: 0 -8px;
  border: 0;
  color: var(--dim);
}

.toc a[aria-current="true"] {
  color: var(--fg);
  background: var(--tint);
}

.toc a:hover,
.toc a:focus-visible,
.toc-mobile a:hover,
.toc-mobile a:focus-visible {
  color: var(--bg);
  background: var(--fg);
}

.num {
  flex: none;
  color: var(--dim);
}

a:hover .num,
a:focus-visible .num {
  color: inherit;
}

.toc-mobile {
  display: none;
  margin-top: 16px;
  border: 1px solid var(--rule);
}

.toc-mobile summary {
  padding: 8px 16px;
  cursor: pointer;
}

.toc-mobile[open] summary {
  border-bottom: 1px solid var(--rule);
}

.toc-mobile nav {
  padding: 8px 16px;
}

.manual-title {
  padding-top: 64px;
}

.manual-title .label {
  margin: 16px 0 16px;
  letter-spacing: 4px;
  text-transform: uppercase;
}

/* ---------- manual search ----------
 *
 * A field under USER MANUAL; hits open in a box under it that scrolls on
 * its own. manual-search.js does the work.
 */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.manual-search {
  position: relative;
  margin-bottom: 32px;
}

.manual-search input {
  display: block;
  width: 100%;
  margin: 0;
  padding: 8px 48px 8px 12px;
  font: inherit;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}

.manual-search input::placeholder {
  color: var(--dim);
  letter-spacing: 4px;
  text-transform: uppercase;
  opacity: 1;
}

.manual-search input:focus {
  border-color: var(--fg);
  outline: none;
}

.manual-search input::-webkit-search-cancel-button,
.manual-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

/* the "/" hint, gone once you are typing */
.manual-search-key {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 0 7px;
  font: inherit;
  line-height: 22px;
  color: var(--dim);
  border: 1px solid var(--rule-strong);
  pointer-events: none;
}

.manual-search input:focus ~ .manual-search-key,
.manual-search input:not(:placeholder-shown) ~ .manual-search-key {
  display: none;
}

.manual-search-panel {
  position: absolute;
  top: calc(100% - 1px);
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--bg);
  border: 1px solid var(--fg);
}

.manual-search-panel[hidden] {
  display: none;
}

.manual-search .manual-search-count {
  margin: 0;
  padding: 8px 12px;
  color: var(--dim);
  border-bottom: 1px solid var(--rule);
}

.manual-search .manual-search-results {
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.manual-search .manual-search-results li {
  display: block;
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

.manual-search-results li:last-child {
  border-bottom: 0;
}

.manual-search-where {
  display: block;
  color: var(--dim);
}

.manual-search-text {
  display: block;
  overflow-wrap: anywhere;
}

.manual-search-results mark {
  color: var(--bg);
  background: var(--fg);
}

.manual-search-results li:hover,
.manual-search-results li[aria-selected="true"] {
  color: var(--bg);
  background: var(--fg);
}

.manual-search-results li:hover .manual-search-where,
.manual-search-results li[aria-selected="true"] .manual-search-where {
  color: var(--bg);
}

.manual-search-results li:hover mark,
.manual-search-results li[aria-selected="true"] mark {
  color: var(--fg);
  background: var(--bg);
}

/* where a hit lands: a tint that fades, so the eye finds the line */
.search-flash {
  animation: search-flash 2s ease-out;
}

@keyframes search-flash {
  0%, 45% { background-color: var(--tint); }
  100%    { background-color: transparent; }
}

/* ---------- manual prose ---------- */

.prose h2 {
  display: flex;
  gap: 24px;
}

.prose h2 .num {
  font-size: 16px;
}

.prose h3 {
  margin: 48px 0 16px;
}

.prose h4 {
  margin: 32px 0 12px;
}

.prose p,
.prose ul,
.prose ol,
.prose pre,
.prose blockquote,
.prose .table-wrap {
  margin: 0 0 24px;
}

.prose section > :last-child,
.prose blockquote > :last-child {
  margin-bottom: 0;
}

.prose ul,
.prose ol {
  padding-left: 24px;
}

.prose ul {
  list-style: none;
}

.prose ul li::before {
  content: "-";
  float: left;
  margin-left: -24px;
  color: var(--dim);
}

.prose li + li {
  margin-top: 8px;
}

.prose strong {
  font-weight: normal;
  color: var(--fg);
  background: var(--tint);
}

.prose em {
  font-style: normal;
  text-decoration: underline;
  text-decoration-color: var(--dim);
  text-underline-offset: 4px;
}

.prose code {
  font-family: inherit;
  padding: 0 4px;
  border: 1px solid var(--rule-strong);
  white-space: nowrap;
}

.prose pre {
  padding: 16px 24px;
  white-space: pre;
}

.prose blockquote {
  padding: 16px 24px;
  border-left: 2px solid var(--fg);
  background: var(--tint-soft);
}

.table-wrap {
  overflow-x: auto;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
}

.prose th,
.prose td {
  padding: 8px 24px 8px 0;
  text-align: left;
  vertical-align: top;
  font-weight: normal;
  border-bottom: 1px solid var(--rule);
}

.prose th {
  color: var(--dim);
  border-bottom-color: var(--rule-strong);
}

.prose tr > :last-child {
  padding-right: 0;
}

.signoff {
  padding-bottom: 48px;
  color: var(--dim);
}

.signoff p {
  margin: 0;
}

.signoff em {
  text-decoration: none;
}

/* ---------- footer ---------- */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--rule);
  color: var(--dim);
  font-size: 14px;
}

.site-footer a {
  color: inherit;
}

/* ---------- mid-size windows (half-screen tiles) ---------- */

@media (max-width: 1100px) {
  :root {
    --sidebar: 224px;
    --gap: 48px;
  }
}

/* ---------- narrow windows: everything stacks ---------- */

@media (max-width: 760px) {
  :root {
    --gutter: 16px;
  }

  /* links on the left, tools on the right; the links wrap if they must */
  .site-header {
    display: flex;
    align-items: flex-start;
    gap: 16px 24px;
    padding: 16px 0;
  }

  .header-tools {
    margin-left: auto;
  }

  .page > main,
  .page > .site-footer {
    width: 100%;
    margin-left: 0;
  }

  .nav {
    flex-wrap: wrap;
    gap: 8px 16px;
  }

  .page.manual {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "header"
      "main"
      "footer";
    padding-inline: var(--gutter);
  }

  .toc-panel {
    display: none;
  }

  .toc-mobile {
    display: block;
  }

  .manual-title,
  .hero,
  .page-intro {
    padding-top: 40px;
  }

  section {
    padding: 48px 0;
  }
}

/* ---------- very small windows ---------- */

@media (max-width: 480px) {
  h1 {
    font-size: 32px;
    line-height: 32px;
  }

  .hero .tagline {
    font-size: 16px;
    line-height: 24px;
  }

  .spec th {
    width: 50%;
  }
}

/* ---------- print ----------
 *
 * The PDF manual is this page, printed (tools/tools_manual_pdf.sh). On paper
 * it is always black on white whatever the theme toggle says, the site's
 * menu, chapter sidebar and footer are left off, and the text takes the
 * whole sheet. An 80-column screen diagram is 640px wide and has to fit
 * inside the margins without scrolling, which is what sets them.
 */
@media print {
  @page {
    size: A4;
    margin: 16mm 14mm;
  }

  :root,
  [data-theme] {
    color-scheme: light;
    --bg: #fff;
    --fg: #000;
    --dim: #555555;
    --rule: #cccccc;
    --rule-strong: #999999;
    --tint: #ededed;
    --tint-soft: #f6f6f6;
  }

  .site-header,
  .toc-panel,
  .toc-mobile,
  .manual-search,
  .site-footer {
    display: none !important;
  }

  .page,
  .page.manual {
    display: block;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .manual main {
    width: 668px;          /* the sheet inside its margins, at 96 dpi */
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
  }

  .manual-title {
    padding-top: 0;
  }

  pre,
  .prose pre {
    padding: 12px;
    overflow: visible;
    break-inside: avoid;
  }

  .table-wrap {
    overflow: visible;
  }

  h2, h3, h4 {
    break-after: avoid;
  }

  tr, blockquote, li {
    break-inside: avoid;
  }

  a {
    text-decoration: none;
  }
}