/* Site styling, kept to two things it actually needed.
 *
 * Material is left alone everywhere else on purpose: a theme edited for taste drifts
 * from its own upgrade path, and every rule here is one more thing to re-check when
 * the theme moves.
 */

/* --- The build version, in the header ------------------------------------- *
 *
 * Sits beside the repository link at the top right. A reader who finds something
 * that does not match the system in front of them needs to be able to tell whether
 * they are reading about a different build, and asking them to go and look it up is
 * asking them not to bother.
 */

/* Two changes, both forced by the extra child.
 *
 * Material lays this container out as a block with a fixed 11.7rem width, so adding
 * anything beside the repository link first stacks it above, and then — once it is a
 * row — overflows it leftwards across the search box, because the contents need more
 * room than the fixed width allows. Measured rather than guessed: the container was
 * 234px holding 305px of content.
 *
 * So: a centred row that sizes to what is in it. The header is already a flex row,
 * so the search field yields the difference, which is the right thing to give up. */
.md-header__source {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* Material sets `width: 11.7rem` *and* `max-width: 11.7rem`. Releasing only the
   * width leaves the max-width clamping it to the same 234px, which looks exactly
   * like a specificity problem and is not one. Both have to go. */
  width: auto;
  max-width: none;
  flex: 0 0 auto;
}

/* The link takes what it needs; the chip takes what it needs; neither grows. */
.md-header__source .md-source {
  flex: 0 0 auto;
}

/* Material caps the repository name against the container's width. Once that width
 * is derived from the content, the two depend on each other and the name truncates —
 * it read in full before the version was added, and adding something should not have
 * cost it. */
.md-header__source .md-source__repository {
  max-width: none;
}

.md-version {
  flex: 0 0 auto;
  margin-right: 0.8rem;
  font-family: var(--md-code-font-family), monospace;
  font-size: 0.62rem;
  line-height: 1.3;
  color: var(--md-primary-bg-color);
  /* Quiet by construction rather than by decoration. A bordered chip reads as a
   * control and invites a click; this is reference information and should sit in the
   * header the way a build number sits on a title bar. */
  opacity: 0.65;
  white-space: nowrap;
  transition: opacity 125ms;
}

.md-version:hover {
  opacity: 1;
}

/* The header collapses hard on a phone, and the repository name is already dropped
 * there by Material. The version follows it rather than crowding the title. */
@media screen and (max-width: 76.1875em) {
  .md-version {
    display: none;
  }
}

/* --- Navigation: a grouping should not look like a destination ------------ *
 *
 * With `navigation.sections`, Material renders a section label and the pages inside
 * it with the same weight, the same colour and the same indent — so the eye cannot
 * tell a heading from something clickable, and the structure has to be inferred from
 * the words. These rules do the two things that fix it: make the label read as a
 * label, and indent what belongs under it.
 */

.md-nav--primary .md-nav__item--section > .md-nav__link {
  color: var(--md-default-fg-color--light);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Not a link, so it should not answer to a pointer as though it were. */
  cursor: default;
  opacity: 1;
}

/* Material dims a section label on hover as if it were actionable. It is not. */
.md-nav--primary .md-nav__item--section > .md-nav__link:hover {
  color: var(--md-default-fg-color--light);
}

/* Air above each grouping, so the sections read as separate blocks rather than one
 * long list. Not above the first, which would push the whole nav down. */
.md-nav--primary .md-nav__item--section {
  margin-top: 1.1rem;
}

.md-nav--primary > .md-nav__list > .md-nav__item--section:first-child {
  margin-top: 0.2rem;
}

/* The pages inside a grouping, indented so the hierarchy is visible rather than
 * implied. Material's own nesting applies no indent at this level. */
.md-nav--primary .md-nav__item--section > .md-nav > .md-nav__list > .md-nav__item > .md-nav__link {
  padding-left: 0.6rem;
  border-left: 1px solid var(--md-default-fg-color--lightest);
}

/* The page you are on, marked on the same rail so the indent reads as a column
 * rather than as a stray line. */
.md-nav--primary
  .md-nav__item--section
  > .md-nav
  > .md-nav__list
  > .md-nav__item
  > .md-nav__link--active {
  border-left: 2px solid var(--md-accent-fg-color);
  padding-left: calc(0.6rem - 1px);
}