/* The notebooks save each figure with its width and height. When the page is narrower than the
   figure, the theme shrinks the width but keeps the height; let the height follow instead. */
.cell_output img {
  max-width: 100%;
  height: auto;
}

/* The colours of the logo: navy #1B2340, coral #FF6B5A and yellow #FFD866, with the greys of its
   tagline (#4A5068 on light, #B8BED2 on dark) and the box colour of the dark logo (#34417A).
   Text keeps at least 4.5:1 contrast with its background. Coral gives 2.8:1 on white, so in light
   mode it marks links (their underline) and accents rather than colouring text. */
:root {
  --psp-navy: #1b2340;
  --psp-navy-box: #34417a;
  --psp-coral: #ff6b5a;
  --psp-yellow: #ffd866;
  --psp-grey-light: #4a5068;
  --psp-grey-dark: #b8bed2;
}

html[data-theme="light"] {
  --pst-color-primary: var(--psp-navy);
  --pst-color-primary-bg: #e8eaf2;
  --pst-color-secondary: var(--psp-coral);
  --pst-color-secondary-bg: #ffe1dd;
  --pst-color-accent: var(--psp-coral);
  --pst-color-link: var(--psp-navy);
  --pst-color-link-hover: var(--psp-navy);
  --pst-color-link-higher-contrast: var(--psp-navy);
  --pst-color-heading: var(--psp-navy);
  --pst-color-text-base: var(--psp-navy);
  --pst-color-text-muted: var(--psp-grey-light);
  --pst-color-inline-code: var(--psp-navy);
  --pst-color-inline-code-links: var(--psp-navy);
  --pst-color-target: #fff3cc;
  --pst-color-table-row-hover-bg: #fff8e1;
  --mystnb-source-margin-color: var(--psp-coral);
}

html[data-theme="dark"] {
  --pst-color-background: var(--psp-navy);
  --pst-color-on-background: var(--psp-navy);
  --pst-color-surface: var(--psp-navy-box);
  --pst-color-on-surface: #ffffff;
  --pst-color-border: var(--psp-navy-box);
  --pst-color-primary: var(--psp-yellow);
  --pst-color-primary-bg: var(--psp-navy-box);
  --pst-color-secondary: var(--psp-coral);
  --pst-color-secondary-bg: #4a2f3f;
  --pst-color-accent: var(--psp-coral);
  --pst-color-link: var(--psp-yellow);
  --pst-color-link-hover: #ffffff;
  --pst-color-link-higher-contrast: var(--psp-yellow);
  --pst-color-heading: #ffffff;
  --pst-color-text-base: #ffffff;
  --pst-color-text-muted: var(--psp-grey-dark);
  --pst-color-inline-code: #ffffff;
  --pst-color-inline-code-links: var(--psp-yellow);
  --pst-color-target: #4a4430;
  --pst-color-table-row-hover-bg: var(--psp-navy-box);
  --mystnb-source-margin-color: var(--psp-coral);
}

/* links are underlined in coral, the dot of the wordmark */
a {
  text-decoration-color: var(--psp-coral);
}

/* the header in navy in dark mode, set off from the page by a border */
html[data-theme="dark"] .bd-header {
  background-color: var(--psp-navy) !important;
  border-bottom: 1px solid var(--pst-color-border);
}

/* the logo at the top of the landing page */
.psp-hero {
  display: block;
  width: min(420px, 100%);
  margin: 0 0 1.5rem;
}