/* renderStacks docs - prototype tweaks */

/* h4 is the established section-heading level in these pages; give it the
   visual weight the weDocs theme used to supply. */
.md-typeset h4 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.6em 0 .6em;
  color: var(--md-default-fg-color);
}

/* Screenshots: keep them from blowing past the column, and give them a frame
   so UI captures read as UI captures. */
.md-typeset img {
  max-width: 100%;
  height: auto;
  border-radius: 2px;
}

/* responsive video embeds (replaces the WP oEmbed wrapper) */
.rs-video {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  margin: 1em 0;
}
.rs-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* WordPress image alignment, preserved from the weDocs source via attr_list */
.md-typeset img.alignright {
  float: right;
  margin: .4rem 0 .8rem 1.2rem;
  max-width: 50%;
}
.md-typeset img.alignleft {
  float: left;
  margin: .4rem 1.2rem .8rem 0;
  max-width: 50%;
}
.md-typeset img.aligncenter {
  display: block;
  margin: .8rem auto;
}
/* keep a floated screenshot from spilling past its section */
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 { clear: both; }

@media screen and (max-width: 46.1875em) {
  .md-typeset img.alignright,
  .md-typeset img.alignleft {
    float: none;
    margin: .8rem 0;
    max-width: 100%;
  }
}

/* Sidebar: collapsible sections (Material default once navigation.sections is
   off) already indent their children, so all that is left is a faint guide line
   to tie a long section like the 50 pmodifiers together. */
.md-nav--primary .md-nav__item--nested > .md-nav > .md-nav__list {
  border-left: .05rem solid var(--md-default-fg-color--lightest);
}

/* ------------------------------------------------------------------------ */
/* Theme bridge: carry the site's palette and display face into Material, so  */
/* crossing from a site page into the docs is not a change of brand.          */
/* The tokens themselves live in rs-theme.css, which loads first.             */

[data-md-color-primary="black"] {
  --md-primary-fg-color: var(--rs-ink);
  --md-primary-fg-color--light: var(--rs-ink-2);
  --md-primary-fg-color--dark: #0e0f12;
}

/* Slate is the documentation's default, so the docs sit on the same bands as
   the rest of the site. Material derives most of its slate surfaces from one
   background and one foreground, so redefining those two - plus the code and
   footer surfaces, which it sets separately - carries the whole scheme over.
   The light scheme is still one click away on the header toggle. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color:           var(--rs-band);
  --md-default-bg-color--light:    rgba(11, 18, 29, .54);
  --md-default-bg-color--lighter:  rgba(11, 18, 29, .26);
  --md-default-bg-color--lightest: rgba(11, 18, 29, .07);

  --md-default-fg-color:           rgba(230, 235, 245, .95);
  --md-default-fg-color--light:    rgba(230, 235, 245, .62);
  --md-default-fg-color--lighter:  rgba(230, 235, 245, .32);
  --md-default-fg-color--lightest: rgba(230, 235, 245, .12);

  --md-code-bg-color:   var(--rs-ink);
  --md-code-fg-color:   rgba(230, 235, 245, .88);
  --md-footer-bg-color: var(--rs-ink);
  --md-footer-bg-color--dark: var(--rs-ink);

  --md-typeset-table-color: var(--rs-ink-3);

  /* Links and the accent, in the site's orange.
     These were on :root until they were measured, which is the one place
     they could not work: Material sets data-md-color-scheme on <body> and
     declares its own values under that attribute, so :root was inherited
     down and overridden before it reached anything.  The documentation had
     been running on Material's blue links and amber accent throughout.
     Same trap as the font family below, same answer - declare where
     Material declares.

     Slate only.  On the light scheme this orange is 3.3:1 against white,
     under the 4.5:1 a link needs, so that scheme keeps Material's own. */
  --md-accent-fg-color: var(--rs-accent);
}

/* The link colour needs a second attribute to land.  Material declares
   --md-typeset-a-color three times, the last of them pairing the scheme with
   the primary - [data-md-color-scheme="slate"][data-md-color-primary="black"]
   - so a rule written against the scheme alone is a class short and loses,
   however late it loads.  Matching the scheme plus the presence of a primary
   ties that and wins on order, without pinning which primary is set. */
[data-md-color-scheme="slate"][data-md-color-primary] {
  --md-typeset-a-color: var(--rs-accent);
}

/* The page you are on, in the logo's yellow.
   It is the brightest hue in the spectrum on these bands - 11.3:1, where the
   pink manages 4.9 - and holding it back from the links keeps "where I am"
   and "where I can go" from reading as the same thing. */
.md-nav__item .md-nav__link--active,
.md-nav__item .md-nav__link--active code {
  color: var(--rs-yellow);
}

/* the same link, in the drawer Material swaps to on a phone */
@media screen and (max-width: 44.9844em) {
  .md-nav--primary .md-nav__item--active > .md-nav__link {
    color: var(--rs-yellow);
  }
}

/* The migrated pages carry inline colours chosen for a white page. Five of
   them fall under 4.5:1 on the dark bands - the greens are the common ones,
   110 spans of #008000 alone - so the dark scheme remaps those to a lighter
   sibling of the same hue. !important is the only thing that beats an inline
   style, and the light scheme still shows the originals. */
[data-md-color-scheme="slate"] .md-typeset [style="color:#008000"] { color: #4caf50 !important; }
[data-md-color-scheme="slate"] .md-typeset [style="color:#0000ff"] { color: var(--rs-blue) !important; }
[data-md-color-scheme="slate"] .md-typeset [style="color:#800080"] { color: #c792ea !important; }
[data-md-color-scheme="slate"] .md-typeset [style="color:#800000"] { color: #ff8a80 !important; }
[data-md-color-scheme="slate"] .md-typeset [style="color:#000000"] { color: inherit !important; }

/* The search field and the sidebar cards read as tiles, like the ones on the
   site, rather than as a lighter wash of the page. */
[data-md-color-scheme="slate"] .md-search__form,
[data-md-color-scheme="slate"] .md-search__input {
  background-color: var(--rs-surface);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: var(--rs-surface);
}

/* Material's header sits directly under the site bar. Dropping its shadow and
   letting the two share one dark mass reads as a single block, divided only by
   the spectrum hairline the site bar already draws. */
.md-header { box-shadow: none; }

/* Both faces, from the site's own tokens.
 *
 * Material builds its two stacks as var(--md-text-font, _) plus fallbacks, so
 * pointing the assembled family at the tokens hands the documentation the same
 * pair the marketing pages use. Until this was written the documentation set
 * its body copy in Roboto - Material's default - while the rest of the site
 * used the --rs-body face, and overrides/main.html downloaded that face on all
 * 106 pages for nothing to use it. One token now drives both.
 *
 * The selector has to be body rather than :root. That is where Material makes
 * its own declaration, so a value set on :root is inherited down and then
 * overridden by body's - the page still renders in the fallback stack and
 * looks near enough to Plex at a glance to pass a screenshot.
 *
 * Dosis stays on headings only: it is a display face and tires over a long
 * page of reference material. */
body {
  --md-text-font-family: var(--rs-body);
  --md-code-font-family: var(--rs-mono);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__title,
.md-tabs__link {
  font-family: var(--rs-display);
  font-weight: 800;
  letter-spacing: -.01em;
}

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

/* The page title, in the logo's blue.
   Material defaults .md-typeset h1 to --md-default-fg-color--light, which on
   these bands resolves to .62 - fainter than the body copy and fainter than
   the h4 subsections under it, so the largest text on a page was also its
   dimmest.  Giving the title a colour of its own settles that in the same
   stroke.

   3a86ff reads 5.4:1 on the dark bands and 3.5:1 on the light scheme's white.
   The title is 32px at weight 800, which WCAG counts as large text and holds
   to a 3:1 threshold, so it clears AA in both schemes - but only at that size,
   which is why this stays on h1 and is not carried down to the smaller
   headings. */
.md-typeset h1 {
  color: var(--rs-blue);
}

/* ------------------------------------------------------------------------ */
/* No table of contents, and a navigation column that is always there.

   Material keeps the left column permanent only from 1220px up and turns it
   into a drawer below that - which is most laptops, and any window sharing a
   screen with something else. In a manual whose tree of fifty pmodifiers is
   the way around, a column you have to summon first is the wrong thing to
   lose, so scripts/mkdocs_hooks.py moves that switch down to 720px.

   The same hook takes the contents rail off every page. These pages carry few
   headings and the column beside them never leaves, so a second list of links
   earned little and cost a third of the width. */

/* Material folds a second copy of the contents into the navigation at phone
   widths, from a different partial than the rail, so that copy is hidden here
   - and the page's own link, which the fold replaces, comes back. */
.md-nav--primary .md-nav__link[for="__toc"],
.md-nav--primary .md-nav__link[for="__toc"] ~ .md-nav { display: none; }
.md-nav--primary .md-nav__link[for="__toc"] + .md-nav__link { display: flex; }

/* The docs body, the Material top bar and the site chrome all sit on the same
   edge.  The chrome wraps at --rs-wrap with 1.25rem of padding, so both
   Material grids are pinned to that same box rather than left on their own
   widths.  Material sets the root font to 125%, which is why its 61rem default
   lands at 1220px - 20px wider than the chrome - while the 48rem rule that
   used to live here came out at 960px, inset 120px on each side.  The rail it
   was compensating for is still rendered, so the prose was being narrowed
   twice. */
@media screen and (min-width: 45em) {
  .md-main__inner.md-grid,
  .md-header__inner.md-grid {
    max-width: var(--rs-wrap);
    padding-left: 25px;
    padding-right: 25px;
  }

  /* Pinning the grids lines up the two bars' boxes, but Material then insets
     its own contents inside that box: the logo button carries .2rem of margin
     and .4rem of padding, which put the mark 12px right of the site bar's and
     the title 24px right of the wordmark.  Two bars stacked directly on each
     other, each starting at a different place.

     The negative margin cancels the button's own padding instead of removing
     it, so the click target keeps its size.  The title then needs .4rem to
     sit where the wordmark does: the button contributes .2rem of its own
     margin-right on top of it.

     The title has to be matched on [dir=ltr] as well.  Material ships its
     logical properties as [dir=ltr]/[dir=rtl] pairs, so a bare
     .md-header__title is a class short and loses, however late it loads. */
  .md-header__button.md-logo { margin-left: -.4rem; }
  [dir="ltr"] .md-header__title { margin-left: .4rem; }
}