/* ==========================================================================
   OMNI docs, wearing omni.weekndlabs.com's clothes.

   The site's design system is "the receipt": quiet paper, one instrument,
   itemised numbers. Its two rules are inherited here without exception.

     1. Mono type means a machine emitted it. Sans means a person wrote it.
        Never mix the two inside one block.
     2. Yellow appears only inside the terminal. It is the instrument's
        colour, so it never leaks onto the page. The accent both themes
        spend is --accent, the same one omni.weekndlabs.com uses.

   Rule 2 is also what decides the dark theme. mdBook's `light` is the site's
   paper; its `navy` is the instrument, which is the one place amber belongs.
   The other three built-in themes are hidden rather than restyled, because a
   half-styled theme is worse than an absent one.

   Layout follows the reading mechanics of a good reference site rather than
   mdBook's defaults: a narrow measure, a grouped sidebar, a right-hand page
   outline, and whitespace doing the separating instead of borders.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts, vendored into src/fonts/ so a checkout of this repository renders
   without a package manager. Published pages load the design system's families
   over the top of these and never reach them; see the note below the block.

   The `../` is load-bearing. mdBook copies this file to `book/theme/` and
   fingerprints its name, while `src/fonts/` lands at `book/fonts/`, so a URL
   relative to the stylesheet has to climb one level. Without it every request
   is a 404 and the page silently falls back to system-ui, which looks close
   enough to go unnoticed.
   -------------------------------------------------------------------------- */

@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ibm-plex-sans-condensed-700.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/ibm-plex-mono-500.woff2') format('woff2'); }

/* --------------------------------------------------------------------------
   Every value in this file that decides how the book looks is a --wl-* token
   from @weekndlabs/design, and every one of them carries the pre-system value
   as its fallback.

   The tokens are not vendored here. omni-pages depends on that package for its
   own pages and, at publish time, drops the same copy into this book and links
   it from theme/head.hbs (see scripts/build-docs.sh over there). That is what
   keeps /docs and the rest of omni.weekndlabs.com on one palette through a
   style change: one version bump, in one repository.

   The consequence to know about: `mdbook serve` here renders the fallbacks, so
   a local preview is the pre-system look and correct only in layout. Judge
   colour and type on the published site, not on localhost:3000.
   -------------------------------------------------------------------------- */

:root {
  --font-display: var(--wl-font-sans, 'IBM Plex Sans Condensed', 'IBM Plex Sans', system-ui, sans-serif);
  --font-body:    var(--wl-font-sans, 'IBM Plex Sans', system-ui, sans-serif);
  --font-mono:    var(--wl-font-mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace);

  /* mdBook's general.css carries `code { font-family: var(--mono-font)
     !important }`, so a `code` rule here loses whatever its specificity or
     order. Its variable is the seam that works, and it is the same one the
     palette already goes through. Without this, every code block and inline
     span in the manual renders in Source Code Pro while the rest of the site
     is on the design system's mono. */
  --mono-font: var(--font-mono);

  /* mdBook's general.css opens with `:root { font-size: 62.5% }`, so 1rem is
     10px in this book and not 16px. Every --wl-text-* token is authored in rem
     against a 16px root, so used raw each one renders at 62.5% of its size:
     body text came out at 9.375px. Restated through the factor once, here, so
     no rule below has to remember it. Anything measured in px, and mdBook's own
     rem values, are already correct and are left alone. */
  --root-ratio: 1.6;
  --text-label:    calc(var(--wl-text-label,    0.6875rem) * var(--root-ratio));
  --text-meta:     calc(var(--wl-text-meta,     0.8125rem) * var(--root-ratio));
  --text-body:     calc(var(--wl-text-body,     0.9375rem) * var(--root-ratio));
  --text-lede:     calc(var(--wl-text-lede,     1.125rem)  * var(--root-ratio));
  --text-subtitle: calc(var(--wl-text-subtitle, 1.25rem)   * var(--root-ratio));
  --text-title:    calc(var(--wl-text-title,    1.5rem)    * var(--root-ratio));
  --text-display:  calc(var(--wl-text-display,  2rem)      * var(--root-ratio));

  /* Around 95 characters. Written in px because rem here means two different
     things depending on which stylesheet you are reading, and a measure is
     exactly the value nobody should have to convert in their head. The old 46rem
     was 460px, a column narrow enough that a reference table scrolled and the
     page read as a strip floating in the middle of the window. */
  --doc-measure: 820px;
  --toc-width: 220px;
}

/* --------------------------------------------------------------------------
   Paper. The site's palette, unchanged.
   -------------------------------------------------------------------------- */

.light {
  --paper:       var(--wl-background, #E3E4E0);
  --paper-panel: var(--wl-card, #DBDCD6);
  --paper-sunk:  var(--wl-muted, #D3D5CD);
  --ink:         var(--wl-foreground, #16161A);
  --ink-soft:    var(--wl-muted-foreground, #56585A);
  --rule:        var(--wl-border, #C6C8C1);
  --rule-strong: var(--wl-input, #A9ABA3);
  --accent:      var(--wl-ring, #7A4E00);      /* the house accent, as on the site */

  --bg: var(--paper);
  --fg: var(--ink);
  --sidebar-bg: var(--paper-panel);
  --sidebar-fg: var(--ink-soft);
  --sidebar-non-existant: var(--rule-strong);
  --sidebar-active: var(--accent);
  --sidebar-spacer: var(--rule);
  --scrollbar: var(--rule-strong);
  --icons: var(--ink-soft);
  --icons-hover: var(--ink);
  --links: var(--accent);
  --inline-code-color: var(--ink);
  --theme-popup-bg: var(--paper);
  --theme-popup-border: var(--rule);
  --theme-hover: var(--paper-sunk);
  --quote-bg: var(--paper-panel);
  --quote-border: var(--rule);
  --table-border-color: var(--rule);
  --table-header-bg: var(--paper-panel);
  --table-alternate-bg: transparent;
  --searchbar-border-color: var(--rule);
  --searchbar-bg: var(--paper);
  --searchbar-fg: var(--ink);
  --searchbar-shadow-color: var(--rule);
  --searchresults-header-fg: var(--ink-soft);
  --searchresults-border-color: var(--rule);
  --searchresults-li-bg: var(--paper-panel);
  --search-mark-bg: oklch(from var(--wl-warning, #7A4E00) calc(l + 0.32) c h);

  --code-bg: var(--paper-sunk);
  --code-fg: var(--ink);
  --code-border: var(--rule);
}

/* --------------------------------------------------------------------------
   The instrument. This is the black terminal, so this is where amber lives.
   -------------------------------------------------------------------------- */

.navy {
  --crt:          var(--wl-background, #0B0B0C);
  --crt-panel:    var(--wl-card, #121214);
  --crt-sunk:     var(--wl-muted, #161618);
  --accent:       var(--wl-ring, #FFB000);
  --phosphor:     var(--wl-terminal-yellow, #FFB000);
  --phosphor-dim: var(--wl-terminal-dim, #A87400);
  --ink:          var(--wl-foreground, #DEDFDA);
  --ink-soft:     var(--wl-muted-foreground, #8C8E88);
  --rule:         var(--wl-border, #26262A);
  --rule-strong:  var(--wl-input, #3A3A40);

  --bg: var(--crt);
  --fg: var(--ink);
  --sidebar-bg: var(--wl-sidebar, #0E0E10);
  --sidebar-fg: var(--ink-soft);
  --sidebar-non-existant: var(--wl-input, #4A4A50);
  --sidebar-active: var(--accent);
  --sidebar-spacer: var(--rule);
  --scrollbar: var(--rule-strong);
  --icons: var(--ink-soft);
  --icons-hover: var(--accent);
  --links: var(--accent);
  --inline-code-color: var(--ink);
  --theme-popup-bg: var(--crt-panel);
  --theme-popup-border: var(--rule);
  --theme-hover: var(--crt-sunk);
  --quote-bg: var(--crt-panel);
  --quote-border: var(--rule);
  --table-border-color: var(--rule);
  --table-header-bg: var(--crt-panel);
  --table-alternate-bg: transparent;
  --searchbar-border-color: var(--rule);
  --searchbar-bg: var(--crt-panel);
  --searchbar-fg: var(--ink);
  --searchbar-shadow-color: var(--wl-background, #000);
  --searchresults-header-fg: var(--ink-soft);
  --searchresults-border-color: var(--rule);
  --searchresults-li-bg: var(--crt-panel);
  --search-mark-bg: oklch(from var(--wl-terminal-yellow, #FFB000) calc(l - 0.42) c h);

  --code-bg: var(--crt-panel);
  --code-fg: var(--ink);
  --code-border: var(--rule);
}

/* The three built-in themes this design does not cover. A half-styled theme
   reads as a bug, so they are removed from the picker rather than left to
   render in mdBook's own colours. */
/* Buttons, not anchors, and hiding the button leaves its empty row behind, so
   the row is what gets hidden. */
#mdbook-theme-list li:has(#mdbook-theme-coal),
#mdbook-theme-list li:has(#mdbook-theme-ayu),
#mdbook-theme-list li:has(#mdbook-theme-rust) { display: none; }

/* --------------------------------------------------------------------------
   Page
   -------------------------------------------------------------------------- */

html { font-family: var(--font-body); -webkit-text-size-adjust: 100%; }

body { font-size: var(--text-body); line-height: var(--wl-leading-body); -webkit-font-smoothing: antialiased; }

/* mdBook centres `main` inside whatever the sidebar leaves, with
   `margin-inline: auto`. At a 460px measure that put the text in the middle of
   a 1100px band with 340px of nothing either side, so the page read as a strip
   floating in the window rather than as a document beside its contents. It is
   anchored to the sidebar now, and the space that frees on the right is where
   the page outline lives. */
.content main {
  max-width: var(--doc-measure);
  margin-inline-start: 0;
  margin-inline-end: auto;
  padding-inline-start: 1.5rem;
  /* The page title's box started level with the bottom of the menu bar on 37 of
     38 pages, measured: bar bottom 51, h1 top 51, gap 0. A heading's own top
     margin collapses straight through `main`, which has no padding or border to
     stop it, so the answer has to be padding here rather than a margin
     anywhere. index.md had been carrying a bare `#` on line 1 to buy the space;
     it renders to nothing at all, which is why that page measured 18 and the
     other 37 measured 0. */
  padding-block-start: 4rem;
}

/* Below the point where the outline plus the measure fit beside the sidebar,
   there is nothing to anchor to, so centring is the better answer again. */
@media (max-width: 1100px) {
  .content main { margin-inline: auto; padding-inline-start: 0; }
}

.content p, .content li { line-height: var(--wl-leading-body); }
.content p { margin: 0 0 1.15em; }
.content ul, .content ol { margin: 0 0 1.15em; padding-left: 1.35em; }
.content li + li { margin-top: 0.35em; }

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

:focus-visible { outline: 2px solid var(--links); outline-offset: 3px; }

/* --------------------------------------------------------------------------
   Type. Condensed display face for headings, exactly as the site does it.
   -------------------------------------------------------------------------- */

.content h1, .content h2, .content h3, .content h4 {
  font-family: var(--font-display);
  font-weight: var(--wl-weight-semibold);
  letter-spacing: var(--wl-tracking-section);
  line-height: var(--wl-leading-heading);
  text-wrap: balance;
}

.content h1 {
  font-size: var(--text-display);
  font-weight: var(--wl-weight-display);
  letter-spacing: var(--wl-tracking-hero);
  line-height: var(--wl-leading-hero);
  margin: 0 0 0.55em;
}

/* Whitespace separates sections, not a border. The one exception is h2, which
   marks the joints a reader scans for. */
.content h2 {
  font-size: var(--text-title);
  margin: 2.9em 0 0.75em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--rule);
}

.content h3 { font-size: var(--text-lede); margin: 2.2em 0 0.6em; }
.content h4 { font-size: var(--text-body); margin: 1.8em 0 0.5em; color: var(--ink-soft); }

.content h1 a.header, .content h2 a.header,
.content h3 a.header, .content h4 a.header { color: inherit; }

/* The paragraph directly under an h1 is the page's lede. */
.content h1 + p {
  font-size: var(--text-lede);
  line-height: var(--wl-leading-body);
  color: var(--ink-soft);
}

.content a { text-decoration: none; border-bottom: 1px solid transparent; }
.content a:hover { border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   Code. Mono means a machine emitted it, so it is never mixed into prose type.
   -------------------------------------------------------------------------- */

code { font-family: var(--font-mono); font-size: 0.875em; }

.content :not(pre) > code {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--wl-radius-control);
  padding: 0.05em 0.35em;
  color: var(--inline-code-color);
}

.content pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: var(--wl-radius-control);
  padding: 0.95rem 1.05rem;
  margin: 1.5em 0;
  overflow-x: auto;
}

.content pre code {
  font-size: 0.845em;
  line-height: var(--wl-leading-body);
  background: none;
  border: 0;
  padding: 0;
}

.content pre > .buttons { opacity: 0; transition: opacity var(--wl-duration-fast) var(--wl-ease-out); }
.content pre:hover > .buttons { opacity: 0.6; }

/* --------------------------------------------------------------------------
   Tables. This documentation is mostly reference, so these carry real weight.
   Horizontal rules only: vertical ones turn a table into a grid and a grid is
   read cell by cell instead of row by row.
   -------------------------------------------------------------------------- */

.content table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  margin: 1.6em 0;
  font-size: var(--text-body);
}

.content table thead th {
  font-family: var(--font-mono);
  font-weight: var(--wl-weight-body);
  font-size: var(--text-label);
  letter-spacing: var(--wl-tracking-label);
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--rule-strong);
  padding: 0 0.9em 0.55em 0;
}

.content table td {
  border: 0;
  border-bottom: 1px solid var(--rule);
  padding: 0.6em 0.9em 0.6em 0;
  vertical-align: top;
  line-height: 1.6;
}

.content table tbody tr:last-child td { border-bottom: 0; }
.content table td:last-child, .content table th:last-child { padding-right: 0; }

/* A reference table must scroll inside itself. The page body never does. */
.content .table-wrapper { overflow-x: auto; }

/* --------------------------------------------------------------------------
   Blockquote, used here for the one caveat a page is allowed.
   -------------------------------------------------------------------------- */

blockquote {
  border: 0;
  border-left: 2px solid var(--links);
  background: var(--quote-bg);
  padding: 0.95em 1.15em;
  margin: 1.7em 0;
  color: var(--fg);
}
blockquote p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Sidebar. Grouped, quiet, and the group label is the machine-ish mono
   eyebrow the site uses for the same job.
   -------------------------------------------------------------------------- */

#mdbook-sidebar { font-size: var(--text-body); }
#mdbook-sidebar .sidebar-scrollbox { padding: 1.5rem 1.5rem 4rem; }

.chapter li.chapter-item { line-height: 1.5; margin: 0.34em 0; }

.chapter li.chapter-item a {
  padding: 0.16em 0;
  border-bottom: 1px solid transparent;
}
.chapter li.chapter-item a:hover { color: var(--fg); }
.chapter li.chapter-item a.active { font-weight: var(--wl-weight-medium); }

.chapter li.part-title {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--wl-weight-body);
  letter-spacing: var(--wl-tracking-label);
  text-transform: uppercase;
  color: var(--sidebar-non-existant);
  margin: 2.2em 0 0.7em;
  padding: 0;
}
.chapter li.part-title:first-child { margin-top: 0; }

/* Nested chapters sit under their parent without a bullet or a number. */
.chapter li > ol.section { padding-left: 0.9rem; }

#mdbook-menu-bar { background: var(--bg); border-bottom: 1px solid transparent; }
#mdbook-menu-bar.sticky, #mdbook-menu-bar:not(.folded) { border-bottom-color: var(--rule); }

/* mdBook leaves the bar's three groups to stretch to its full height and lays
   `.right-buttons` out as a block, which had three consequences at once: the
   site links became a row of their own stacked above the icons, the icons sat
   at a different height from the wordmark, and the sidebar toggle rendered
   15px higher than the two buttons beside it because a label and a button
   settle their line boxes differently. The bar was 77px of mostly air.

   One centred flex row for the bar, one for each group. */
#mdbook-menu-bar {
  display: flex;
  align-items: center;
  min-height: var(--menu-bar-height);
}
#mdbook-menu-bar .left-buttons,
#mdbook-menu-bar .right-buttons {
  display: flex;
  align-items: center;
  gap: 0.2rem;
}
/* The theme picker is absolutely positioned when it opens, so it is out of
   flow and takes no space in the row it now lives in. */
/* 3.4rem is 34px against this book's 10px root, which is the 3rem icon mdBook
   draws plus a little room. Sizing the box under the icon is what made it
   overflow its own button. */
#mdbook-menu-bar .icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3.4rem;
  width: 3.4rem;
  padding: 0;
}

#mdbook-menu-bar h1.menu-title {
  font-family: var(--font-display);
  font-weight: var(--wl-weight-display);
  font-size: var(--text-lede);
  letter-spacing: 0.01em;
  /* The title is the only thing between the two groups, so it takes the slack
     and centres itself in what is left rather than sitting wherever the
     preceding group happens to end. */
  flex: 1;
  margin: 0;
  text-align: center;
}

/* --------------------------------------------------------------------------
   The way back to the site (#477), injected by theme/siteframe.js.

   The manual matched the palette and not the frame, so nothing on 37 pages
   linked home and `Docs` in the site navbar was a one-way door. These are the
   site's own destinations in the site's own quiet style, not a second
   navigation: the sidebar is the navigation.
   -------------------------------------------------------------------------- */

#mdbook-menu-bar .menu-title .site-home {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  /* inline-flex, not inline: the mark and the wordmark share one baseline-free
     row so the underline on hover runs under both rather than stepping. */
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
}
#mdbook-menu-bar .menu-title .site-home:hover {
  border-bottom-color: currentColor;
}

/* Sized in em so it tracks the wordmark through the menu bar's own font-size
   changes at narrow widths, rather than needing a second media query. */
#mdbook-menu-bar .site-mark {
  display: block;
  height: 1.4em;
  width: 1.4em;
}

/* The translation notice on every Indonesian page (#539), injected by
   theme/siteframe.js. Quiet on purpose: it is a provenance note, not a warning,
   and a reader who wanted the English page would have opened it. */
.translation-note {
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--wl-muted-foreground, #6b7280);
  border-left: 2px solid var(--wl-border, #d8dbe0);
  padding: 0 0 0 0.85rem;
  margin: 0 0 2rem;
}

.site-links {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-right: 0.9rem;
  padding-right: 0.9rem;
  border-right: 1px solid var(--rule);
  /* Stops the four links wrapping under the icons on a narrow desktop, which
     is the shape this whole block exists to prevent. */
  flex: none;
  white-space: nowrap;
}

.site-links a {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding: 2px 0;
}
.site-links a:hover {
  color: var(--fg);
  border-bottom-color: var(--fg);
}

/* On a phone the icon buttons already crowd the bar, and the sidebar toggle
   matters more there than a link to the journal. */
@media (max-width: 700px) {
  .site-links { display: none; }
}

/* --------------------------------------------------------------------------
   Language menu, built by theme/siteframe.js.

   A `<details>` element, so open/close, Escape and keyboard focus come from the
   browser rather than from script. It survives on a phone where `.site-links`
   does not: a reader who arrived from a translated README is exactly the reader
   most likely to be on one.
   -------------------------------------------------------------------------- */

.lang-menu {
  position: relative;
  margin-right: 0.6rem;
  flex: none;
}

.lang-menu > summary {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--ink-soft);
  cursor: pointer;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  list-style: none;
  user-select: none;
}

/* Both spellings: `::marker` is the standard and Safari still needs the WebKit
   pseudo-element to drop the disclosure triangle. */
.lang-menu > summary::marker,
.lang-menu > summary::-webkit-details-marker {
  display: none;
  content: '';
}

.lang-menu > summary:hover,
.lang-menu[open] > summary {
  color: var(--fg);
  border-color: var(--fg);
}

.lang-list {
  position: absolute;
  top: calc(100% + 6px);
  /* Anchored right: the menu sits near the end of the bar, so a left-anchored
     panel would hang off the viewport on a narrow window. */
  right: 0;
  z-index: 60;
  min-width: 11rem;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 0.35rem 0;
  box-shadow: 0 6px 20px rgb(0 0 0 / 0.18);
}

.lang-list a {
  font-family: var(--font-body);
  font-size: var(--text-meta);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
}

.lang-list a:hover {
  color: var(--fg);
  background: var(--rule);
}

/* --------------------------------------------------------------------------
   Right-hand page outline, built by theme/pagetoc.js.
   -------------------------------------------------------------------------- */

.pagetoc {
  position: fixed;
  top: 5rem;
  /* The measure is anchored to the sidebar, so the outline sits in what is left
     to the right of it rather than in a gap either side of a centred column.
     Clamped so it never leaves the window on a narrow desktop. */
  right: max(1.5rem, calc(100vw - var(--sidebar-width, 300px) - var(--doc-measure) - var(--toc-width) - 6rem));
  width: var(--toc-width);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  font-size: var(--text-meta);
  line-height: 1.5;
  border-left: 1px solid var(--rule);
  padding-left: 0.9rem;
}

.pagetoc-label {
  font-family: var(--font-mono);
  font-size: var(--text-label);
  letter-spacing: var(--wl-tracking-label);
  text-transform: uppercase;
  /* --sidebar-non-existant is the greyed-out-chapter colour and is far too
     faint to label a rail with. */
  color: var(--ink-soft);
  margin-bottom: 0.7em;
}

/* `.content a:link` in chrome.css is 0,2,1 and this outline lives inside
   .content, so a bare `.pagetoc a` lost and every entry rendered in the accent
   as though all five were current. Matching :link here is what levels it. */
.pagetoc a:link,
.pagetoc a:visited {
  display: block;
  color: var(--ink-soft);
  padding: 0.24em 0;
  text-decoration: none;
  border: 0;
}
.pagetoc a:link:hover, .pagetoc a:visited:hover { color: var(--fg); }
.pagetoc a.active:link, .pagetoc a.active:visited { color: var(--links); }
.pagetoc a.h3 { padding-left: 0.8rem; font-size: 0.95em; }

/* Below this the outline has nowhere to live without stealing from the text.
   1500 was set against a centred 460px column and never fired on a 1440 laptop,
   so the outline this theme is designed around was invisible on the most common
   screen there is. Sidebar 300 plus measure 820 plus outline 220 plus gutters
   fits inside 1440 with room to spare. */
@media (max-width: 1400px) { .pagetoc { display: none; } }

/* --------------------------------------------------------------------------
   Search
   -------------------------------------------------------------------------- */

#mdbook-searchbar {
  font-family: var(--font-body);
  border-radius: var(--wl-radius-control);
  padding: 0.6em 0.8em;
}
#mdbook-searchresults a { border-bottom: 0; }
mark { border-radius: var(--wl-radius-control); padding: 0 0.15em; }

/* --------------------------------------------------------------------------
   Footer navigation
   -------------------------------------------------------------------------- */

.nav-chapters { font-family: var(--font-body); }
.nav-wrapper { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }

/* mdBook's wide-screen chapter arrows are full-height columns pinned to the
   edges of `.page`. That worked while the text was centred with 340px of empty
   space either side. Anchored to the sidebar, the left one sits on top of the
   first words of every paragraph. The pair at the foot of the article says the
   same thing with the chapter's name attached, so the arrows go and that pair
   stops being mobile-only. */
.nav-wide-wrapper { display: none; }
/* chrome.css sets `.nav-wrapper { display: none }` and only turns it back on
   under 1080px, because above that the arrows were doing the job. With them
   gone it has to be on at every width, or a desktop reader has no way to the
   next chapter at all. */
.content .nav-wrapper { display: block; }

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media (max-width: 700px) {
  .content h2 { font-size: var(--text-subtitle); }
  .content table { font-size: var(--text-meta); }
}