/* The Purple Rabbit tokens (pr/company/brand) mapped onto the theme's variables. */

@font-face { font-family: "IBM Plex Sans"; src: url("/fonts/IBMPlexSans-Variable.woff2") format("woff2"); font-weight: 100 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/IBMPlexMono-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

/* Every page keeps a scrollbar track, so going from a short page (home) to a long one (terms) does not
   narrow the page by the scrollbar's width and shift everything 7.5px. The theme's reserved gutter
   would do the same but leave the app bar 15px short of the edge. */
html { overflow-y: scroll; scrollbar-gutter: auto; }

:root {
  --md-text-font: "IBM Plex Sans";
  --md-code-font: "IBM Plex Mono";
}

[data-md-color-scheme="default"] {
  --pr-line: #DADFE0;
  --md-default-bg-color: #EBEDED;      /* surface-page (pr/company/brand!3) */
  --md-default-fg-color: #10111A;
  --md-default-fg-color--light: #646569; /* ink-muted (pr/company/brand!3) */
  --md-primary-fg-color: #40456A;       /* brand */
  --md-primary-fg-color--light: #40456A;
  --md-primary-fg-color--dark: #40456A;
  --md-primary-bg-color: #FFFFFF;       /* on-brand */
  --md-accent-fg-color: #005B8D;        /* action */
  --md-typeset-a-color: #005B8D;
}

[data-md-color-scheme="slate"] {
  --pr-line: #3A3C4B;
  --md-default-bg-color: #1D1F30;
  --md-default-fg-color: #F9FAFA;
  --md-default-fg-color--light: #A0A2A9;
  --md-primary-fg-color: #363B5A;
  --md-primary-fg-color--light: #363B5A;
  --md-primary-fg-color--dark: #363B5A;
  --md-primary-bg-color: #FFFFFF;
  --md-accent-fg-color: #6CB4DE;
  --md-typeset-a-color: #6CB4DE;
}

/* The header is the site's app bar (overrides/partials/header.html), with the same measurements as
   site/style.css. The theme sets html to 125%, so everything here is in px. */
.md-header.pr-appbar {
  position: sticky;
  background: var(--md-primary-fg-color);
  color: #FFFFFF;
  box-shadow: inset 0 -1px 0 var(--pr-line);
}
.md-header__inner.pr-appbar__inner {
  display: flex;
  align-items: center;
  gap: 32px;
  max-width: 1120px;
  min-height: 56px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 719px) { .md-header__inner.pr-appbar__inner { padding: 0 16px; gap: 24px; } }
.pr-wordmark {
  display: inline-flex;
  align-items: center;
  font-family: var(--md-code-font);
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  white-space: nowrap;
}
.pr-wordmark:hover, .pr-wordmark:focus { color: #FFFFFF; }
.pr-appbar .pr-wordmark { margin-right: 16px; } /* the wordmark stands apart from the links it leads */
.pr-wordmark b { font-weight: 600; }
.pr-wordmark span { font-weight: 400; }
.pr-wordmark i {
  display: inline-block;
  width: 1.45em;
  height: 1.45em;
  margin-right: 0.3em;
  background: url("/rabbit.svg") center / contain no-repeat;
}
.pr-appbar__nav { display: flex; gap: 24px; flex: 1; min-width: 0; overflow-x: auto; }
.pr-appbar__link {
  position: relative;
  padding: 18px 0;
  color: #FFFFFF;
  opacity: 0.78;
  font: 500 14px/20px var(--md-text-font);
  white-space: nowrap;
}
.pr-appbar__link:hover, .pr-appbar__link:focus { color: #FFFFFF; opacity: 1; }
.pr-appbar__link[aria-current="page"] { opacity: 1; font-weight: 600; }
.pr-appbar__link[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: #B6BFC1; /* brand-accent */
}
.pr-appbar .md-header__button { color: #FFFFFF; opacity: 0.78; margin: 0; padding: 8px; }
.pr-appbar .md-header__button:hover { opacity: 1; }
.pr-appbar .md-header__option { margin: 0; }
/* The theme keeps a 230px slot for a repository link we do not show; it pushed the toggle and search
   off the right edge. The element stays for the theme's script, only out of the layout. */
.pr-appbar .md-header__source { display: none; }
@media (max-width: 520px) {
  .md-header__inner.pr-appbar__inner { gap: 16px; }
  .pr-appbar .pr-wordmark { margin-right: 8px; }
  .pr-appbar__nav { gap: 16px; flex: 1 0 auto; }
  .pr-wordmark { font-size: 18px; }
  .pr-appbar .md-header__button { padding: 6px; }
}
/* The docs bar carries one more icon (search) than the site's, so the smallest phones get a smaller wordmark. */
@media (max-width: 380px) { .pr-wordmark { font-size: 16px; } .md-header__inner.pr-appbar__inner { gap: 12px; } .pr-appbar .pr-wordmark { margin-right: 4px; } }

/* Search sits on the brand field as a light, translucent well in both schemes. */
.md-header .md-search__button {
  background-color: rgba(255, 255, 255, 0.12);
  color: #FFFFFF;
}
.md-header .md-search__button:hover { background-color: rgba(255, 255, 255, 0.2); }
.md-header .md-search__button::before { background-color: #FFFFFF; }

/* The footer is the site's (overrides/partials/footer.html), with site/style.css's measurements. */
.md-footer.pr-foot {
  background: transparent;
  color: var(--md-default-fg-color--light);
  border-top: 1px solid var(--pr-line);
  padding: 24px 0 32px;
  font: 400 14px/20px var(--md-text-font);
}
.pr-foot__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 719px) { .pr-foot__inner { padding: 0 16px; } }
.pr-foot a { color: var(--md-default-fg-color--light); text-decoration: underline; text-underline-offset: 0.18em; }
.pr-foot a:hover { color: var(--md-typeset-a-color); }
.pr-foot__social { display: inline-flex; gap: 16px; margin-left: auto; }
.pr-foot__icon { display: inline-flex; }
.pr-foot__icon svg { width: 20px; height: 20px; fill: currentColor; }

/* The homepage: one line, left-aligned on the app bar's grid, centred in the space between bar and footer. */
.pr-home { display: flex; align-items: center; min-height: calc(100vh - 56px - 77px - 2 * 48px); }
.md-typeset .pr-home h1 {
  margin: 0;
  color: var(--md-default-fg-color);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* The legal pages: the date under the title, lines kept near 65 characters. */
.md-typeset .date { margin-top: -8px; font-size: 14px; color: var(--md-default-fg-color--light); }
.md-content .md-typeset { max-width: 65ch; }
.md-typeset h1 { color: var(--md-default-fg-color); font-weight: 600; letter-spacing: -0.015em; }

/* Page content on the app bar's grid: 1120px wide, its text starting where the wordmark does (48px in,
   of which the theme's own content margin is 16px). */
.md-main__inner.md-grid { max-width: 1120px; padding: 0 32px; }
@media (max-width: 719px) { .md-main__inner.md-grid { padding: 0; } }

/* The search shortcut hint, on the bar. */
.md-header .md-search__button::after { background-color: rgba(255, 255, 255, 0.2); color: #FFFFFF; }