/* ---------------------------------------------------------------------------
   Readability pass.

   The wiki was hard to read next to comparable plugin docs for three reasons,
   all of them fixable without touching the brand: body copy set below 16px, nav
   labels at roughly 5:1 contrast, and lines packed tightly enough that long
   reference tables ran together.

   Nothing here changes a brand colour. It changes SIZE, WEIGHT, CONTRAST and
   SPACING, which is what actually makes a page readable.
   --------------------------------------------------------------------------- */

/* Body copy. Material ships .8rem; documentation wants to be read, not skimmed. */
.md-typeset {
  font-size: 0.85rem;
  line-height: 1.75;
}

.md-typeset p,
.md-typeset li {
  letter-spacing: 0.005em;
}

/* Headings need to out-weigh body text more than the default does, so a page
   scans by shape before it is read. */
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
}

.md-typeset h2 {
  font-weight: 750;
  letter-spacing: -0.01em;
  margin-top: 2.2em;
}

.md-typeset h3 {
  font-weight: 700;
}

/* Navigation. This is the part that reads as "greyed out" - the labels are
   destinations, not captions, and they were lighter than the body text. */
.md-nav {
  font-size: 0.76rem;
}

.md-nav__link {
  font-weight: 500;
}

.md-nav__item--active > .md-nav__link,
.md-nav__link--active {
  font-weight: 700;
}

.md-nav__title {
  font-weight: 700;
}

/* Tables carry most of the reference material in these docs. */
.md-typeset table:not([class]) {
  font-size: 0.76rem;
  line-height: 1.6;
}

.md-typeset table:not([class]) th {
  font-weight: 700;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  padding: 0.7em 1em;
}

/* Inline code sat at the same weight as prose and got lost inside sentences. */
.md-typeset code {
  font-size: 0.86em;
  font-weight: 500;
  border-radius: 4px;
  padding: 0.12em 0.38em;
}

.md-typeset pre > code {
  font-size: 0.78rem;
  line-height: 1.6;
}

/* A comfortable measure. Full-width prose on a wide monitor is tiring however
   good the type is. */
.md-content__inner {
  max-width: 52rem;
}

/* --- Light -------------------------------------------------------------- */
[data-md-color-scheme="default"] {
  --md-typeset-color: #2a2521;
  --md-default-fg-color: #2a2521;
  --md-default-fg-color--light: #4c443c;
  --md-default-fg-color--lighter: #6d6459;
}

[data-md-color-scheme="default"] .md-nav__link {
  color: #4a423a;
}

[data-md-color-scheme="default"] .md-nav__link:hover,
[data-md-color-scheme="default"] .md-nav__link--active {
  color: #1f1b18;
}

[data-md-color-scheme="default"] .md-typeset table:not([class]) th {
  background: #f6f2ec;
  color: #2a2521;
}

/* --- Dark --------------------------------------------------------------- */
[data-md-color-scheme="slate"] {
  --md-typeset-color: #ece7e0;
  --md-default-fg-color: #ece7e0;
  --md-default-fg-color--light: #cdc5ba;
  --md-default-fg-color--lighter: #a89e91;
}

[data-md-color-scheme="slate"] .md-nav__link {
  color: #cdc5ba;
}

[data-md-color-scheme="slate"] .md-nav__link:hover,
[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #fff3e0;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: rgba(255, 255, 255, 0.06);
  color: #f2ede6;
}

/* Keyboard focus has to stay visible after all of the above. */
.md-nav__link:focus-visible,
.md-typeset a:focus-visible {
  outline: 2px solid var(--md-accent-fg-color);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Navigation spacing.

   Every row was 30px tall with zero margin between them, so fifteen sibling
   pages read as one solid block of text and the eye had nothing to land on.
   Three fixes, in order of how much they help:

   1. Air between rows, so each is a separate thing.
   2. A guide rail down nested lists, so children visibly belong to a parent
      instead of floating at the same level as the plugin names.
   3. More space above each top-level entry than between its children, so the
      list groups itself.
   --------------------------------------------------------------------------- */

.md-nav__link {
  padding-top: 0.34rem;
  padding-bottom: 0.34rem;
  line-height: 1.45;
}

/* Air between siblings. */
.md-nav__list > .md-nav__item {
  margin-bottom: 0.12rem;
}

/* Top-level plugin names are section headings, and want separating from the
   block of pages above them. */
.md-nav--primary > .md-nav__list > .md-nav__item {
  margin-top: 0.5rem;
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link {
  font-weight: 600;
}

/* The rail. This is what turns a flat wall of links into a parent and its
   children at a glance. */
.md-nav__item--nested > .md-nav > .md-nav__list {
  margin-left: 0.45rem;
  padding-left: 0.7rem;
  border-left: 1px solid var(--md-default-fg-color--lightest);
}

/* The page you are on should be findable without reading. */
.md-nav__link--active {
  position: relative;
}

.md-nav__item--nested > .md-nav > .md-nav__list .md-nav__link--active::before {
  content: "";
  position: absolute;
  left: -0.75rem;
  top: 0.45rem;
  bottom: 0.45rem;
  width: 2px;
  border-radius: 2px;
  background: var(--md-accent-fg-color);
}

[data-md-color-scheme="default"] .md-nav__item--nested > .md-nav > .md-nav__list {
  border-left-color: rgba(0, 0, 0, 0.12);
}

[data-md-color-scheme="slate"] .md-nav__item--nested > .md-nav > .md-nav__list {
  border-left-color: rgba(255, 255, 255, 0.14);
}

/* ---------------------------------------------------------------------------
   Group labels inside a plugin's nav.

   "Adding content", "Running it" and so on are headings, not destinations, and
   should not look like the pages beneath them.

   The depth matters: "Plugins" is nested once, a plugin name twice, a group
   three times. Targeting two levels caught the plugin names as well and shouted
   EMBER ESSENTIALS at the reader, so the selector spells out all three.
   --------------------------------------------------------------------------- */

.md-nav__item--nested .md-nav__item--nested .md-nav__item--nested > .md-nav__link {
  text-transform: uppercase;
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  font-weight: 700;
  margin-top: 0.9rem;
  opacity: 0.9;
}

/* Plugin names stay as names: readable case, and heavier than their pages. */
.md-nav__item--nested .md-nav__item--nested > .md-nav__link {
  font-weight: 650;
}

/* A group's children sit under its label and do not need a second rail inside
   the one the plugin already has. */
.md-nav__item--nested .md-nav__item--nested .md-nav__item--nested > .md-nav > .md-nav__list {
  border-left: 0;
  margin-left: 0;
  padding-left: 0.15rem;
}

[data-md-color-scheme="default"] .md-nav__item--nested .md-nav__item--nested .md-nav__item--nested > .md-nav__link {
  color: #7a6f62;
}

[data-md-color-scheme="slate"] .md-nav__item--nested .md-nav__item--nested .md-nav__item--nested > .md-nav__link {
  color: #a99e90;
}