/* User Provided Stylesheet */

/* Interactive (plotly) figures: text and grid lines follow the page colours,
   so they read the same as the surrounding text in the light and dark theme.
   Plotly sets these colours as inline styles, hence !important. Hover labels
   (.hoverlayer) have their own coloured background and are left alone. */
.js-plotly-plot .main-svg .cartesianlayer text,
.js-plotly-plot .main-svg .infolayer text {
  fill: var(--myst-color-text) !important;
}

.js-plotly-plot .main-svg .gridlayer path,
.js-plotly-plot .main-svg .zerolinelayer path {
  stroke: var(--myst-color-border) !important;
  stroke-opacity: 1 !important;
}

/* Feasible regions: a stronger fill in the dark theme for contrast. */
.dark .js-plotly-plot .main-svg .js-fill {
  fill-opacity: 0.35 !important;
}

/* Link hover cards: the card is rendered outside the page content and its
   title inherits the text colour, which is black in the dark theme. Give the
   card (title and description) the page text colour, and in the dark theme a
   border, since the drop shadow is not visible there. */
.hover-card-content,
.hover-card-content .prose {
  color: var(--myst-color-text);
}

.dark .hover-card-content {
  border: 1px solid var(--myst-color-border);
}