/* The site skin for the Scaladoc pages under /api (scripts/theme-api.mjs links it from every page, after Scaladoc's own
   stylesheets). It draws the navbar the way the Docusaurus navbar looks (src/css/custom.css and Infima's .navbar), sets
   the site font and colours, and moves Scaladoc's layout under the 60px navbar (Scaladoc assumes a 64px header). */

@font-face {
  font-family: 'Manrope';
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2');
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand palette (assets/logo/README.md), as in src/css/custom.css */
  --zb-ultramarine: #2d3f8f;
  --zb-ink: #141a2e;
  --zb-lifted: #4b5fc4;
  --zb-paper-ink: #f3f5fc;
  --zb-hairline: #e4e7f0;
  --zb-ink-rule: #232b4a;
  --zb-ink-soft: #a9b1ce;
  --zb-field: #1e2647;
  --zb-navbar-height: 3.75rem;

  --header-height: var(--zb-navbar-height);
  --body-font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --code-font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --text-primary: var(--zb-ink);
  --border-default: var(--zb-hairline);
  /* The docs page background */
  --background-default: #ffffff;
  --background-main: #ffffff;
  --background-nav: #ffffff;
  --focus-default: var(--zb-lifted);
}

/* Dark mode: the site's ink surfaces instead of Scaladoc's greys */
:root.theme-dark {
  --text-primary: var(--zb-paper-ink);
  --text-secondary: var(--zb-ink-soft);
  --border-default: var(--zb-ink-rule);
  --background-default: var(--zb-ink);
  --background-subtle: var(--zb-ink);
  --background-main: var(--zb-ink);
  --background-nav: var(--zb-ink);
  --background-neutral: var(--zb-field);
}

/* Navbar: ink in both colour modes, hairline underneath, Manrope 600 links */
#header.zb-navbar {
  --header-height: var(--zb-navbar-height);
  height: var(--zb-navbar-height);
  padding: 0.5rem 1rem;
  background: var(--zb-ink);
  border-bottom: 1px solid var(--zb-ink-rule);
  color: var(--zb-paper-ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}

.zb-navbar__left,
.zb-navbar__right {
  display: flex;
  align-items: center;
  min-width: 0;
}

.zb-navbar__brand {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}

.zb-navbar__brand img {
  /* Docusaurus sets the logo in a 2rem box (.navbar__logo) it overflows, which leaves it 2px lower than centred */
  position: relative;
  top: 2px;
  height: 2.25rem;
  width: auto;
}

.zb-navbar__link {
  /* inline-block, as .navbar__item: the external-link icon then sits on the text baseline as on docs pages */
  display: inline-block;
  padding: 0.25rem 0.75rem;
  color: var(--zb-paper-ink);
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s cubic-bezier(0.08, 0.52, 0.52, 1);
}

.zb-navbar__link:hover,
.zb-navbar__link--active {
  color: #ffffff;
  text-decoration: none;
}

.zb-navbar__external {
  margin-left: 0.3rem;
}

.zb-navbar__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* No browser button padding: it squeezed the 24px colour-mode icon to 20px */
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  color: var(--zb-paper-ink);
  cursor: pointer;
  line-height: 0;
}

.zb-navbar__icon:hover {
  color: #ffffff;
}

#search-toggle.zb-navbar__icon {
  width: 2rem;
  height: 2rem;
  margin-left: 0.4rem;
}

.zb-onboard {
  margin: 0 0.4rem;
  padding: 0.35rem;
  font-size: 1.25rem;
}

.zb-onboard__done,
.zb-onboard--copied .zb-onboard__idle {
  display: none;
}

.zb-onboard--copied .zb-onboard__done {
  display: inline;
}

/* Colour-mode toggle: a 2rem square showing the current mode, as Docusaurus draws it */
.zb-mode {
  width: 2rem;
  height: 2rem;
  transition: background 0.2s;
}

.zb-mode:hover {
  background: #ffffff1a;
}

.zb-mode svg {
  display: none;
}

:root[data-theme-choice='light'] .zb-mode__light,
:root[data-theme-choice='dark'] .zb-mode__dark,
:root[data-theme-choice='system'] .zb-mode__system {
  display: inline;
}

.zb-navbar :focus-visible,
#mobile-menu :focus-visible {
  outline: 2px solid var(--zb-lifted);
  outline-offset: 2px;
}

/* The hamburger sits left of the logo and opens Scaladoc's mobile menu; Docusaurus collapses its items at 996px */
#mobile-menu-toggle.zb-navbar__toggle {
  display: none;
  /* Scaladoc gives its toggle a 24px left margin on narrow screens; the docs toggle sits at the navbar's padding */
  margin-left: 0;
  margin-right: 0.5rem;
  padding: 0;
  color: var(--zb-paper-ink);
  cursor: pointer;
  line-height: 0;
}

@media (max-width: 996px) {
  #mobile-menu-toggle.zb-navbar__toggle {
    display: inline-flex;
  }

  .zb-navbar__link,
  .zb-mode {
    display: none;
  }

  #mobile-menu.show {
    display: block;
  }
}

/* Mobile menu: ink like the navbar, the site links on top */
#mobile-menu {
  background-color: var(--zb-ink);
  color: var(--zb-paper-ink);
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

#mobile-menu .mobile-menu-header {
  height: var(--zb-navbar-height);
  padding: 0.5rem 1rem;
  border: none;
  border-bottom: 1px solid var(--zb-ink-rule);
  justify-content: space-between;
}

#mobile-menu .mobile-menu-logo {
  opacity: 1;
}

#mobile-menu .mobile-menu-logo img {
  height: 2.25rem;
  width: auto;
}

#mobile-menu .mobile-menu-item {
  color: var(--zb-paper-ink);
  border-bottom-color: var(--zb-ink-rule);
}

.zb-mobile-links {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.zb-mobile-link {
  padding: 0.5rem 0.75rem;
  color: var(--zb-paper-ink);
  font-weight: 600;
  text-decoration: none;
}

.zb-mobile-link:hover,
.zb-mobile-link--active {
  background: var(--zb-ink-rule);
  color: #ffffff;
  text-decoration: none;
}

/* Three colour modes instead of Scaladoc's two: name the current one */
#mobile-menu .mobile-menu-item.mode::after {
  content: 'Colour mode: system';
}

:root[data-theme-choice='light'] #mobile-menu .mobile-menu-item.mode::after {
  content: 'Colour mode: light';
}

:root[data-theme-choice='dark'] #mobile-menu .mobile-menu-item.mode::after {
  content: 'Colour mode: dark';
}

/* Scrolling: the window scrolls, as on a docs page, so its scrollbar runs the whole height of the window beside a fixed
   navbar. Scaladoc locks the body and scrolls #main as a pane under an absolutely placed header, which put the
   scrollbar partly under the navbar. The sidebar is fixed under the navbar and runs to the bottom (the footer is gone),
   and #main is back in the page flow beside it, clipping the content Scaladoc's tablet sidebar pushes sideways. */
html,
body {
  height: auto;
  overflow: visible;
}

#header.zb-navbar {
  position: fixed;
  top: 0;
}

#leftColumn {
  position: fixed;
  top: var(--zb-navbar-height);
  height: calc(100vh - var(--zb-navbar-height));
}

#main {
  position: relative;
  left: auto;
  right: auto;
  width: auto;
  height: auto;
  overflow: visible;
  overflow-x: clip;
}

@media (min-width: 997px) {
  #main {
    margin-left: 300px;
  }
}

/* Overlays Scaladoc places from the top of the page stay on screen when it scrolls */
#searchbar-container,
#mobile-menu,
#mobile-sidebar-toggle {
  position: fixed;
}

/* A link to a #section stops just under the navbar, as on a docs page (Scaladoc's offset is 144px) */
[id] {
  scroll-margin-top: calc(var(--zb-navbar-height) + 0.5rem);
}


/* Typography: the docs pages' scale (Infima with src/css/custom.css), section by section. Scaladoc sizes text with
   utility classes (body-small is 13px whether it is the sidebar or a sentence), so each section is set here to the size
   of its counterpart on a docs page rather than by remapping those classes. */
body,
#main {
  font-family: var(--body-font-family);
}

/* Sidebar: the docs sidebar (Infima's .menu, with src/css/custom.css). Rows are .menu__link (16px, weight 500, 6px 12px
   padding, 0.25rem apart, square), each level indented 12px, the caret a chevron on the right (Infima's, pointing down
   when unfolded), Scaladoc's kind icons (package, class, object, trait...) before each name, and Infima's colours:
   grey links, the current page bold on a 5% tint, the pages above it in the active colour. */
:root {
  --zb-menu-color: #606770;
  --zb-menu-color-active: var(--zb-ultramarine);
  --zb-menu-tint: #0000000d;
  --zb-menu-icon-filter: none;
  /* Infima's caret (a chevron at 50% black) as Docusaurus turns it: right when folded, down when unfolded. The brand
     rules forbid rotation in our CSS, so each direction is its own path instead of a rotated one. */
  --zb-menu-icon-folded: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6z"></path></svg>');
  --zb-menu-icon-unfolded: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 24 24"><path fill="rgba(0,0,0,0.5)" d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6z"></path></svg>');
}

:root.theme-dark {
  --zb-menu-color: #dadde1;
  --zb-menu-color-active: var(--zb-paper-ink);
  --zb-menu-tint: #ffffff0d;
  --zb-menu-icon-filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%);
}

/* Scrollbars: Scaladoc hides them (a 5px one in the sidebar), the docs pages keep the browser's. Setting the standard
   scrollbar-color makes the browser ignore Scaladoc's ::-webkit-scrollbar rules and draw full-width ones again, in
   its default colours, with Docusaurus' color-scheme per mode. */
:root {
  color-scheme: light;
  --zb-scrollbar: #c1c1c1 #f1f1f1;
}

:root.theme-dark {
  color-scheme: dark;
  --zb-scrollbar: #6b6b6b #2b2b2b;
}

:root,
#leftColumn .side-menu {
  scrollbar-color: var(--zb-scrollbar);
}

/* Scaladoc's Docs/API switcher only matters on a Scaladoc site with its own docs section; /api has the API alone, and
   the site docs are a navbar link away. Hide it and give the menu its height. */
#leftColumn .switcher-container {
  display: none;
}

#leftColumn .side-menu {
  height: 100%;
  padding: 0.5rem 0 0.5rem 0.5rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
  font-weight: 500;
}

#leftColumn .side-menu .ni .ni {
  padding-left: 0.75rem;
}

#leftColumn .side-menu .nh {
  display: flex;
  align-items: stretch;
  margin-top: 0.25rem;
  padding: 0;
  border-radius: 0;
  transition: background 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
}

/* Like .menu__list-item:not(:first-child): no gap above the first row */
#leftColumn .side-menu > .ni:first-child > .nh {
  margin-top: 0;
}

#leftColumn .side-menu .nh:hover,
#leftColumn .side-menu .nh.selected {
  background: var(--zb-menu-tint);
}

#leftColumn .side-menu .nh > a {
  flex: 1;
  left: 0;
  max-width: none;
  padding: 0.375rem 0.75rem;
  color: var(--zb-menu-color);
  font-size: 1rem;
  line-height: 1.25;
  font-weight: 500;
  transition: color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
}

#leftColumn .side-menu .nh.cs > a,
#leftColumn .side-menu .nh.selected > a {
  color: var(--zb-menu-color-active) !important;
}

/* The current page is bold when it is a leaf, as .menu__link--active:not(.menu__link--sublist) */
#leftColumn .side-menu .nh.selected:not(:has(> button.ar)) > a {
  font-weight: 700;
}

/* Kind icons at 1.5rem (Scaladoc draws them at 16px). They are 0.25rem taller than a row's text, so they reach 0.125rem
   into the row's padding above and below rather than make the row taller than a docs row. */
#leftColumn .side-menu .micon {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
  margin-block: -0.125rem;
}

/* The caret: Scaladoc's arrow button, moved after the link and drawn as .menu__caret */
#leftColumn .side-menu .nh > button.ar {
  order: 1;
  position: static;
  left: auto;
  flex: none;
  box-sizing: content-box;
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0.375rem 0.75rem;
  border: none;
  border-radius: 0;
  background: none;
  transition: background 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
}

#leftColumn .side-menu .nh > button.ar:hover {
  background: var(--zb-menu-tint);
}

#leftColumn .side-menu .nh > button.ar.icon-button::after {
  content: '';
  display: block;
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--zb-menu-icon-folded) 50% / 2rem 2rem;
  filter: var(--zb-menu-icon-filter);
}

#leftColumn .side-menu .nh > button.ar.icon-button.expanded::after {
  background-image: var(--zb-menu-icon-unfolded);
}

/* Breadcrumbs, as Docusaurus draws them (Infima's .breadcrumbs at the doc page's 0.8 size): links in the text colour,
   the current page tinted in the active colour, chevron separators, a home icon */
:root {
  --zb-crumb-color: var(--zb-ink);
  --zb-crumb-color-active: var(--zb-ultramarine);
  --zb-crumb-separator-filter: none;
}

:root.theme-dark {
  --zb-crumb-color: var(--zb-paper-ink);
  --zb-crumb-color-active: var(--zb-paper-ink);
  --zb-crumb-separator-filter: invert(64%) sepia(11%) saturate(0%) hue-rotate(149deg) brightness(99%) contrast(95%);
}

#content .zb-breadcrumbs {
  margin: 0 0 0.8rem;
  font-family: var(--body-font-family);
}

.zb-breadcrumbs__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.zb-breadcrumbs__item {
  display: inline-block;
}

.zb-breadcrumbs__item:not(:last-child)::after {
  content: ' ';
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin: 0 0.5rem;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 256 256"><g><g><polygon points="79.093,0 48.907,30.187 146.72,128 48.907,225.813 79.093,256 207.093,128"/></g></g></svg>') center;
  filter: var(--zb-crumb-separator-filter);
  opacity: 0.5;
}

.zb-breadcrumbs__link {
  display: inline-block;
  padding: 0.32rem 0.64rem;
  border-radius: 0;
  color: var(--zb-crumb-color);
  font-size: 0.8rem;
  line-height: 1.65;
  text-decoration: none;
  transition: background 200ms cubic-bezier(0.08, 0.52, 0.52, 1), color 200ms cubic-bezier(0.08, 0.52, 0.52, 1);
}

#content .zb-breadcrumbs__link {
  text-decoration: none;
}

a.zb-breadcrumbs__link:hover,
.zb-breadcrumbs__item--active .zb-breadcrumbs__link {
  background: var(--zb-menu-tint);
  text-decoration: none;
}

a.zb-breadcrumbs__link:hover {
  color: var(--zb-crumb-color);
}

.zb-breadcrumbs__item--active .zb-breadcrumbs__link {
  color: var(--zb-crumb-color-active);
}

.zb-breadcrumbs__home {
  position: relative;
  top: 1px;
  width: 1.1rem;
  height: 1.1rem;
  vertical-align: top;
}

/* The table of contents: 0.8rem, as .table-of-contents__link */
#toc .toc-list a,
#toc .toc-title {
  font-size: 0.8rem;
  line-height: 1.65;
}

#toc .toc-title {
  font-weight: 700;
}

/* The table of contents' rhythm: Infima's 0.5rem between entries and 1rem per nesting level */
#toc li {
  margin: 0.5rem 0;
}

#toc .toc-list li > ul {
  margin-top: 0.5rem;
  padding-left: 1rem;
}

/* Headings: Infima's sizes at the site's weight 800 */
#content h1,
#content h2,
#content h3,
#content h4 {
  line-height: 1.25;
  font-weight: 800;
}

#content h1,
#content h2,
#content h3 {
  letter-spacing: -0.01em;
}

#content h1,
#content h1:first-of-type {
  font-size: 3rem;
  line-height: 1.25;
}

#content h2 {
  font-size: 2rem;
}

#content h3 {
  font-size: 1.5rem;
}

#content h4 {
  font-size: 1rem;
}

/* Running text, labels and tables: 16px at line height 1.65, table labels bold like a docs <th> */
#content .body-medium,
#content .body-small,
#content p,
#content li,
#content dt,
#content dd,
#content .originInfo {
  font-size: 1rem;
  line-height: 1.65;
}

#content dl.attributes > dt {
  font-weight: 700;
}

#content button,
#content .text-button {
  font-family: var(--body-font-family);
  font-size: 0.8rem;
}

/* Code: the site's monospace at 90%; blocks and signatures at line height 1.45, as a docs code block */
#content code,
#content pre,
#content .monospace,
#content .signature,
#content .snippet pre code {
  font-family: var(--code-font-family);
}

#content :not(pre) > code {
  font-family: var(--code-font-family);
  font-size: 0.9em;
  line-height: inherit;
}

#content pre,
#content pre code,
#content .mono-small-block,
#content .mono-medium,
#content .mono-medium .signature {
  font-size: 0.9rem;
  line-height: 1.45;
}

/* Columns: the docs page grid (Infima's .container > .row with a 75% doc column and a 25% table of contents, 16px
   gutters, 1280px at most), so text starts 16px right of a 300px sidebar as it does on a docs page. Scaladoc's own
   grid is a 313px sidebar, 48-68px gutters and a 720px text column. */
@media (min-width: 429px) {
  #leftColumn {
    box-sizing: border-box;
    width: 300px;
  }
}

/* Below 997px the sidebar slides in over the page, pushing the text aside as Scaladoc does */
@media (max-width: 996px) {
  #content.sidebar-shown {
    margin-left: 300px;
  }
}

/* Under the navbar the column starts 1rem down, as the docs .container does (Scaladoc pads it 144px) */
#content {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
  padding-top: calc(var(--zb-navbar-height) + 1rem);
  padding-inline: 1rem;
  gap: 2rem;
  justify-content: flex-start;
}

/* The container's steps on a docs page, by viewport width (the site's Tailwind .container) */
@media (min-width: 640px) {
  #content {
    max-width: 40rem;
  }
}

@media (min-width: 768px) {
  #content {
    max-width: 48rem;
  }
}

@media (min-width: 1024px) {
  #content {
    max-width: 64rem;
  }
}

@media (min-width: 1280px) {
  #content {
    max-width: 80rem;
  }
}

@media (min-width: 1536px) {
  #content {
    max-width: 96rem;
  }
}

/* Docusaurus keeps the sidebar down to 997px; Scaladoc folds it away below 1025px */
@media (min-width: 997px) and (max-width: 1024px) {
  #leftColumn {
    left: 0;
  }

  #mobile-sidebar-toggle {
    display: none;
  }

  /* The sidebar is pinned here, so Scaladoc's push for a slid-in sidebar would count it twice */
  #content.sidebar-shown {
    margin-left: auto;
  }
}

/* Inside the 1rem padding: 75% of the row less its 1rem gutters, then the 2rem between the columns */
#content > div:first-child {
  width: calc(75% - 0.5rem);
  max-width: none;
  flex: none;
}

#toc {
  width: calc(25% - 1.5rem);
  flex: none;
}

#toc-container {
  box-sizing: border-box;
  width: 100%;
  top: calc(var(--zb-navbar-height) + 1rem);
}

/* Docusaurus drops the table of contents at 996px and gives the text the full width */
@media (max-width: 996px) {
  #toc {
    display: none;
  }

  #content > div:first-child {
    width: 100%;
  }
}

/* One left edge for the text: the title first (its class/object badge after it), attribute labels flush left */
#content .cover-header {
  flex-direction: row-reverse;
  justify-content: flex-end;
}

#content .cover-header > a {
  margin-left: 1rem;
}

#content dl.attributes > dt {
  text-align: left;
  padding-left: 0;
}