/* Breqwatr Cloud API: maps the design system tokens (tokens.css) onto Material for MkDocs.
   Light only. Sizes are design system px values converted to rem at Material's
   base root size of 20px, so they scale with Material at wide breakpoints. */

/* Self-hosted IBM Plex, the same files as docs.breqwatr.cloud and learn.breqwatr.cloud. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-regular.woff2")  format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-medium.woff2")   format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-sans-semibold.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-regular.woff2")  format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/ibm-plex-mono-medium.woff2")   format("woff2"); }

/* Token mapping onto Material's variables. */
:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--accent);
  --md-primary-fg-color--dark: var(--accent-ink);
  --md-primary-fg-color--light: var(--accent-tint);
  --md-primary-bg-color: var(--ground);
  --md-primary-bg-color--light: var(--ink-soft);

  --md-accent-fg-color: var(--accent-ink);
  --md-accent-fg-color--transparent: var(--accent-tint);
  --md-accent-bg-color: var(--ground);
  --md-accent-bg-color--light: var(--ink-soft);

  --md-default-fg-color: var(--ink);
  --md-default-fg-color--light: var(--ink-soft);
  --md-default-fg-color--lighter: var(--ink-muted);
  --md-default-fg-color--lightest: var(--line);
  --md-default-bg-color: var(--ground);

  --md-typeset-color: var(--ink-soft);
  --md-typeset-a-color: var(--accent);
  --md-typeset-mark-color: var(--accent-tint);
  --md-code-bg-color: var(--panel);
  --md-code-fg-color: var(--ink);

  --md-footer-bg-color: var(--ground);
  --md-footer-bg-color--dark: var(--ground);
  --md-footer-fg-color: var(--ink-soft);
  --md-footer-fg-color--light: var(--ink-soft);
  --md-footer-fg-color--lighter: var(--ink-soft);

  --md-text-font: var(--font-sans);
  --md-code-font: var(--font-mono);

  /* PENDING: page-subheading is not in the design system yet. Proposed value:
     22px, weight 600, -0.02em tracking, 1.2 line height. Replace with the token
     once it lands in design-systems/breqwatr. */
  --page-subheading-size: 1.1rem;
  --page-subheading-line-height: 1.2;
}

/* Layout: 1120px content column with 28px side padding. The grid also holds
   both 12.1rem sidebars, so it is wider than the column itself. */
.md-grid { max-width: calc(56rem + 2 * 12.1rem); }
.md-content__inner { margin-left: 1.4rem; margin-right: 1.4rem; }

/* Body: page-body 17px at 1.65. Body copy is ink-soft; headings are ink. */
body { -webkit-font-smoothing: antialiased; }
.md-typeset { font-size: 0.85rem; line-height: 1.65; }

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
}
/* page-title 32px */
.md-typeset h1 { font-size: 1.6rem; line-height: 1.12; margin: 0 0 1rem; }
/* page-subheading (PENDING, see :root) */
.md-typeset h2 {
  font-size: var(--page-subheading-size);
  line-height: var(--page-subheading-line-height);
  margin: 2rem 0 0.8rem;
}
/* page-heading 17px */
.md-typeset h3 { font-size: 0.85rem; line-height: 1.12; margin: 1.6rem 0 0.6rem; }

/* Tables at body size. Material shrinks them to 0.64rem by default. */
.md-typeset table:not([class]) { font-size: inherit; }

/* Links: accent, accent-ink on hover, 0.15s colour transition. */
.md-typeset a { color: var(--accent); transition: color 0.15s; }
.md-typeset a:hover, .md-typeset a:focus { color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* Code: panel surface, line hairline. radius-sm inline, radius-md for blocks. */
.md-typeset code { border: var(--stroke-hairline) solid var(--line); border-radius: var(--radius-sm); }
.md-typeset pre > code { border: 0; }
.md-typeset .highlight, .md-typeset pre { border-radius: var(--radius-md); }

/* Admonitions: plain panel surface, no icons, no colour per type, no shadow.
   [class] and [dir] raise specificity above Material's per-type rules. */
.md-typeset .admonition[class],
.md-typeset details[class] {
  background-color: var(--panel);
  border: var(--stroke-hairline) solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: none;
  font-size: 0.85rem;
}
[dir] .md-typeset .admonition[class] > .admonition-title,
[dir] .md-typeset details[class] > summary {
  background-color: transparent;
  color: var(--ink);
  font-weight: 600;
  padding: 0.6rem 0.8rem 0;
  border: 0;
}
.md-typeset .admonition[class] > .admonition-title::before,
.md-typeset details[class] > summary::before { display: none; }

/* Header: nav-bg with a backdrop blur and a line hairline, no shadow. */
.md-header,
.md-header--shadow {
  background-color: var(--nav-bg);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: var(--stroke-hairline) solid var(--line);
  box-shadow: none;
  color: var(--ink);
}
.md-header__title { color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.md-header__button { color: var(--ink); }

.md-header__button.md-logo {
  padding: 0 0.35rem;
  margin: 0;
  display: inline-flex;
  align-items: center;
}
.md-header__button.md-logo .md-logo-img { height: 28px; width: auto; display: block; }

/* Search: panel surface. */
.md-search__form { background-color: var(--panel); border: var(--stroke-hairline) solid var(--line); box-shadow: none; }
.md-search__form:hover { background-color: var(--ground); }
.md-search__input { color: var(--ink); }
.md-search__input::placeholder { color: var(--ink-soft); }
.md-search__icon { color: var(--ink-soft); }

/* Sidebar nav. */
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: var(--accent); }
.md-nav__link:hover { color: var(--accent-ink); }

/* Hide the repeated site title above the desktop sidebar nav; the header has it. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary .md-nav--primary > .md-nav__title { display: none; }
}

/* Footer, including the previous and next links. */
.md-footer { background-color: var(--ground); color: var(--ink-soft); border-top: var(--stroke-hairline) solid var(--line); }
.md-footer__link { color: var(--ink-soft); }
.md-footer__link:hover { color: var(--accent); }
.md-footer__title { color: var(--ink); }
.md-footer-meta { background-color: var(--ground); }
.md-footer-meta__inner, .md-copyright { color: var(--ink-soft); }

/* Reference: keep parameter names on one line. */
.md-typeset td.parameter-name code { white-space: nowrap; }