/* Brand constants: the same in both schemes. */
:root {
  --puredarwin-blue: #0d6efd;
  --sidebar-width: min(var(--sidebar-target-width), 80vw);
  --content-max-width: 900px;
  /* Matches the landing page's centred max-w-6xl (1152px) plus its px-5
     gutter, so the logo and nav sit in the same place on both halves of the
     site. The landing page scrolls the document and so reserves a scrollbar;
     the handbook scrolls inside its own pane and does not, which would centre
     its bar half a scrollbar further right. Subtract that width to match.
     15px is only a no-script fallback: overlay scrollbars (macOS) take no
     space at all, so puredarwin.js measures the real width and overrides. */
  --pd-scrollbar: 15px;
  --pd-gutter: max(20px, calc((100% - var(--pd-scrollbar) - 1152px) / 2 + 20px));
}

/* Everything below is expressed against these tokens, so a scheme is defined
   once here rather than by overriding rules further down. mdBook's own
   variables are mapped onto them so its search, code and table chrome follow
   too. `rust` renders light, `coal`/`navy`/`ayu` render dark. */
.light,
.rust {
  --pd-canvas: #f6f6f6;
  --pd-surface: #fff;
  --pd-border: #e3e3e3;
  --pd-rail: #dcdcdc;
  --pd-fg: #2f2f2f;
  --pd-heading: #1b1b1b;
  --pd-muted: #6f6f6f;
  --pd-sidebar-fg: #4a4a4a;
  --pd-link: var(--puredarwin-blue);
  --pd-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
  --pd-elevated: #f1f1f1;
  --pd-header-bg: #000;
  --pd-header-fg: #fff;
  --pd-header-border: rgba(255, 255, 255, 0.25);
  --pd-logo: url("../img/homepage/logo-mark-text-fff.svg");
  --color-scheme: light;
}

.coal,
.navy,
.ayu {
  --pd-canvas: #000;
  --pd-surface: #121214;
  --pd-border: #2a2a2e;
  --pd-rail: #34343a;
  --pd-fg: #c7c7cc;
  --pd-heading: #f2f2f4;
  --pd-muted: #8e8e93;
  --pd-sidebar-fg: #b0b0b6;
  --pd-link: #6ea8fe;
  --pd-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  --pd-elevated: #1c1c20;
  /* The bar stays black in both schemes. On a black canvas it would vanish,
     so the bottom edge becomes a visible white line instead. */
  --pd-header-bg: #000;
  --pd-header-fg: #fff;
  --pd-header-border: rgba(255, 255, 255, 0.85);
  --pd-logo: url("../img/homepage/logo-mark-text-fff.svg");
  --color-scheme: dark;
}

.light,
.rust,
.coal,
.navy,
.ayu {
  --bg: var(--pd-canvas);
  --fg: var(--pd-fg);
  --sidebar-bg: var(--pd-surface);
  --sidebar-fg: var(--pd-sidebar-fg);
  --sidebar-non-existant: var(--pd-muted);
  --sidebar-active: var(--pd-link);
  --sidebar-spacer: var(--pd-border);
  --sidebar-header-border-color: transparent;
  --links: var(--pd-link);
  --inline-code-color: var(--pd-link);
  --icons: var(--pd-header-fg);
  --icons-hover: var(--pd-muted);
  --scrollbar: var(--pd-rail);
  --quote-bg: var(--pd-elevated);
  --quote-border: var(--pd-border);
  --table-border-color: var(--pd-border);
  --table-header-bg: var(--pd-elevated);
  --table-alternate-bg: var(--pd-elevated);
  --searchbar-bg: var(--pd-surface);
  --searchbar-fg: var(--pd-fg);
  --searchbar-border-color: var(--pd-border);
  --searchresults-li-bg: var(--pd-elevated);
  --searchresults-border-color: var(--pd-border);
  --searchresults-header-fg: var(--pd-muted);
  --theme-popup-bg: var(--pd-surface);
  --theme-popup-border: var(--pd-border);
  --theme-hover: var(--pd-elevated);
  --overlay-bg: rgba(0, 0, 0, 0.4);
}

html {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
}

html,
body,
.page,
.page-wrapper {
  background: var(--pd-canvas);
}

body::before {
  content: "";
  position: fixed;
  z-index: 100;
  top: 0;
  right: 0;
  left: 0;
  height: 51px;
  background: var(--pd-header-bg);
}

.page-wrapper {
  min-height: 100vh;
}

/* Recreate the old fixed black navigation bar. */
.menu-bar,
.menu-bar-hover-placeholder {
  height: 51px;
}

#mdbook-menu-bar {
  position: fixed !important;
  z-index: 102;
  /* mdBook writes a scroll-derived inline top value while managing its
     normally in-flow menu. This theme keeps the bar fixed to the viewport,
     so that value would move it down the screen unless the base rule wins. */
  top: 0 !important;
  right: 0;
  left: 0;
  box-sizing: border-box;
  width: 100vw;
  margin: 0;
  padding: 0 24px;
  background-color: var(--pd-header-bg);
  border-bottom: 1px solid var(--pd-header-border);
}

#mdbook-menu-bar:hover,
#mdbook-menu-bar.sticky,
html.sidebar-visible #mdbook-menu-bar {
  position: fixed !important;
  top: 0 !important;
}

#mdbook-menu-bar .left-buttons {
  position: absolute;
  left: 10px;
}

#mdbook-menu-bar .right-buttons {
  position: absolute;
  right: 12px;
}

#mdbook-menu-bar .fa-svg,
#mdbook-menu-bar .icon-button {
  padding-right: 5px;
  padding-left: 5px;
}

[dir="rtl"] #mdbook-menu-bar .left-buttons {
  right: 12px;
  left: auto;
}

[dir="rtl"] #mdbook-menu-bar .right-buttons {
  right: auto;
  left: 12px;
}

.menu-bar .left-buttons,
.menu-bar .right-buttons {
  align-items: center;
  height: 50px;
}

.menu-bar .icon-button,
.menu-bar .icon-button:hover,
.menu-bar .icon-button:focus {
  color: var(--pd-header-fg);
}

/* mdBook's six-entry picker is replaced by a two-state toggle in
   puredarwin.js. Hide the original in case scripting is unavailable. */
#mdbook-theme-toggle,
#mdbook-theme-list {
  display: none;
}

/* The replacement reuses mdBook's own icon-button class and .fa-svg wrapper,
   so it inherits the same 1em box and line-height as the buttons either side
   of it. Only the stroke needs saying: Lucide icons are drawn, not filled. */
#pd-theme-toggle .fa-svg svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  vertical-align: -0.35em;
}
.menu-title {
  position: absolute;
  top: 11px;
  left: max(var(--pd-gutter), 132px);
  width: 138px;
  height: 28px;
  margin: 0;
  overflow: hidden;
  color: transparent;
  background: var(--pd-logo) left center / auto 28px no-repeat;
  font-size: 0;
  transform: none;
}

/* The same links the landing page carries, so the two halves of the site have
   the same navigation in the same place. Injected in puredarwin.js. */
#pd-nav {
  position: absolute;
  top: 0;
  right: max(calc(var(--pd-gutter) + var(--pd-scrollbar)), 68px);
  display: flex;
  align-items: center;
  gap: 20px;
  height: 50px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#pd-nav a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  text-decoration: none;
}

#pd-nav a:hover {
  color: #fff;
}

/* The hamburger and its dropdown exist only below 760px, where the inline
   links are hidden. Both are injected in puredarwin.js. */
#pd-nav-toggle {
  display: none;
}

#pd-nav-toggle .fa-svg svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  vertical-align: -0.35em;
}

#pd-mobile-nav {
  position: fixed;
  z-index: 101;
  top: 51px;
  right: 0;
  left: 0;
  display: none;
  margin: 0;
  padding: 8px 20px 12px;
  list-style: none;
  background: var(--pd-header-bg);
  border-bottom: 1px solid var(--pd-header-border);
}

#pd-mobile-nav a {
  display: block;
  padding: 10px 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  text-decoration: none;
}

#pd-mobile-nav a:hover {
  color: #fff;
}

#pd-mobile-nav .pd-mobile-theme-item {
  margin-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  padding-top: 6px;
}

#pd-mobile-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border: none;
  background: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  cursor: pointer;
}

#pd-mobile-theme:hover {
  color: #fff;
}

#pd-mobile-theme .fa-svg {
  display: inline-flex;
}

#pd-mobile-theme .fa-svg svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
}

/* 767.98px matches the landing page's `md` breakpoint (768px), so the two
   bars change shape at the same window width. */
@media (max-width: 767.98px) {
  #pd-nav {
    display: none;
  }

  #pd-nav-toggle {
    display: inline-block;
  }

  #pd-mobile-nav.open {
    display: block;
  }

  /* Centred between the buttons either side, like the landing page. The box
     is wider than the ~137px mark it holds, so the image is centred within
     it too; left-aligned it would sit a few pixels off true centre. */
  .menu-title {
    left: 50%;
    background-position: center;
    transform: translateX(-50%);
  }

  /* Print is a desktop affordance; on a phone it crowds the hamburger. */
  #mdbook-menu-bar .right-buttons a[href$="print.html"] {
    display: none;
  }

  /* The theme toggle moves into the hamburger menu on mobile. It stays in
     the DOM because the menu item relays clicks to it. */
  #pd-theme-toggle {
    display: none;
  }

  /* Lands the hamburger glyph 26px from the right edge: 16px offset plus
     5px of button and 5px of .fa-svg padding, matching the landing page's
     20px gutter plus 6px button padding. mdBook's own 15px margin on this
     group would throw the sum off, so it goes. */
  #mdbook-menu-bar .right-buttons {
    right: 16px;
    margin: 0;
  }
}


a.menu-title {
  cursor: pointer;
  text-decoration: none;
}

a.menu-title:focus-visible {
  outline: 2px solid var(--pd-header-fg);
  outline-offset: 2px;
}

/* mdBook offsets the page with a placeholder that its own in-flow menu bar
   normally sits in (.page carries a compensating negative margin). This
   theme moves the bar out of the page and fixes it to the viewport, so the
   searchbar mdBook reveals at the top of the page would open underneath it.
   Clear the bar's height by hand. */
#mdbook-search-wrapper {
  padding-top: 51px;
}

.sidebar {
  top: 51px;
  background: var(--pd-surface);
  border-right: 1px solid var(--pd-border);
}

.sidebar-scrollbox {
  padding: 28px 18px 28px 28px;
}

.sidebar .chapter li a {
  border-radius: 4px;
  color: var(--pd-sidebar-fg);
  line-height: 1.5;
}

.sidebar .chapter li a:hover {
  color: var(--pd-link);
  text-decoration: none;
}

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

.sidebar .chapter li a.active::before {
  color: var(--pd-link);
}

/* Keep article heading outlines, but suppress the orphaned rule mdBook emits
   when a page has no eligible subsections. */
.sidebar .on-this-page:not(:has(a)) {
  display: none;
}

/* mdBook inserts empty list levels when a document starts at h3 or deeper. */
.sidebar .on-this-page > ol > ol {
  padding-inline-start: 0;
}

.sidebar .on-this-page {
  margin-inline-start: 4px;
}

/* Sections of the current page sit in the same list as sibling chapters, so
   without this they read as pages that do not exist. A rail plus a lighter,
   smaller face keeps the two apart however deeply the book nests. */
.sidebar .on-this-page > ol {
  border-inline-start: 1px solid var(--pd-rail);
  margin-inline-start: 10px;
  padding-inline-start: 10px;
}

.sidebar .on-this-page a.header-in-summary {
  color: var(--pd-muted);
  font-size: 0.92em;
}

.sidebar .on-this-page a.header-in-summary:hover,
.sidebar .on-this-page a.header-in-summary.active {
  color: var(--pd-link);
}

/* Keep the Docsify-style sidebar fixed-width and remove mdBook's chapter
   paging controls. Navigation remains available through the sidebar. */
.nav-wide-wrapper,
.nav-wrapper {
  display: none;
}

#mdbook-sidebar-resize-handle .sidebar-resize-indicator {
  opacity: 0;
}

.page-wrapper {
  background: var(--pd-canvas);
}

.content {
  box-sizing: border-box;
  margin-top: 32px;
  margin-bottom: 48px;
  padding: 42px 54px 64px;
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: 8px;
  box-shadow: var(--pd-shadow);
}

.content main {
  color: var(--pd-fg);
  line-height: 1.65;
}

.content h1,
.content h2,
.content h3,
.content h4 {
  color: var(--pd-heading);
  font-weight: 600;
}

.content a.header {
  color: inherit;
}

.content h1 {
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--pd-border);
}

.content a {
  color: var(--pd-link);
}

.content code {
  padding: 0.1em 0.35em;
  background: var(--pd-elevated);
  border-radius: 4px;
}

/* The highlight themes paint their own background on .hljs, which differs per
   theme and does not follow our tokens. Own the box here and let the
   highlighter deal only with the text colours. */
.content pre {
  padding: 0.85em 1em;
  background: var(--pd-elevated);
  border: 1px solid var(--pd-border);
  border-radius: 6px;
}

.content pre code,
.content pre code.hljs {
  padding: 0;
  background: none;
}

.content blockquote {
  border-left-color: var(--pd-link);
}

/* mdBook centres tables and sizes them to their content, so a page with
   several of them gets a different width and a different left edge for each.
   Pin them to the text column instead. */
.content table {
  width: 100%;
  margin-inline: 0;
}

/* Identifiers in table cells are code, not prose: let the column widen rather
   than break `IOIntelFramebuffer` across two lines. */
.content table td code,
.content table th code {
  white-space: nowrap;
}

@media (max-width: 1080px) {
  .content {
    margin: 24px 20px 40px;
    padding: 34px 38px 50px;
  }
}

@media (max-width: 700px) {
  .menu-bar {
    padding: 0 8px;
  }

  .menu-title {
    width: 145px;
  }

  .content {
    margin: 0;
    padding: 28px 22px 44px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

@media print {
  body::before {
    display: none;
  }
}