/* Brand colors taken from anitra.cz: white header, graphite text, green accents */
:root {
  --anitra-green: #88c754;
  --anitra-green-dark: #5e9a2c;
  --anitra-graphite: #434848;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-fg-color--dark: #f4f4f4;
  --md-primary-bg-color: var(--anitra-graphite);
  --md-primary-bg-color--light: #6b7070;
  --md-accent-fg-color: var(--anitra-green-dark);
  /* Pure brand green is too light for text links on white */
  --md-typeset-a-color: var(--anitra-green-dark);
  --md-default-fg-color: var(--anitra-graphite);
  --md-footer-bg-color: var(--anitra-graphite);
  --md-footer-bg-color--dark: #2f3333;
}

[data-md-color-scheme="slate"] {
  --md-hue: 180;
  --md-primary-fg-color: var(--anitra-graphite);
  --md-primary-fg-color--light: #6b7070;
  --md-primary-fg-color--dark: #2f3333;
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: var(--anitra-green);
  --md-typeset-a-color: var(--anitra-green);
}

/* Header has no shadow on white otherwise blends into the page */
[data-md-color-scheme="default"] .md-header {
  border-bottom: 3px solid var(--anitra-green);
}

[data-md-color-scheme="default"] .md-search__form {
  background-color: #f1f3f1;
}

[data-md-color-scheme="default"] .md-search__form:hover {
  background-color: #e6ebe3;
}

.md-header__button.md-logo img {
  height: 1.8rem;
}

/* Logo text is graphite: render it white on the dark header */
[data-md-color-scheme="slate"] .md-logo img {
  filter: brightness(0) invert(1);
}

/* Sidebar sections: slightly larger titles, indented children with a guide line (desktop layout only) */
@media screen and (min-width: 76.25em) {
  .md-nav--primary .md-nav__item--section > .md-nav__link {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--md-default-fg-color);
  }

  /* The guide line belongs to every chapter's sections, open or not - it is what
     says the menu's permanent structure apart from what is added dynamically.
     Material draws a line of its own over the open chapter (white on white in
     this palette) with a selector specific enough to win, so this one matches it:
     [dir] + five classes. The dashed branches are excluded; they have their own. */
  [dir=ltr] .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav:not(.md-nav--detail):not(.md-nav--detail-host),
  .md-nav--primary .md-nav__item--section > .md-nav {
    margin-left: 0.3rem;
    padding-left: 0.5rem;
    border-left: 2px solid var(--anitra-green);
  }

  /* Both lines end at their last row - the space to the next chapter is a margin,
     outside the line, so the rhythm of the menu is the same whether the chapter
     above has sections, a branch, or neither. */
  [dir=ltr] .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav > .md-nav__list {
    padding-bottom: 0;
  }

  [dir=ltr] .md-nav--primary > .md-nav__list > .md-nav__item > .md-nav {
    margin-bottom: 0.2rem;
  }
}

/* The sidebar is sticky under the header, but in the flow it starts lower than it
   sticks: the row that holds the menu and the page (.md-main__inner) has a top
   margin, so the whole menu slid up by that much the moment anything scrolled -
   which reads as the menu jumping every time a link is clicked.

   Taking that margin off the row and giving it to the page column instead does stop
   the jumping, but it also moves something invisible: Material decides which heading
   you are in from `header height + 0.8 * (row offset - main offset)`, so a row with
   no margin leaves the bare header (63px) while a clicked heading lands 68px down -
   and the menu keeps marking the heading above the one you clicked until you scroll
   a little further. So the row keeps the theme's margin and the sidebar alone is
   pulled back up by it: the menu starts exactly where it sticks, and every
   measurement Material takes is the one the theme expects. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    margin-top: -1.5rem;
  }

  /* A row of the menu is one line. The long headings migrated from the old wiki
     carry a short label for the menu (data-menu, see hooks/menu_labels.py); what
     would still not fit is cut with an ellipsis instead of wrapping over three
     lines, and the whole heading stays in the row's tooltip. */
  .md-nav--primary .md-ellipsis {
    white-space: nowrap;
  }

  /* A little more width and a tighter rhythm, so the whole menu fits on a screen
     rather than being scrolled. */
  .md-sidebar--primary {
    width: 13.5rem;
  }

  .md-nav--primary .md-nav__link {
    margin-top: 0.35em;
  }

  /* Legal is the only nav section and Material sets it off with 1.25em; keep the
     menu's rhythm instead. */
  .md-nav--primary .md-nav__item--section {
    margin: 0.2rem 0 0;
  }

  /* The sidebar's own padding costs two rows' worth of height */
  .md-sidebar--primary {
    padding-block: 0.6rem;
  }

  /* Material's script pins the sidebar to the measured height of the header, which
     is taller here than the 2.4rem the stylesheet assumes (the brand logo). This is
     the same value for a default font size, and only matters if that script has not
     run yet. */
  .md-sidebar--primary {
    top: 3.15rem;
  }
}

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--anitra-green-dark);
}

.md-typeset .md-button--primary {
  background-color: var(--anitra-green);
  border-color: var(--anitra-green);
  color: #ffffff;
}

/* Screenshots from the wiki have fixed widths; never overflow the content column */
.md-typeset img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

.md-typeset p > img,
.md-typeset li > img {
  box-shadow: var(--md-shadow-z1);
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--anitra-green);
}

.md-typeset table:not([class]) {
  font-size: 0.7rem;
}

/* The site name above the menu is the way to the front page, so it has to look
   like something you can click; Material styles that line as a plain label. */
.md-nav__title-link {
  color: inherit;
  text-decoration: none;
}
.md-nav__title-link:hover,
.md-nav__title-link:focus-visible {
  color: var(--anitra-green-dark);
}

/* Detail pages in the menu.

   A detail page is not part of the menu's permanent structure - it is a page
   one section of a chapter links on to. It appears under that section, and only
   while the reader is in it: Material's scroll tracking marks the section's row
   --active as the page scrolls, and the rule below hangs the link off that.
   A chapter with no sections carries such links the whole time it is open
   (md-nav--detail-open), as does the chapter a detail page was opened from.

   So it has to read differently from the structure around it: a dashed line and
   an arrow against the solid guide line of the chapter's own sections. Green
   stays what it is everywhere else - this is where you are. */
:root {
  --anitra-blue: #2f6f8f;
}

[data-md-color-scheme="slate"] {
  --anitra-blue: #7fb8d4;
}

.md-nav--detail {
  display: none;
  margin-left: 0.3rem;
  padding-left: 0.5rem;
  border-left: 2px dashed var(--anitra-blue);
  /* Material's rhythm is a list padded at the bottom and a nav pulled back up by
     the same amount; a line drawn on the nav would then hang below its last row,
     so here the padding goes and the pull-back with it. */
  margin-bottom: 0;
}

/* Material collapses every nav that sits next to a toggle and animates it open
   with a grid row, so showing one takes all three properties - and a selector
   at least as specific as the theme's own. */
.md-nav__link--active + .md-nav--detail,
.md-nav--detail-open,
.md-nav__toggle ~ .md-nav--detail-open {
  display: block;
  visibility: visible;
  opacity: 1;
}

.md-nav--detail > .md-nav__list > .md-nav__item > .md-nav__link {
  color: var(--anitra-blue);
}

.md-nav--detail > .md-nav__list > .md-nav__item > .md-nav__link .md-ellipsis::before {
  content: "→ ";
}

/* The detail page being read is where the reader is, so it is green like any
   other current page - the dashed line already says it was added dynamically. */
.md-nav--detail > .md-nav__list > .md-nav__item > .md-nav__link--active {
  color: var(--anitra-green-dark);
  font-weight: 700;
}

/* Its own headings sit under it, as the chapter's sections do under a chapter */
.md-nav--detail .md-nav--secondary {
  margin-left: 0.3rem;
  padding-left: 0.5rem;
}

/* The dashed line hugs what it holds. Material pads the lists of a table of
   contents and spaces the open one off the chapter below, which would otherwise
   leave the line hanging in the air under the last row. */
.md-nav--detail .md-nav__list {
  padding-bottom: 0;
}

/* Material pairs that padding with a -0.4rem margin on the list's own nav, so
   taking the padding away leaves the margin pulling whatever follows a nested
   group 0.4rem too close - the one uneven gap left in the menu, between the last
   sub-heading of a group and the next heading (/data/data-flows/). */
.md-nav--detail .md-nav {
  margin-bottom: 0;
}

.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav--detail .md-nav--secondary {
  margin-bottom: 0;
}

/* Material sets the open chapter's sections off from the chapter below with an
   extra 1.25em. It reads as a hole that opens up wherever the reader happens to
   be, so the spacing stays the same everywhere in the menu. */
.md-nav--integrated > .md-nav__list > .md-nav__item--active .md-nav--secondary {
  margin-bottom: 0;
}

/* At the top of a page no heading has gone by yet, so Material's scroll tracking
   marks nothing and the menu stops saying where the reader is - on a chapter whose
   first section starts right under the title that is most of the first screen.
   Until the first heading passes, the first section is the one being read. */
.md-nav__list[data-md-component="toc"]:not(:has(.md-nav__link--active))
  > .md-nav__item:first-child > .md-nav__link {
  color: var(--anitra-green-dark);
}

.md-nav__list[data-md-component="toc"]:not(:has(.md-nav__link--active))
  > .md-nav__item:first-child > .md-nav__link + .md-nav--detail {
  display: block;
  visibility: visible;
  opacity: 1;
}

/* The last section of a short page has to be reachable.

   Material marks a heading as the one you are in once it is nearer the top of the
   window than its threshold, and on a page too short for that it falls back to a
   second rule: at the very bottom of the document, every heading counts as read and
   the last one is marked. The bottom it measures is `document.body.offsetHeight`,
   which includes the footer - so the rule only fires once the reader has scrolled
   the footer fully into view, which nobody does. The section they are actually
   reading stays unmarked (seen on /app/lists/ with two sections).

   A negative bottom margin on the footer shortens the body by its own height. The
   footer still paints where it did and the page still scrolls exactly as far, so
   nothing moves on screen - but Material's "bottom of the document" is now the end
   of the text, and the last section is marked as soon as the reader gets there. */
.md-footer {
  margin-bottom: -8rem;
}

/* ...and because the body is a flex column whose content area takes the free
   space, a page shorter than the window would hand that 8rem back to the
   content and push the footer below the fold. The body's minimum loses the
   same 8rem, so such a page still ends exactly at the bottom of the window. */
body {
  min-height: calc(100% - 8rem);
}