/* virtio-accel.org docs reader.
 *
 * mdBook ships a fixed set of built-in themes and picks one by class on
 * <html>. Rather than fork index.hbs, we rebind two of them:
 *
 *   .navy  -> the dark terminal palette the landing page uses (the default)
 *   .light -> a warm-neutral light companion for long-form reading
 *
 * Everything below the palette block is structural: type scale, chrome, and
 * the code/table/callout treatments. Keep the token values in sync with the
 * inline <style> in website/content/index.html.
 */

@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* ---------------------------------------------------------------- globals */

:root {
  --content-max-width: 820px;
  --sidebar-target-width: 310px;
  --menu-bar-height: 56px;
  --page-padding: 20px;

  --va-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --va-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --mono-font: var(--va-mono);
  --code-font-size: 0.86em;
}

/* ------------------------------------------------------------ dark theme */

.navy {
  --bg: oklch(0.170 0.012 265);
  --fg: oklch(0.860 0.008 265);

  --va-raised: oklch(0.195 0.012 265);
  --va-sunken: oklch(0.140 0.012 265);
  --va-rule: oklch(0.280 0.014 265);
  --va-rule-strong: oklch(0.340 0.016 265);
  --va-dim: oklch(0.600 0.012 265);
  --va-accent: oklch(0.800 0.160 165);
  --va-cyan: oklch(0.800 0.160 200);

  --sidebar-bg: oklch(0.140 0.012 265);
  --sidebar-fg: oklch(0.760 0.010 265);
  --sidebar-non-existant: oklch(0.520 0.012 265);
  --sidebar-active: oklch(0.800 0.160 165);
  --sidebar-spacer: oklch(0.260 0.014 265);
  --sidebar-header-border-color: oklch(0.280 0.014 265);

  --scrollbar: oklch(0.360 0.016 265);

  --icons: oklch(0.560 0.012 265);
  --icons-hover: oklch(0.880 0.010 265);

  --links: oklch(0.800 0.160 165);
  --inline-code-color: oklch(0.820 0.120 200);

  --theme-popup-bg: oklch(0.150 0.012 265);
  --theme-popup-border: oklch(0.320 0.016 265);
  --theme-hover: oklch(0.220 0.014 265);

  --quote-bg: oklch(0.200 0.014 265);
  --quote-border: oklch(0.300 0.016 265);

  --warning-border: oklch(0.800 0.160 75);

  --table-border-color: oklch(0.280 0.014 265);
  --table-header-bg: oklch(0.230 0.014 265);
  --table-alternate-bg: oklch(0.186 0.012 265);

  --searchbar-border-color: oklch(0.340 0.016 265);
  --searchbar-bg: oklch(0.140 0.012 265);
  --searchbar-fg: oklch(0.900 0.008 265);
  --searchbar-shadow-color: oklch(0.800 0.160 165 / 0.35);
  --searchresults-header-fg: oklch(0.600 0.012 265);
  --searchresults-border-color: oklch(0.280 0.014 265);
  --searchresults-li-bg: oklch(0.195 0.012 265);
  --search-mark-bg: oklch(0.800 0.160 165 / 0.28);

  --color-scheme: dark;

  /* Approximates --icons / --sidebar-active for the copy-to-clipboard glyph. */
  --copy-button-filter: invert(62%) sepia(6%) saturate(500%) hue-rotate(196deg) brightness(92%) contrast(88%);
  --copy-button-filter-hover: invert(78%) sepia(46%) saturate(495%) hue-rotate(102deg) brightness(97%) contrast(92%);

  --footnote-highlight: oklch(0.800 0.160 165 / 0.4);
  --overlay-bg: oklch(0.10 0.012 265 / 0.6);

  --blockquote-note-color: oklch(0.800 0.160 200);
  --blockquote-tip-color: oklch(0.800 0.160 165);
  --blockquote-important-color: oklch(0.780 0.150 300);
  --blockquote-warning-color: oklch(0.800 0.160 75);
  --blockquote-caution-color: oklch(0.700 0.190 25);
}

/* ----------------------------------------------------------- light theme */

.light, html:not(.js) {
  --bg: oklch(0.985 0.003 265);
  --fg: oklch(0.280 0.014 265);

  --va-raised: oklch(1 0 0);
  --va-sunken: oklch(0.965 0.004 265);
  --va-rule: oklch(0.890 0.006 265);
  --va-rule-strong: oklch(0.830 0.008 265);
  --va-dim: oklch(0.540 0.012 265);
  --va-accent: oklch(0.520 0.130 165);
  --va-cyan: oklch(0.500 0.120 235);

  --sidebar-bg: oklch(0.960 0.004 265);
  --sidebar-fg: oklch(0.360 0.012 265);
  --sidebar-non-existant: oklch(0.620 0.010 265);
  --sidebar-active: oklch(0.480 0.140 165);
  --sidebar-spacer: oklch(0.890 0.006 265);
  --sidebar-header-border-color: oklch(0.880 0.006 265);

  --scrollbar: oklch(0.760 0.010 265);

  --icons: oklch(0.620 0.010 265);
  --icons-hover: oklch(0.300 0.014 265);

  --links: oklch(0.480 0.140 165);
  --inline-code-color: oklch(0.470 0.120 235);

  --theme-popup-bg: oklch(1 0 0);
  --theme-popup-border: oklch(0.870 0.006 265);
  --theme-hover: oklch(0.950 0.005 265);

  --quote-bg: oklch(0.960 0.006 265);
  --quote-border: oklch(0.880 0.008 265);

  --warning-border: oklch(0.680 0.150 70);

  --table-border-color: oklch(0.890 0.006 265);
  --table-header-bg: oklch(0.945 0.005 265);
  --table-alternate-bg: oklch(0.972 0.004 265);

  --searchbar-border-color: oklch(0.840 0.008 265);
  --searchbar-bg: oklch(1 0 0);
  --searchbar-fg: oklch(0.280 0.014 265);
  --searchbar-shadow-color: oklch(0.520 0.130 165 / 0.3);
  --searchresults-header-fg: oklch(0.540 0.012 265);
  --searchresults-border-color: oklch(0.890 0.006 265);
  --searchresults-li-bg: oklch(0.972 0.004 265);
  --search-mark-bg: oklch(0.520 0.130 165 / 0.20);

  --color-scheme: light;

  --copy-button-filter: invert(45%) sepia(6%) saturate(400%) hue-rotate(196deg) brightness(95%) contrast(88%);
  --copy-button-filter-hover: invert(38%) sepia(40%) saturate(700%) hue-rotate(110deg) brightness(92%) contrast(95%);

  --footnote-highlight: oklch(0.520 0.130 165 / 0.35);
  --overlay-bg: oklch(0.30 0.01 265 / 0.35);

  --blockquote-note-color: oklch(0.500 0.130 235);
  --blockquote-tip-color: oklch(0.480 0.140 165);
  --blockquote-important-color: oklch(0.480 0.150 300);
  --blockquote-warning-color: oklch(0.620 0.150 70);
  --blockquote-caution-color: oklch(0.520 0.190 25);
}

/* ------------------------------------------------------------- typography */

html { font-family: var(--va-sans); }

body {
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.content { overflow-wrap: break-word; }

.content h1,
.content h2,
.content h3,
.content h4 {
  font-family: var(--va-sans);
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.2;
  text-wrap: balance;
}

.content h1 { font-size: 2.15em; margin-block: 0 0.7em; letter-spacing: -0.032em; }
.content h2 {
  font-size: 1.5em;
  margin-block: 2.2em 0.7em;
  padding-block-end: 0.35em;
  border-block-end: 1px solid var(--va-rule);
}
.content h3 { font-size: 1.18em; margin-block: 1.9em 0.6em; }
.content h4 { font-size: 1.02em; margin-block: 1.7em 0.5em; color: var(--va-dim); }

.content p,
.content li { text-wrap: pretty; }

.content p { margin-block: 0 1.15em; }

.content a:link,
.content a:visited { text-decoration: none; border-block-end: 1px solid transparent; }
.content a:hover { border-block-end-color: currentColor; }

/* Header anchor links stay quiet until hovered. */
.content .header:link,
.content .header:visited { color: var(--fg); border: none; }
.content .header:hover { color: var(--links); border: none; }

/* --------------------------------------------------------------- chrome */

#mdbook-menu-bar,
#mdbook-menu-bar.sticky,
#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
#mdbook-menu-bar:hover {
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-block-end: 1px solid var(--va-rule);
}

.menu-title {
  font-family: var(--va-mono);
  font-size: 0.82em;
  font-weight: 500;
  letter-spacing: 0.01em;
  opacity: 0.75;
}

.icon-button { border-radius: 6px; }
.icon-button:hover { background: var(--theme-hover); }

/* Brand header injected by theme/js/site.js — links back to the landing page. */
.va-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 22px;
  height: var(--menu-bar-height);
  flex: none;
  color: var(--sidebar-fg);
  text-decoration: none;
  border-block-end: 1px solid var(--sidebar-spacer);
}
.va-brand:hover { color: var(--sidebar-active); }

/* The logo mark, traced from assets/logo/logo-v2.png. Applied as a mask rather
 * than an <img> so it paints in currentColor and stays legible when the reader
 * switches to the light theme. The URL resolves against this stylesheet, which
 * mdBook serves from theme/css/, so it is the same from any page depth. */
.va-brand .va-mark {
  display: block;
  flex: none;
  width: 21px;
  height: 18px;
  background: var(--va-accent);
  -webkit-mask: url("../../logo-mark.svg") no-repeat center / contain;
  mask: url("../../logo-mark.svg") no-repeat center / contain;
}
.va-brand b {
  font-family: var(--va-mono);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------- sidebar */

.sidebar {
  border-inline-end: 1px solid var(--va-rule);
  /* Stock mdBook stacks the brand and the table of contents on top of each
   * other: .sidebar-scrollbox is `position: absolute; inset: 0`, so it covers
   * the whole sidebar and swallows clicks on anything behind it. Lay the
   * sidebar out as a column and put the scrollbox back in flow instead.
   * The resize handle stays absolutely positioned and is unaffected, and the
   * show/hide transform still applies to .sidebar itself. */
  display: flex;
  flex-direction: column;
}

.sidebar .sidebar-scrollbox {
  position: relative;
  inset: auto;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 12px 40px;
}

.chapter li.chapter-item {
  font-size: 14.5px;
  line-height: 1.45;
  margin-block: 1px;
}

.chapter li a {
  border-radius: 6px;
  padding: 6px 10px;
}
.chapter li a:hover { background: var(--theme-hover); }
.chapter li a.active {
  font-weight: 600;
  background: color-mix(in oklab, var(--sidebar-active) 12%, transparent);
}

.chapter li.part-title {
  font-family: var(--va-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sidebar-non-existant);
  margin-block: 22px 8px;
  padding-inline: 10px;
}

/* ------------------------------------------------- "on this page" rail */

/* theme/js/site.js moves mdBook's heading tree out of the sidebar and into
 * #va-toc. Keeping it out of the chapter list is what stops the sidebar
 * jumping on every navigation -- see the comment in that file. */

:root { --va-toc-width: 248px; }

#va-toc {
  margin-block: 0 1.6em;
  border: 1px solid var(--va-rule);
  border-radius: 10px;
  padding: 4px 14px 12px;
  background: var(--va-raised);
}

#va-toc > summary {
  font-family: var(--va-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--va-dim);
  padding-block: 10px;
  cursor: pointer;
}

#va-toc .on-this-page ol {
  list-style: none;
  margin: 0;
  padding-inline-start: 0;
}

/* Nested heading levels indent; the outermost does not. */
#va-toc .on-this-page ol ol { padding-inline-start: 12px; }

#va-toc .header-item { margin-block: 1px; }

#va-toc .chapter-link-wrapper { display: flex; align-items: baseline; gap: 4px; }

#va-toc a.header-in-summary {
  display: block;
  flex: 1 1 auto;
  font-size: 13px;
  line-height: 1.4;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--sidebar-fg);
  text-decoration: none;
  border: none;
}
#va-toc a.header-in-summary:hover {
  background: var(--theme-hover);
  color: var(--fg);
}
#va-toc a.header-in-summary.current-header {
  color: var(--sidebar-active);
  background: color-mix(in oklab, var(--sidebar-active) 12%, transparent);
}

#va-toc .chapter-fold-toggle {
  flex: none;
  cursor: pointer;
  color: var(--va-dim);
  font-size: 9px;
  padding: 4px;
  line-height: 1;
}
#va-toc .chapter-fold-toggle div { transition: transform 0.15s; }
#va-toc .header-item.expanded > .chapter-link-wrapper > .chapter-fold-toggle div {
  transform: rotate(90deg);
}
#va-toc .header-item:not(.expanded) > ol { display: none; }

/* Wide screens: the rail gets its own column beside the content and sticks.
 * Below this it stays a plain collapsible block above the content. */
@media (min-width: 1280px) {
  #mdbook-content.va-has-toc {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--va-toc-width);
    column-gap: 40px;
    align-items: start;
    /* mdBook sets `overflow-y: auto` here, which makes this element the
     * sticky containing block for the rail -- and since it has no height of
     * its own it never scrolls, so the rail would just scroll away with the
     * page. Long code blocks and wide tables carry their own overflow-x. */
    overflow: visible;
  }

  #mdbook-content.va-has-toc > main { grid-column: 1; grid-row: 1; }

  #va-toc {
    grid-column: 2;
    grid-row: 1;
    position: sticky;
    top: calc(var(--menu-bar-height) + 18px);
    max-height: calc(100vh - var(--menu-bar-height) - 46px);
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-block: 0;
  }

  /* Always open in rail form, so the summary is a title rather than a control. */
  #va-toc > summary {
    list-style: none;
    cursor: default;
    pointer-events: none;
  }
  #va-toc > summary::-webkit-details-marker { display: none; }
  #va-toc > summary::marker { content: ""; }

  #mdbook-content.va-has-toc > .nav-wrapper { grid-column: 1 / -1; }
}

/* The `va-has-toc` class is set synchronously by site.js before first paint,
 * so the column is reserved up front rather than when the tree arrives at
 * DOMContentLoaded -- the content never visibly narrows on load, and a page
 * with no headings keeps the full width. */

@media print {
  #va-toc { display: none; }
}

/* ----------------------------------------------------------------- code */

.content code {
  font-family: var(--va-mono);
  font-size: var(--code-font-size);
}

.content :not(pre) > code {
  background: color-mix(in oklab, var(--inline-code-color) 11%, transparent);
  padding: 0.14em 0.36em;
  border-radius: 4px;
}

.content pre {
  background: var(--va-sunken);
  border: 1px solid var(--va-rule);
  border-radius: 10px;
  padding: 0;
}

.content pre > code {
  display: block;
  padding: 16px 18px;
  line-height: 1.72;
  font-size: 0.82em;
  background: none;
}

/* mdBook draws code-block buttons in the top-right corner. */
.content pre > .buttons { inset-block-start: 8px; inset-inline-end: 10px; }

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

.content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 14.5px;
  border: 1px solid var(--table-border-color);
  border-radius: 10px;
  overflow: hidden;
  margin-block: 1.4em;
}

.content table thead th {
  background: var(--table-header-bg);
  font-family: var(--va-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--va-dim);
  border: none;
  border-block-end: 1px solid var(--table-border-color);
  padding: 11px 14px;
  text-align: start;
}

.content table td {
  border: none;
  border-block-end: 1px solid var(--table-border-color);
  padding: 11px 14px;
  vertical-align: top;
}

.content table tbody tr:last-child td { border-block-end: none; }
.content table tbody tr:nth-child(2n) { background: var(--table-alternate-bg); }

/* Wide matrices (the backend/operator tables) scroll instead of overflowing. */
.content .table-wrapper { overflow-x: auto; }

/* ------------------------------------------------------------ callouts */

.content blockquote {
  background: var(--quote-bg);
  border: 1px solid var(--quote-border);
  border-inline-start: 3px solid var(--va-accent);
  border-radius: 0 8px 8px 0;
  padding: 14px 18px;
  margin-block: 1.4em;
  color: var(--fg);
}
.content blockquote p:last-child { margin-block-end: 0; }

.content hr {
  border: none;
  border-block-start: 1px solid var(--va-rule);
  margin-block: 2.4em;
}

/* -------------------------------------------------------------- search */

#mdbook-searchbar {
  border-radius: 8px;
  font-family: var(--va-sans);
  padding: 10px 12px;
}

.searchresults-header {
  font-family: var(--va-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* --------------------------------------------- floating chrome overlaps */

/* The menu bar is sticky and translucent, and nothing downstream reserved
 * space for it: the first heading of every chapter renders flush against its
 * bottom edge (h1 top and bar bottom both land on y=57). Give the measure room
 * to start below the bar instead of touching it. */
.content main {
  padding-block-start: 1.4rem;
}

/* A sticky bar also swallows anchor targets: `#section` links scroll the
 * heading to y=0, which is underneath the bar. `scroll-margin-top` is what
 * keeps the heading clear of it. */
.content h1,
.content h2,
.content h3,
.content h4 {
  scroll-margin-top: calc(var(--menu-bar-height, 57px) + 16px);
}

/* ------------------------------------------------------- nav & printing */

.nav-chapters {
  border-radius: 8px;
  font-size: 0.9em;
}

/* The fixed prev/next chevrons need a 90px column beside the measure, and this
 * theme never has one to give. `.content` is a two-column grid -- the prose
 * measure plus the on-this-page table of contents (`.va-has-toc`) -- so `main`
 * begins 5px from the content edge at every viewport width and the left
 * chevron always lands on top of the text. Widening the window does not help;
 * the extra space goes to the grid, not to a gutter.
 *
 * Hide them. The prev/next links at the foot of each chapter already carry the
 * same navigation, and unlike the chevrons they never cover the prose. */
.nav-chapters {
  display: none;
}

.mobile-nav-chapters {
  display: block;
}

/* The resize handle sits in the same gutter as the sidebar edge; keep it from
 * drawing over content that scrolls past it. */
.sidebar-resize-handle {
  z-index: 100;
}

@media print {
  .va-brand { display: none; }
  .content pre { border-color: #ccc; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}