@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;700&display=swap");
@import url("/assets/docs-shell.css");
@import url("/assets/result-viewer.css");

:root {
  --vanellus-accent: #007c60;
  --vanellus-accent-hover: #005f49;
  --vanellus-orange: #d85627;
  --vanellus-border: rgb(8 15 28 / 12%);
  --vanellus-surface: #ffffff;
  --vanellus-global-header-height: 64px;
}

.light {
  --vanellus-diagram-accent: #3485ab;
  --bg: #f5f8fa;
  --fg: #0e1828;
  --sidebar-bg: #ffffff;
  --sidebar-fg: #334960;
  --sidebar-non-existant: #7890a7;
  --sidebar-active: #007c60;
  --sidebar-spacer: rgb(8 15 28 / 12%);
  --scrollbar: #a9bac8;
  --icons: #5f748a;
  --icons-hover: #0e1828;
  --links: #007c60;
  --inline-code-color: #0e1828;
  --vanellus-code-bg: #f1f5f7;
  --vanellus-code-border: rgb(8 15 28 / 14%);
  --vanellus-inline-code-bg: #e7eef2;
  --theme-popup-bg: #ffffff;
  --theme-popup-border: rgb(8 15 28 / 12%);
  --theme-hover: #e9f1f3;
  --quote-bg: #ffffff;
  --quote-border: #00b788;
  --table-border-color: rgb(8 15 28 / 12%);
  --table-header-bg: #e9f1f3;
  --table-alternate-bg: #ffffff;
  --searchbar-border-color: rgb(8 15 28 / 12%);
  --searchbar-bg: #ffffff;
  --searchbar-fg: #0e1828;
  --searchbar-shadow-color: rgb(0 124 96 / 22%);
  --searchresults-header-fg: #5f748a;
  --searchresults-border-color: rgb(8 15 28 / 12%);
  --searchresults-li-bg: #ffffff;
  --search-mark-bg: #fff2a8;
}

.navy {
  --vanellus-accent: #00d4a0;
  --vanellus-accent-hover: #64e8c8;
  --vanellus-diagram-accent: #78cbe8;
  --vanellus-orange: #ff6830;
  --vanellus-border: rgb(255 255 255 / 9%);
  --vanellus-surface: #0e1828;
  --bg: #080f1c;
  --fg: #dce8f0;
  --sidebar-bg: #0e1828;
  --sidebar-fg: #b4c4d1;
  --sidebar-non-existant: #60758b;
  --sidebar-active: #00d4a0;
  --sidebar-spacer: rgb(255 255 255 / 9%);
  --scrollbar: #40566d;
  --icons: #7a90a8;
  --icons-hover: #dce8f0;
  --links: #00d4a0;
  --inline-code-color: #dce8f0;
  --vanellus-code-bg: #111d30;
  --vanellus-code-border: rgb(255 255 255 / 12%);
  --vanellus-inline-code-bg: #17253a;
  --theme-popup-bg: #0e1828;
  --theme-popup-border: rgb(255 255 255 / 9%);
  --theme-hover: #111d30;
  --quote-bg: #0e1828;
  --quote-border: #00d4a0;
  --table-border-color: rgb(255 255 255 / 9%);
  --table-header-bg: #111d30;
  --table-alternate-bg: #0e1828;
  --searchbar-border-color: rgb(255 255 255 / 9%);
  --searchbar-bg: #0e1828;
  --searchbar-fg: #dce8f0;
  --searchbar-shadow-color: rgb(0 212 160 / 20%);
  --searchresults-header-fg: #7a90a8;
  --searchresults-border-color: rgb(255 255 255 / 9%);
  --searchresults-li-bg: #0e1828;
  --search-mark-bg: #705b00;
}

html {
  font-family: "Manrope", "Avenir Next", "Segoe UI", sans-serif;
}

html.light body {
  background:
    radial-gradient(circle at top left, rgb(0 183 136 / 10%), transparent 30%),
    #f5f8fa;
}

html.navy body {
  background:
    radial-gradient(circle at top left, rgb(0 212 160 / 10%), transparent 30%),
    radial-gradient(circle at 86% 14%, rgb(255 104 48 / 8%), transparent 22%),
    #080f1c;
}

.content h1,
.content h2,
.content h3,
.menu-title {
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

/* Keep airflow and boundary annotations blue so green remains distinctive for PCBs. */
.content svg {
  --links: var(--vanellus-diagram-accent);
}

.content main {
  max-width: 780px;
}

.content p,
.content li {
  line-height: 1.7;
}

.content h1,
.content h2,
.content h3 {
  letter-spacing: -0.015em;
}

.content h1 {
  font-size: 2.5em;
  line-height: 1.15;
}

.content h2 {
  margin-top: 2em;
  padding-top: 0.5em;
  border-top: 1px solid var(--vanellus-border);
}

.sidebar {
  border-right: 1px solid var(--sidebar-spacer);
}

.sidebar .sidebar-scrollbox {
  padding-top: 20px;
}

.chapter li a {
  border-radius: 5px;
}

.chapter li a:hover {
  background: var(--theme-hover);
}

.chapter li a.active {
  color: var(--sidebar-active);
  font-weight: 600;
}

.menu-bar {
  border-bottom: 1px solid var(--sidebar-spacer);
}

/* Map mdBook's theme variables onto the common documentation shell. */
.vanellus-global-header {
  --docs-shell-z: 1000;
  --docs-shell-height: var(--vanellus-global-header-height);
  --docs-shell-border: var(--sidebar-spacer);
  --docs-shell-background: color-mix(in srgb, var(--bg) 90%, transparent);
  --docs-shell-text: var(--fg);
  --docs-shell-surface: var(--sidebar-bg);
  --docs-shell-muted: var(--icons);
  --docs-shell-nav: var(--sidebar-fg);
  --docs-shell-accent: var(--links);
}


/* The branded control replaces mdBook's multi-theme picker with light and dark modes. */
#mdbook-theme-toggle,
#mdbook-theme-list {
  display: none;
}

/* Keep mdBook controls visible directly beneath the shared site header. */
#mdbook-menu-bar.sticky,
#mdbook-menu-bar-hover-placeholder:hover + #mdbook-menu-bar,
#mdbook-menu-bar:hover,
html.sidebar-visible #mdbook-menu-bar,
#mdbook-menu-bar-hover-placeholder {
  top: var(--vanellus-global-header-height) !important;
}

.sidebar {
  top: var(--vanellus-global-header-height);
}

blockquote {
  border-radius: 0 6px 6px 0;
}

code {
  border: 1px solid var(--vanellus-code-border);
  border-radius: 4px;
}

pre code {
  border: 0;
}

/* Give highlighted, console, and inline code explicit surfaces in both supported themes. */
pre code.hljs,
pre code:not(.hljs),
:not(pre) > code.hljs {
  background-color: var(--vanellus-code-bg);
}

:not(pre) > code.hljs {
  background-color: var(--vanellus-inline-code-bg);
}

/* Keep Python signatures readable instead of coloring the entire parameter list as one token. */
code.language-python .hljs-params {
  color: var(--fg);
}

.guide-figure {
  margin: 1.75em 0;
}

.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--vanellus-border);
  border-radius: 6px;
}

.guide-figure figcaption {
  margin-top: 0.65em;
  color: var(--icons);
  font-size: 0.9em;
  line-height: 1.5;
  text-align: center;
}

.guide-figure-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1rem;
  margin: 1.75em 0;
}

.guide-figure-row .guide-figure {
  min-width: 0;
  margin: 0;
}

/* Mirror the landing-page result viewer inside the narrower mdBook content column. */
.guide-result-figure {
  overflow: hidden;
  margin: 1.75em 0;
  border: 1px solid var(--vanellus-border);
  border-radius: 8px;
  background: var(--vanellus-surface);
}

.tutorial-result-viewer {
  --result-viewer-accent: var(--vanellus-accent);
}

.guide-result-figure figcaption {
  color: var(--icons);
}

@media (max-width: 700px) {
  :root {
    --vanellus-global-header-height: 84px;
  }

  .vanellus-global-header {
    display: grid;
    grid-template-areas:
      "brand theme"
      "nav nav";
    grid-template-columns: 1fr auto;
    gap: 8px 16px;
    min-height: var(--vanellus-global-header-height);
    padding: 8px 16px;
  }

  .vanellus-global-nav {
    grid-area: nav;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    white-space: nowrap;
  }

  .vanellus-global-brand {
    grid-area: brand;
  }

  .vanellus-global-actions {
    display: contents;
  }

  .vanellus-theme-toggle {
    grid-area: theme;
  }

  .guide-figure-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 500px) {
  /* Preserve room for every navigation destination on narrow screens. */
  .vanellus-global-brand-section {
    display: none;
  }
}

@media (max-width: 900px) {
  .vanellus-global-brand-section {
    display: none;
  }
}