/* CVDLink documentation theme
   Values taken from the running CVDLink Platform (platform.cvdlink.simavi.ro),
   so that the documentation and the application present one interface.

   Light:  content #ffffff on ground #eeeeee, text #324F3F, borders #a1dab9
   Dark:   content #212121 on ground #121212, text #ffffff, primary #698E7A
   Type:   Lato, 14px base, headings 600 weight at 17.5px
   Shape:  6px radius, flat surfaces with no shadow */

/* Lato is served from this site rather than an external service, so the
   documentation renders identically without internet access. */

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/lato-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/lato-700.woff2') format('woff2');
}

:root {
  --cvd-primary:       #546F60;
  --cvd-primary-text:  #ffffff;

  /* Active navigation item. The lighter accent is used on the light theme
     and the darker one on the dark theme, each paired with the text colour
     that meets the WCAG AA contrast minimum of 4.5:1 against it. */
  --cvd-nav-active-bg:    #698E7A;
  --cvd-nav-active-text:  #f0f0e6;
  --cvd-nav-active-hover: #546F60;
  --cvd-content:       #ffffff;
  --cvd-ground:        #eeeeee;
  --cvd-border:        #a1dab9;
  --cvd-border-soft:   #d9ebe1;
  --cvd-text:          #324F3F;
  --cvd-text-muted:    #212121;
  --cvd-surface-50:    #f0f0e6;
  --cvd-code-bg:       #f0f0e6;
  --cvd-danger:        #D85164;
  --cvd-radius:        6px;

  --cvd-font: Lato, "Segoe UI", system-ui, -apple-system, sans-serif;
  --cvd-font-mono: "Cascadia Mono", Consolas, "Courier New", monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cvd-primary:      #698E7A;
    --cvd-primary-text: #ffffff;
    --cvd-nav-active-bg:    #546F60;   /* the darker accent on the dark theme */
    --cvd-nav-active-text:  #ffffff;   /* 5.50:1 on #546F60 */
    --cvd-nav-active-hover: #698E7A;
    --cvd-content:      #212121;
    --cvd-ground:       #121212;
    --cvd-border:       #324F3F;
    --cvd-border-soft:  #2a3a30;
    --cvd-text:         #ffffff;
    --cvd-text-muted:   #b9c2bb;
    --cvd-surface-50:   #1a1f1b;
    --cvd-code-bg:      #1a1f1b;
  }
}

/* An explicit choice always wins over the browser setting. The light values
   are restated here so they override the media query block above. */

:root[data-theme="light"] {
  --cvd-primary:         #546F60;
  --cvd-primary-text:    #ffffff;
  --cvd-nav-active-bg:    #698E7A;
  --cvd-nav-active-text:  #f0f0e6;
  --cvd-nav-active-hover: #546F60;
  --cvd-content:         #ffffff;
  --cvd-ground:          #eeeeee;
  --cvd-border:          #a1dab9;
  --cvd-border-soft:     #d9ebe1;
  --cvd-text:            #324F3F;
  --cvd-text-muted:      #212121;
  --cvd-surface-50:      #f0f0e6;
  --cvd-code-bg:         #f0f0e6;
}

:root[data-theme="dark"] {
  --cvd-primary:      #698E7A;
  --cvd-primary-text: #ffffff;
  --cvd-nav-active-bg:    #546F60;
  --cvd-nav-active-text:  #ffffff;
  --cvd-nav-active-hover: #698E7A;
  --cvd-content:      #212121;
  --cvd-ground:       #121212;
  --cvd-border:       #324F3F;
  --cvd-border-soft:  #2a3a30;
  --cvd-text:         #ffffff;
  --cvd-text-muted:   #b9c2bb;
  --cvd-surface-50:   #1a1f1b;
  --cvd-code-bg:      #1a1f1b;
}

/* Typography: Lato at 14px, matching the platform */

html, body, .wy-body-for-nav {
  background: var(--cvd-ground);
}

/* Theme change is eased rather than abrupt. Limited to colour properties so
   that layout and scrolling are unaffected, and disabled for readers who
   have asked for reduced motion. */

body,
.wy-nav-side,
.wy-nav-content,
.wy-nav-content-wrap,
.wy-side-nav-search,
.wy-nav-top,
.wy-menu-vertical a,
.rst-versions,
.rst-versions .rst-current-version,
.rst-content .admonition,
.rst-content pre,
.highlight,
.rst-content code,
.rst-content table.docutils td,
.rst-content table.docutils thead th,
.cvd-theme-toggle,
.cvd-search-button,
.wy-side-nav-search input[type="text"] {
  transition: background-color 220ms ease, color 220ms ease,
              border-color 220ms ease;
}

.cvd-theme-toggle svg { transition: opacity 180ms ease; }

/* Where the browser supports view transitions, the new theme is revealed as
   a circle growing from the control that was activated. The colour
   transitions above are suppressed during the reveal so that the two
   effects do not run at once. */

/* The outgoing theme stays still while the incoming one is clipped open,
   so the circle reads as a reveal rather than a cross-fade. */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

html.cvd-theme-switching body,
html.cvd-theme-switching .wy-nav-side,
html.cvd-theme-switching .wy-nav-content,
html.cvd-theme-switching .wy-nav-content-wrap,
html.cvd-theme-switching .wy-side-nav-search,
html.cvd-theme-switching .wy-menu-vertical a,
html.cvd-theme-switching .rst-versions,
html.cvd-theme-switching .rst-content .admonition,
html.cvd-theme-switching .rst-content pre,
html.cvd-theme-switching .rst-content code {
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--cvd-font);
  color: var(--cvd-text);
  font-size: 14px;
  line-height: 1.6;
}

.rst-content h1,
.rst-content h2,
.rst-content h3,
.rst-content h4,
.rst-content h5,
.rst-content h6 {
  font-family: var(--cvd-font);
  color: var(--cvd-text);
  font-weight: 700;
  letter-spacing: 0;
}

/* The platform sets section titles at 17.5px / 600. Page titles are given
   slightly more presence; deeper levels step down toward body size. */

.rst-content h1 {
  font-size: 1.5rem;
  margin: 0 0 1rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--cvd-border);
}

.rst-content h2 {
  font-size: 1.25rem;
  margin: 2rem 0 0.75rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--cvd-border-soft);
}

.rst-content h3 { font-size: 1.05rem; margin: 1.6rem 0 0.5rem; }

.rst-content h4 {
  font-size: 0.95rem;
  color: var(--cvd-text-muted);
  margin: 1.3rem 0 0.4rem;
}

.rst-content p { margin-bottom: 1rem; }

/* Lists are indented so that markers sit inside the text column rather than
   in the margin, and nested levels step in consistently. */

.rst-content .section ul,
.rst-content .section ol,
.rst-content ul,
.rst-content ol {
  padding-left: 1.5rem;
  margin: 0 0 1rem;
}

.rst-content ul ul,
.rst-content ol ol,
.rst-content ul ol,
.rst-content ol ul {
  padding-left: 1.4rem;
  margin: 0.3rem 0 0.3rem;
}

/* The theme also indents each item, which would double the step. The item
   margin is cleared so the indentation comes from the list alone. */

.rst-content .section ul li,
.rst-content .section ol li,
.rst-content ul li,
.rst-content ol li {
  margin-left: 0;
  margin-bottom: 0.3rem;
}

.rst-content ul li p:last-child,
.rst-content ol li p:last-child { margin-bottom: 0; }

/* The breadcrumb trail is a list but should not carry list indentation */
.rst-content ul.wy-breadcrumbs { padding-left: 0; margin-bottom: 0; }

/* Links */

.rst-content a,
.rst-content a:visited { color: var(--cvd-primary); text-decoration: none; }
.rst-content a:hover   { color: var(--cvd-text); text-decoration: underline; }

/* Sidebar: a white panel with a mint border, as the platform uses.
   The theme paints several nested elements, so each is set explicitly. */

.wy-nav-side,
.wy-side-scroll,
.wy-menu-vertical,
.wy-nav-side > .wy-side-scroll > .wy-menu {
  background: var(--cvd-content);
}

.wy-nav-side {
  border-right: 1px solid var(--cvd-border);
  color: var(--cvd-text);
}

/* The theme places a dark strip beneath the navigation list */

.wy-nav-side .wy-menu-vertical + *,
.wy-side-nav-search ~ div[role="navigation"],
nav.wy-nav-side div.wy-side-scroll > div:last-child:empty {
  background: var(--cvd-content);
}

/* Header: logo on the left, search as an icon on the right, as the
   platform topbar arranges them. The search field opens on demand. */

.wy-side-nav-search {
  background: var(--cvd-content);
  padding: 0.7rem 0.85rem;
  border-bottom: 1px solid var(--cvd-border);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* The platform places the horizontal logo inline at the left of the topbar,
   not centred. The documentation follows the same alignment.
   The brand supplies two versions: full colour for light backgrounds and
   white for dark ones. The correct version is shown for the active theme. */

.wy-side-nav-search > a {
  display: block;
  text-align: left;
  padding: 0;
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
}

.wy-side-nav-search > a img.logo {
  background: transparent;
  display: block;
  margin: 0;
  padding: 0;
  width: 132px;
  max-width: 100%;
  height: auto;
}

:root[data-theme="dark"] .wy-side-nav-search > a img.logo {
  content: url('logo-dark.png');
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wy-side-nav-search > a img.logo {
    content: url('logo-dark.png');
  }
}

.wy-side-nav-search > div.version { text-align: left; }

/* Search: an icon button beside the logo that reveals the field.
   The field occupies the full width of the panel once open. */

/* Collapsed by default; the script reveals it when the icon is used.
   Hidden only once the script has run, so the field remains usable
   when JavaScript is unavailable. */

.wy-side-nav-search > div[role="search"] {
  margin: 0;
  flex: 1 0 100%;
  order: 3;
  margin-top: 0.55rem;
}

.cvd-js .wy-side-nav-search > div[role="search"] { display: none; }

.cvd-js .wy-side-nav-search > div[role="search"].cvd-search-open { display: block; }

.cvd-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--cvd-radius);
  color: var(--cvd-text);
  cursor: pointer;
  order: 1;
  flex: 0 0 auto;
  margin-left: auto;
}

.cvd-search-button:hover {
  background: var(--cvd-surface-50);
  border-color: var(--cvd-border);
}

.cvd-search-button svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
}

.wy-side-nav-search form.wy-form { margin: 0; }

.wy-side-nav-search input[type="text"] {
  border: 1px solid var(--cvd-border);
  border-radius: var(--cvd-radius);
  background: var(--cvd-content);
  color: var(--cvd-text);
  box-shadow: none;
  font-size: 0.86rem;
  width: 100%;
  padding: 5px 9px;
}

.wy-side-nav-search input[type="text"]:focus {
  border-color: var(--cvd-primary);
  outline: none;
}

.wy-side-nav-search input[type="text"]::placeholder { color: var(--cvd-text-muted); }
.wy-side-nav-search > div.version { color: var(--cvd-text-muted); font-size: 0.8rem; }

.wy-menu-vertical header,
.wy-menu-vertical p.caption {
  color: var(--cvd-text-muted);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-top: 1.1rem;
  opacity: 0.75;
}

.wy-menu-vertical a {
  color: var(--cvd-text);
  font-size: 0.86rem;
  padding: 0.4rem 1.618em;
}

.wy-menu-vertical a:hover {
  background-color: var(--cvd-surface-50);
  color: var(--cvd-text);
}

/* Active item: solid primary with 6px radius, as platform menu items */

.wy-menu-vertical li.current { background: transparent; }

.wy-menu-vertical li.current > a,
.wy-menu-vertical li.on a {
  background: var(--cvd-nav-active-bg);
  color: var(--cvd-nav-active-text);
  font-weight: 700;
  border: none;
  border-radius: var(--cvd-radius);
  margin: 0 0.6em;
  padding-left: calc(1.618em - 0.6em);
  position: relative;
  overflow: hidden;
}

/* The expand control floats left by default, which places it outside the
   rounded active background. It is kept inside and aligned to the text. */

.wy-menu-vertical li a button.toctree-expand,
.wy-menu-vertical li a .toctree-expand {
  float: none;
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  line-height: 1;
}

/* Reserve room for the control so the label never sits beneath it */

.wy-menu-vertical li.current > a,
.wy-menu-vertical li.on a { padding-left: 1.65em; }

.wy-menu-vertical li.current > a button.toctree-expand,
.wy-menu-vertical li.on a button.toctree-expand {
  color: var(--cvd-nav-active-text);
  opacity: 0.85;
}

/* Nested links under the active section. The active link itself is excluded,
   so that it keeps the text colour chosen for contrast against its background. */

.wy-menu-vertical li.current a:not(.current) {
  color: var(--cvd-text);
  border-right: none;
}

/* Nested links under the active section receive the usual hover treatment.
   The active link itself is excluded: it keeps its own background and text,
   darkening slightly instead, so the label stays legible while pointed at. */

.wy-menu-vertical li.current a:not(.current):hover {
  background-color: var(--cvd-surface-50);
  color: var(--cvd-text);
}

.wy-menu-vertical li.current > a.current:hover,
.wy-menu-vertical li.current > a:hover,
.wy-menu-vertical li.on a:hover {
  background-color: var(--cvd-nav-active-hover);
  color: var(--cvd-nav-active-text);
}

.wy-menu-vertical li.toctree-l2.current > a,
.wy-menu-vertical li.toctree-l3.current > a {
  background: var(--cvd-surface-50);
  color: var(--cvd-text);
  border-radius: var(--cvd-radius);
}

.wy-menu-vertical li.toctree-l2 a,
.wy-menu-vertical li.toctree-l3 a { font-size: 0.95em; }

/* Mobile top bar, matching the platform topbar */

.wy-nav-top {
  background: var(--cvd-content);
  color: var(--cvd-text);
  border-bottom: 1px solid var(--cvd-border);
  font-weight: 700;
}

.wy-nav-top a { color: var(--cvd-text); }
.wy-nav-top i { color: var(--cvd-primary); }

/* Content: a white card on the ground colour, 6px radius, no shadow */

/* Layout width and centring.

   The theme pins the sidebar to the left edge of the window and places the
   content beside it, which leaves the pair sitting off-centre on a wide
   display. Instead the sidebar and the content are treated as one block and
   centred together, with the sidebar offset by the same margin.

   Sizes are fluid rather than stepped, so the layout adapts continuously to
   the window. The measure is held below a maximum beyond which lines of text
   become tiring to follow; past that point the margins take the extra space. */

:root {
  --cvd-side-width: 300px;
  --cvd-content-max: clamp(45rem, 68vw, 76rem);
  /* Space either side of the sidebar and content taken together.
     The script sets --cvd-viewport to the width excluding the scrollbar;
     100vw is the fallback and includes it, which biases the layout slightly
     to one side until the script runs. */
  --cvd-viewport: 100vw;
  --cvd-layout-gutter: max(0px, (var(--cvd-viewport) - var(--cvd-side-width) - var(--cvd-content-max)) / 2);
}

.wy-nav-content {
  width: 100%;
  max-width: var(--cvd-content-max);
  margin: 0;
  background: var(--cvd-content);
  color: var(--cvd-text);
  padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1.25rem, 3vw, 3rem) clamp(2rem, 3vw, 3rem);
  border-radius: var(--cvd-radius);
  box-sizing: border-box;
}

/* Below the width at which the sidebar collapses, the theme's own responsive
   rules apply and no offset is wanted. */

@media (min-width: 769px) {
  .wy-nav-side {
    left: var(--cvd-layout-gutter);
    width: var(--cvd-side-width);
  }

  .wy-nav-content-wrap {
    margin-left: calc(var(--cvd-layout-gutter) + var(--cvd-side-width));
    margin-right: var(--cvd-layout-gutter);
  }
}

.wy-nav-content-wrap { background: var(--cvd-ground); }

/* A small inset separates the content panel from the sidebar and the window
   edge. Horizontal spacing is handled by the layout gutter above. */

@media (min-width: 769px) {
  .wy-nav-content-wrap { padding: clamp(0.75rem, 1.2vw, 1.5rem) 0; }
}

/* Tables */

.rst-content table.docutils,
.wy-table-bordered-all {
  border: 1px solid var(--cvd-border);
  border-radius: var(--cvd-radius);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  margin: 0 0 1.25rem;
  width: 100%;
}

/* A wide table scrolls within its own area rather than widening the page */

.rst-content .section > table,
.rst-content table.docutils { display: table; }

/* The theme wraps each table so that wide ones can scroll. The spacing
   belongs on that wrapper rather than on the table itself. */

.rst-content .wy-table-responsive {
  margin: 0 0 1.25rem;
  overflow-x: auto;
}

.rst-content .wy-table-responsive:last-child { margin-bottom: 0; }

.rst-content .wy-table-responsive > table.docutils { margin-bottom: 0; }

.rst-content .admonition { margin: 0 0 1.25rem; padding: 0.85rem 1rem; }
.rst-content .admonition-title { margin: -0.85rem -1rem 0.7rem; padding: 0.45rem 1rem; }
.rst-content .admonition > :last-child { margin-bottom: 0; }

.rst-content table.docutils thead th,
.wy-table thead th {
  background: var(--cvd-surface-50);
  color: var(--cvd-text);
  font-weight: 700;
  font-size: 0.92em;
  border: none;
  border-bottom: 1px solid var(--cvd-border);
  vertical-align: middle;
}

.rst-content table.docutils td,
.wy-table td {
  background: var(--cvd-content);
  color: var(--cvd-text);
  border-color: var(--cvd-border-soft);
  vertical-align: top;
  font-size: 0.94em;
}

/* The theme sets a light background on alternating rows using a selector
   that outranks the rule above, so those selectors are matched here too. */

.rst-content table.docutils:not(.field-list) tbody tr:nth-child(2n-1) td,
.wy-table-backed,
.wy-table-odd td,
.wy-table-striped tr:nth-child(2n-1) td {
  background-color: var(--cvd-surface-50);
  color: var(--cvd-text);
}

.rst-content table.docutils tbody tr:nth-child(even) td,
.wy-table tbody tr:nth-child(even) td { background: var(--cvd-content); }

/* Code */

.rst-content code,
.rst-content tt.literal {
  color: var(--cvd-primary);
  background: var(--cvd-code-bg);
  border: 1px solid var(--cvd-border-soft);
  border-radius: 4px;
  font-family: var(--cvd-font-mono);
  font-size: 0.86em;
  padding: 1px 5px;
  white-space: nowrap;
}

.rst-content pre,
.highlight {
  background: var(--cvd-code-bg);
  border: 1px solid var(--cvd-border-soft);
  border-radius: var(--cvd-radius);
}

/* Code blocks are given internal spacing so the text does not meet the
   border, and are separated from the surrounding paragraphs. */

.rst-content pre,
.rst-content div[class^="highlight"] pre,
.rst-content .highlight pre {
  padding: 0.85rem 1rem;
  margin: 0 0 1rem;
  overflow-x: auto;
}

.rst-content div[class^="highlight"],
.rst-content .highlight { margin: 0 0 1rem; }

/* The wrapper already carries the frame, so the inner block does not
   repeat it. */

.rst-content div[class^="highlight"] pre,
.rst-content .highlight pre {
  border: none;
  border-radius: 0;
  margin: 0;
  background: transparent;
}

.rst-content div[class^="highlight"] pre {
  font-family: var(--cvd-font-mono);
  font-size: 0.85em;
  line-height: 1.5;
  color: var(--cvd-text);
}

/* The syntax highlighter paints its own light background and black text on
   the inner element. Both are overridden so code blocks follow the theme. */

.rst-content pre code,
.rst-content pre code.hljs,
.rst-content div[class^="highlight"] code,
.rst-content .highlight code,
.rst-content code[class*="language-"] {
  background: transparent;
  color: var(--cvd-text);
  border: none;
  padding: 0;
  white-space: pre;
  font-size: inherit;
}

/* Token colours for the dark theme, drawn from the brand accents so that
   highlighted code remains legible without introducing new hues. */

:root[data-theme="dark"] .rst-content .hljs-keyword,
:root[data-theme="dark"] .rst-content .hljs-built_in,
:root[data-theme="dark"] .rst-content .hljs-literal { color: #AFD3BF; }

:root[data-theme="dark"] .rst-content .hljs-string,
:root[data-theme="dark"] .rst-content .hljs-attr,
:root[data-theme="dark"] .rst-content .hljs-attribute { color: #E1E483; }

:root[data-theme="dark"] .rst-content .hljs-comment,
:root[data-theme="dark"] .rst-content .hljs-meta { color: #8fa396; }

:root[data-theme="dark"] .rst-content .hljs-number,
:root[data-theme="dark"] .rst-content .hljs-variable,
:root[data-theme="dark"] .rst-content .hljs-title { color: #89B79D; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .rst-content .hljs-keyword,
  :root:not([data-theme="light"]) .rst-content .hljs-built_in,
  :root:not([data-theme="light"]) .rst-content .hljs-literal { color: #AFD3BF; }

  :root:not([data-theme="light"]) .rst-content .hljs-string,
  :root:not([data-theme="light"]) .rst-content .hljs-attr,
  :root:not([data-theme="light"]) .rst-content .hljs-attribute { color: #E1E483; }

  :root:not([data-theme="light"]) .rst-content .hljs-comment,
  :root:not([data-theme="light"]) .rst-content .hljs-meta { color: #8fa396; }

  :root:not([data-theme="light"]) .rst-content .hljs-number,
  :root:not([data-theme="light"]) .rst-content .hljs-variable,
  :root:not([data-theme="light"]) .rst-content .hljs-title { color: #89B79D; }
}

/* Admonitions */

.rst-content .admonition {
  background: var(--cvd-surface-50);
  border: 1px solid var(--cvd-border-soft);
  border-left: 3px solid var(--cvd-primary);
  border-radius: var(--cvd-radius);
  font-size: 0.95em;
}

.rst-content .admonition-title {
  background: transparent;
  color: var(--cvd-text);
  font-weight: 700;
  font-size: 0.92em;
  border-bottom: 1px solid var(--cvd-border-soft);
}

.rst-content .admonition p { color: var(--cvd-text); }

.rst-content .warning,
.rst-content .caution,
.rst-content .danger { border-left-color: var(--cvd-danger); }

.rst-content .warning > .admonition-title,
.rst-content .caution > .admonition-title,
.rst-content .danger > .admonition-title { color: var(--cvd-danger); }

/* Previous and next bar fixed at the foot of the navigation panel */

/* The previous and next bar is fixed to the foot of the navigation panel.
   It is offset by the same gutter as the sidebar, so that it stays attached
   to it rather than to the window edge. */

.rst-versions {
  background: var(--cvd-content);
  border-top: 1px solid var(--cvd-border);
  border-right: 1px solid var(--cvd-border);
  color: var(--cvd-text);
}

@media (min-width: 769px) {
  .rst-versions {
    left: var(--cvd-layout-gutter);
    width: var(--cvd-side-width);
  }
}

.rst-versions .rst-current-version {
  background: var(--cvd-content);
  color: var(--cvd-text);
}

.rst-versions .rst-current-version .fa,
.rst-versions .rst-current-version span { color: var(--cvd-primary); }

.rst-versions a { color: var(--cvd-primary); }

/* Footer */

footer { color: var(--cvd-text-muted); font-size: 0.85em; }
footer p { margin-bottom: 0.4em; }

.rst-footer-buttons .btn,
.rst-content .btn-neutral,
.btn.btn-neutral {
  background: var(--cvd-content) !important;
  color: var(--cvd-primary) !important;
  border: 1px solid var(--cvd-border);
  box-shadow: none;
  font-weight: 500;
  font-size: 0.88em;
  border-radius: var(--cvd-radius);
}

.rst-footer-buttons .btn:hover,
.rst-content .btn-neutral:hover,
.btn.btn-neutral:hover {
  background: var(--cvd-primary) !important;
  color: var(--cvd-primary-text) !important;
  border-color: var(--cvd-primary);
}

.rst-footer-buttons .btn .fa,
.rst-content .btn-neutral .fa { color: inherit !important; }

.rst-content hr { border-top-color: var(--cvd-border-soft); }

.rst-content blockquote {
  border-left: 4px solid var(--cvd-border);
  color: var(--cvd-text-muted);
}

/* Theme toggle */

/* Theme control: an icon button in the header, beside the search control.
   Cycles between following the browser setting, light, and dark. */

.cvd-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  color: var(--cvd-text);
  border: 1px solid transparent;
  border-radius: var(--cvd-radius);
  cursor: pointer;
  order: 2;
  flex: 0 0 auto;
}

.cvd-theme-toggle:hover {
  background: var(--cvd-surface-50);
  border-color: var(--cvd-border);
}

.cvd-theme-toggle svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Only the icon for the active theme is shown */
.cvd-theme-toggle svg { display: none; }
.cvd-theme-toggle[data-mode="light"] .cvd-icon-light,
.cvd-theme-toggle[data-mode="dark"]  .cvd-icon-dark { display: block; }

/* Print */

@media print {
  .wy-nav-side, .cvd-theme-toggle { display: none; }
  .wy-nav-content-wrap { margin-left: 0; padding: 0; }
  .wy-nav-content { border-radius: 0; }
  .rst-content a, .rst-content a:visited { color: var(--cvd-text); }
}