[data-md-color-scheme="default"] {
  --md-primary-fg-color: #233237;
  --md-primary-fg-color--light: #334950;
  --md-primary-fg-color--dark: #11191b;

  --md-accent-fg-color: hsla(191, 100%, 50%, 1);
  --md-accent-fg-color--transparent: hsl(191, 100%, 50%, 0.1);

  --md-footer-bg-color: #233237;

  --md-typeset-a-color: rgb(0, 130, 160) !important;

  --feedback-button-bg-color: #fff;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #233237;
  --md-primary-fg-color--light: #334950;
  --md-primary-fg-color--dark: #11191b;

  --md-accent-fg-color: hsla(191, 100%, 50%, 1);
  --md-accent-fg-color--transparent: hsl(191, 100%, 50%, 0.1);

  --md-typeset-a-color: #bfffff !important;

  --feedback-button-bg-color: #233237;
}

.md-grid {
  max-width: 95%;
}

/* make all paragraphs justified */
.md-content p {
  text-align: justify;
}

.md-content p img {
  display: block;
  margin: 0 auto;
}

/* convenience classes */
.nobr {
  white-space: nowrap;
}

/* Feedback button */
.feedback-button {
  position: fixed;
  right: 10px;
  bottom: 134px;
  display: block;
  height: 44px;
  padding: 4px;
  border: solid 2px #00d1ff;
  border-radius: 4px;
  background: var(--feedback-button-bg-color);
}

.feedback-button:hover {
  box-shadow: 0px 0px 8px #00d1ff;
}

@media (max-width: 640px) {
  .feedback-button {
    bottom: 183px;
  }
}

/* Fix excessive vertical space around display equations in .md files.
   The .arithmatex div contains whitespace text nodes alongside the block
   .katex-display span. Those text nodes create anonymous block boxes sized
   by font-size × line-height (~20px each). Setting line-height: 0 collapses
   them to nothing. overflow: visible overrides Material's overflow: auto so
   the collapsed wrapper doesn't trigger a scrollbar; wide-equation horizontal
   scroll is preserved by moving overflow-x: auto down to .katex-display. */
.md-typeset div.arithmatex {
  margin: 0.75em 0;
  padding: 0;
  line-height: 0;
  overflow: visible;
}

.md-typeset div.arithmatex .katex-display {
  margin: 0;
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* mkdocs-jupyter renders stderr stream output (e.g. tqdm-style progress
   bars) with JupyterLab's --jp-rendermime-error-background (#fdd, a pale
   red), since Jupyter doesn't distinguish "stderr" from "actual error".
   That reads as an error to docs readers even when nothing failed, so
   drop it back to the same (no) background normal output has. */
.jupyter-wrapper
  .jp-RenderedText[data-mime-type="application/vnd.jupyter.stderr"] {
  background: transparent !important;
}

/* Material's list-margin-collapse fix (`ul:not([hidden]) { display:
   flow-root }`) has higher specificity than xarray's own `display: grid` /
   `display: contents` rules on the same <ul> elements in its Dataset/
   DataArray HTML repr, silently overriding them and breaking the repr's
   whole grid layout (rows fall back to stacked blocks instead of a
   compact single-line grid). Restore the two overridden values. */
.md-typeset .xr-sections {
  display: grid !important;
}

.md-typeset .xr-var-list {
  display: contents !important;
}

/* Same specificity problem as above: Material's blanket `.md-typeset pre {
   display: flow-root }` code-block styling overrides xarray's
   `.xr-text-repr-fallback { display: none }`, so the plain-text repr (only
   meant as a fallback for when the CSS above isn't injected at all) shows
   up styled like a full code block, sitting right above -- and duplicating
   -- the intended rich grid repr. */
.md-typeset .xr-text-repr-fallback {
  display: none !important;
}

/* xarray's dark-mode palette only activates under Jupyter's/VS Code's own
   dark-mode markers (html[data-theme="dark"], body.vscode-dark), which
   Material for MkDocs never sets -- it uses [data-md-color-scheme="slate"]
   instead, so xarray always falls through to its light-mode colors and
   the repr's row backgrounds stay light while the surrounding page goes
   dark, leaving barely-readable text.
   Feeding the upstream --jp-* variables xarray reads via var(--jp-x, ...)
   doesn't work here: xarray computes its own --xr-* variables once, on
   :root, and CSS custom properties resolve var() at the element/scope
   where the *consuming* declaration lives, then simply inherit that
   already-resolved value down -- they don't get recomputed per descendant.
   --jp-* is only ever defined deeper (on .jupyter-wrapper, by mkdocs-
   jupyter's bundled JupyterLab theme), so it's still unset at :root when
   xarray's --xr-* variables are computed there, regardless of what's set
   further down. Overriding the --xr-* variables directly on .xr-wrap (an
   actual ancestor of everything that reads them) sidesteps that and
   reliably wins via normal inheritance. Colors map to Material's own
   slate palette for visual consistency with the rest of the page. */
[data-md-color-scheme="slate"] .xr-wrap {
  --xr-font-color0: var(--md-default-fg-color);
  --xr-font-color2: var(--md-default-fg-color--light);
  --xr-font-color3: var(--md-default-fg-color--lighter);
  --xr-border-color: var(--md-default-fg-color--lightest);
  --xr-disabled-color: var(--md-default-fg-color--lighter);
  --xr-background-color: var(--md-default-bg-color);
  --xr-background-color-row-even: var(--md-code-bg-color);
  /* Not --md-default-fg-color--lightest: alpha-blending a light color over
     a near-black background reads as a washed-out light-grey patch, not a
     subtly-lighter dark one. Blend a little foreground color into the
     (dark) code background instead, matching how JupyterLab's own dark
     theme relates its row-odd color to row-even (one step lighter, still
     solidly dark) -- mkdocs-jupyter bundles that theme too, it's just
     unreachable here for the --xr-* variables (see comment above). */
  --xr-background-color-row-odd: color-mix(
    in srgb,
    var(--md-code-bg-color) 85%,
    var(--md-default-fg-color) 15%
  );
}