extra.css

/* Sidebar hierarchy + density for Zensical's UI (Material-compatible md-*
   DOM, but different stock spacing: nav links are 8px-radius pills with
   7px 16px padding). All rules scoped to the desktop sidebar breakpoint
   (>= 76.25em) so the mobile drill-down drawer keeps stock styling. Colors
   use the md-* tokens, so the light and slate schemes both work without
   extra palette handling. */

@media screen and (min-width: 76.25em) {
  /* Section labels: smaller, uppercase, letter-spaced, muted, and flush
     with the guide line below them. The label is a container whose inner
     anchor carries the stock pill padding; zero both so the label text
     starts at the section's left edge. */
  .md-sidebar--primary .md-nav__item--section > .md-nav__link {
    margin-top: 0;
    margin-left: 0;
    padding-left: 0;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--md-default-fg-color--light);
  }
  .md-sidebar--primary .md-nav__item--section > .md-nav__link > a {
    padding: 2px 0;
  }

  /* Indent section children slightly and hang a guide line. */
  .md-sidebar--primary .md-nav__item--section > .md-nav {
    margin-inline-start: 0.1rem;
    border-inline-start: 0.05rem solid var(--md-default-fg-color--lightest);
  }

  /* Same guide line for collapsible groups inside the API Reference subtree
     (section items also carry --nested, so exclude them). */
  .md-sidebar--primary .md-nav__item--nested:not(.md-nav__item--section) > .md-nav {
    border-inline-start: 0.05rem solid var(--md-default-fg-color--lightest);
  }

  /* Tighten vertical rhythm: the stock pill rows (7px 16px padding plus
     6.3px top margins) read too airy for a deep nav; keep the pill shape
     and active highlight, just denser. */
  .md-sidebar--primary .md-nav__item > .md-nav__link {
    padding: 4px 10px;
    margin-top: 2px;
  }
  .md-sidebar--primary .md-nav__item--section {
    margin: 1em 0;
  }

  /* The current page stands out from its siblings (on top of the stock
     pill highlight). 700 because only Inter 300/400/700 are loaded. */
  .md-sidebar--primary .md-nav__link--active {
    font-weight: 700;
  }

  /* The sidebar repeats the site name right above the homepage nav entry;
     drop the title row on desktop (the mobile drawer still needs it for its
     drill-down back-navigation, hence the media-query scope). */
  .md-sidebar--primary .md-nav--primary > .md-nav__title {
    display: none;
  }
}

/* Dark scheme: Zensical's slate canvas is near-black (hsla(225,15%,5%)),
   harsher than the Material slate this site shipped with; restore that
   blue-grey. Code blocks and other surfaces keep Zensical's own tokens. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #1e2129;
}

/* Headings: the 300-weight light-gray defaults read washed out; use the
   full foreground color and a solid weight instead. 700, not 600: only
   Inter 300/400/700 are loaded (see the nav__link note above). */
.md-typeset h1,
.md-typeset h2 {
  font-weight: 700;
  color: var(--md-default-fg-color);
}
.md-typeset h3 {
  font-weight: 700;
}