/* renderStacks - shared theme layer.
   ---------------------------------------------------------------------------
   Loaded by every page of the site AND by the documentation, so the top bar
   and the footer are identical in both.  Everything here is scoped to an
   .rs-* class so it can sit next to Material for MkDocs without either side
   restyling the other.

   The palette is taken from the logo itself - the five layer edges, sampled
   off Logo..png:

       #ffbe13  #fb5500  #ff006e  #8337ec  #3a86ff

   That spectrum is the whole identity.  It appears at full strength only as a
   hairline under the solid header and as the rule under section headings -
   used sparingly it reads as a brand, used everywhere it reads as a toy.

   The surfaces are the same five hues taken down to S 44% / L 8%.  The hero
   keeps its own base a few steps up, so that every band below it is darker
   than the darkest pixel of the hero's wash and the page only ever settles
   as you scroll - it never brightens again.
   --------------------------------------------------------------------------- */

:root {
  /* brand spectrum, bottom of the stack to the top */
  --rs-blue:   #3a86ff;
  --rs-purple: #8337ec;
  --rs-pink:   #ff006e;
  --rs-orange: #fb5500;
  --rs-yellow: #ffbe13;
  --rs-spectrum: linear-gradient(90deg,
      var(--rs-blue), var(--rs-purple), var(--rs-pink),
      var(--rs-orange), var(--rs-yellow));

  /* the orange carries over from the old site, so links keep their colour */
  --rs-accent: var(--rs-orange);

  /* the spectrum again, as band tints - each hue at S 44% / L 8% */
  --rs-tint-blue:   #0b121d;
  --rs-tint-purple: #140b1d;
  --rs-tint-pink:   #1d0b13;
  --rs-tint-orange: #1d110b;
  --rs-tint-yellow: #1d190b;

  --rs-hero:   #0d1422;   /* the hero's base, under the two colour washes */
  --rs-ink:    #070b12;   /* deepest - the bar, the dark sections, the footer */
  --rs-ink-2:  #101828;   /* reserved for Material's lighter primary */
  --rs-ink-3:  #1e2a42;   /* hairlines on dark */

  --rs-band:    var(--rs-tint-blue);  /* an ordinary section band */
  --rs-band-2:  #090e18;              /* the alternating band, a step down */
  --rs-surface: #131d33;              /* a tile, on any band */
  --rs-text:    #e6ebf5;
  --rs-muted:   #94a2bd;
  --rs-line:    var(--rs-ink-3);

  --rs-nav-h: 64px;
  --rs-wrap:  1000px;

  --rs-display: "Dosis", "Trebuchet MS", sans-serif;
  --rs-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Plex Mono is drawn to the same skeleton as Plex Sans, so the MAXScript in
     the documentation and the prose around it come from one family rather
     than from whatever monospace the reader's machine happens to have. */
  --rs-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ------------------------------------------------------------------ bar -- */

.rs-nav {
  position: relative;
  z-index: 40;
  background: var(--rs-ink);
  font-family: var(--rs-display);
  -webkit-font-smoothing: antialiased;
}

/* the spectrum hairline - the only place the full gradient is used at width */
.rs-nav::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--rs-spectrum);
  opacity: 1;
  transition: opacity .25s ease;
}

.rs-nav__inner {
  display: flex;
  align-items: center;
  gap: 30px;
  height: var(--rs-nav-h);
  max-width: var(--rs-wrap);
  margin: 0 auto;
  padding: 0 25px;
}

/* ---------------------------------------------------------------- brand -- */

.rs-nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
  text-decoration: none;
  color: inherit;
}

.rs-nav__mark {
  display: block;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
}

.rs-nav__name {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
  white-space: nowrap;
}

.rs-nav__name b {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.01em;
}

.rs-nav__name span {
  color: rgba(255, 255, 255, .5);
  font-size: 12.8px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- links -- */

/* Links and the call to action travel together: on a narrow screen the whole
   group becomes the drop-down panel, so Buy/Download is still reachable rather
   than being dropped the moment the menu collapses. */
.rs-nav__menu {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
}

.rs-nav__links {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-nav__links a:not(.rs-nav__cta) {
  display: block;
  position: relative;
  padding: 10px 14px;
  border-radius: 6px;
  color: rgba(255, 255, 255, .74);
  font-size: 18.4px;
  font-weight: 700;
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s ease, background-color .15s ease;
}

.rs-nav__links a:not(.rs-nav__cta):hover,
.rs-nav__links a:not(.rs-nav__cta):focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}

.rs-nav__links a:focus-visible {
  outline: 2px solid var(--rs-blue);
  outline-offset: 1px;
}

/* the section you are in: a short spectrum underline rather than a filled
   block, so it marks the page without becoming the loudest thing in the bar */
.rs-nav__links a:not(.rs-nav__cta)[aria-current]::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3.6px;
  height: 2px;
  border-radius: 2px;
  background: var(--rs-spectrum);
}

.rs-nav__links a[aria-current] { color: #fff; }

/* the one call to action in the bar */
.rs-nav__cta {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0 7px;
  padding: 9.2px 20px;
  border-radius: 7px;
  background: var(--rs-accent);
  color: #fff;
  font-family: var(--rs-display);
  font-size: 18.4px;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  transition: filter .15s ease, transform .15s ease;
}

.rs-nav__cta:hover { filter: brightness(1.12); }
.rs-nav__cta:active { transform: translateY(1px); }

/* ------------------------------------------------------- blended header -- */

/* On the landing page the bar floats over the hero with nothing behind it -
   no plate, no shadow, no border.  It only becomes a surface once the hero has
   scrolled past, which is the point where it would otherwise sit on top of
   body copy and stop being readable. */
.rs-nav--overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  transition: background-color .3s ease, backdrop-filter .3s ease;
}

.rs-nav--overlay::after { opacity: 0; }

.rs-nav--overlay .rs-nav__cta {
  background: rgba(255, 255, 255, .1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.rs-nav--overlay .rs-nav__cta:hover {
  background: rgba(255, 255, 255, .17);
  filter: none;
}

.rs-nav--overlay.is-solid {
  background: rgba(21, 22, 26, .93);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
}

.rs-nav--overlay.is-solid::after { opacity: 1; }

.rs-nav--overlay.is-solid .rs-nav__cta {
  background: var(--rs-accent);
  box-shadow: none;
}

/* ----------------------------------------------------------- small menu -- */

.rs-nav__toggle {
  display: none;
  margin-left: auto;
  padding: 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  line-height: 0;
}

.rs-nav__toggle:hover { background: rgba(255, 255, 255, .1); }
.rs-nav__toggle svg { width: 24px; height: 24px; fill: currentColor; }

/* The bar collapses to the toggle before it runs out of room.  At the fixed
   px sizes the links need about 1066px for brand + links + CTA, so the old
   62em (992px) left a band where the desktop bar was still shown and the
   CTA spilled off the right edge. */
@media (max-width: 68em) {
  .rs-nav__inner { gap: 15px; }
  .rs-nav__toggle { display: block; }

  .rs-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0;
    padding: 8px 14px 18px;
    background: var(--rs-ink);
    border-top: 1px solid var(--rs-ink-3);
    box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7);
  }

  .rs-nav.is-open .rs-nav__menu { display: flex; }
  .rs-nav.is-open { background: var(--rs-ink); }
  .rs-nav.is-open::after { opacity: 1; }

  .rs-nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .rs-nav__links a:not(.rs-nav__cta) { padding: 13px 11px; border-radius: 0; }
  .rs-nav__links a:not(.rs-nav__cta)[aria-current]::after { left: 11px; right: auto; width: 32px; }

  .rs-nav__cta,
  .rs-nav--overlay .rs-nav__cta {
    display: block;
    margin: 8px 0;
    background: var(--rs-accent);
    box-shadow: none;
    text-align: center;
  }

  .rs-nav__name span { display: none; }
}

/* -------------------------------------------------------------- footer -- */

.rs-footer {
  background: var(--rs-ink);
  color: rgba(255, 255, 255, .62);
  font-family: var(--rs-body);
  font-size: 18px;
}

.rs-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 40px;
  max-width: var(--rs-wrap);
  margin: 0 auto;
  padding: 40px 25px;
}

.rs-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  font-family: var(--rs-display);
  font-size: 21px;
  font-weight: 800;
  text-decoration: none;
}

.rs-footer__brand img { width: 26px; height: 26px; }

.rs-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 26px;
  margin: 0 auto 0 0;
  padding: 0;
  list-style: none;
}

.rs-footer a { color: inherit; text-decoration: none; }
.rs-footer__links a:hover { color: #fff; text-decoration: underline; }
.rs-footer__legal { margin: 0; color: rgba(255, 255, 255, .42); font-size: 16.4px; }

@media (max-width: 48em) {
  .rs-footer__inner { flex-direction: column; align-items: flex-start; }
  .rs-footer__links { margin: 0; }
}