/* Captions with WCAG AA contrast */
.figure-caption, figcaption, .table-caption { color: #595959; }
/* Wide display equations scroll instead of being cut off */
span.math.display { display: block; max-width: 100%; }
mjx-container[display="true"] { display: block; max-width: 100%; min-width: 0 !important; overflow-x: auto; overflow-y: hidden; }
/* Dark mode: keep captions readable */
body.quarto-dark .figure-caption, body.quarto-dark figcaption, body.quarto-dark .table-caption { color: #b8b8b8; }

/* let the breadcrumb shrink in the narrow top bar */
.quarto-secondary-nav .container-fluid > nav, .quarto-secondary-nav .container-fluid > a.flex-grow-1 { min-width: 0; overflow: hidden; }
/* Narrow screens: keep the sidebar (and the chapter arrows) inside the screen, wrap long titles */
@media (max-width: 991.98px) {
  #quarto-sidebar { max-width: 100vw; overflow-x: hidden; }
  #quarto-sidebar .sidebar-item-container > a, #quarto-sidebar .sidebar-title, .sidebar-chapter-toc a { white-space: normal; }
}
/* The right-hand table of contents is hidden: the left sidebar lists each chapter's sections.
   (It is still generated, because scripts/sidebar_sections.py reads it.) */
#quarto-margin-sidebar nav#TOC { display: none; }
/* Wide screens: with no right-hand column, let the text use the freed space (capped for readability) */
@media (min-width: 992px) {
  /* Sidebar anchored to the left edge (no centered empty margin), text right after it */
  #quarto-content.page-layout-full {
    grid-template-columns:
      [screen-start screen-start-inset page-start] 18rem
      [page-start-inset body-start-outset body-start] 2.5rem
      [body-content-start] minmax(0, 1fr)
      [body-content-end] 2.5rem
      [body-end body-end-outset page-end-inset page-end screen-end-inset screen-end];
  }
  #quarto-content.page-layout-full main.content { grid-column: body-content-start / body-content-end; max-width: 1050px; }
  #quarto-sidebar { padding-left: 1rem !important; }
  /* Keep the sidebar fixed beside the text. As a sticky element it was pushed up by the page footer
     at the end of each chapter, sliding its top (the search box) under the top bar.
     Its grid column (18rem) stays reserved, so the text does not move. Quarto's JS still sets top and max-height. */
  #quarto-sidebar { position: fixed !important; left: 0; width: 18rem; bottom: auto; }
}
/* Scrolling inside the sidebar never scrolls the page behind it (and vice versa) */
#quarto-sidebar { overscroll-behavior: contain; }

/* Top bar: same background as the page (so each logo version keeps its intended contrast), larger logo */
body.quarto-light #quarto-header .navbar { background-color: #ffffff !important; border-bottom: 1px solid #dee2e6; }
body.quarto-dark #quarto-header .navbar { background-color: #222222 !important; border-bottom: 1px solid #444444; }
body.quarto-light #quarto-header .navbar, body.quarto-light #quarto-header .navbar .nav-link, body.quarto-light #quarto-header .navbar .menu-text,
body.quarto-light #quarto-header .navbar .quarto-navigation-tool, body.quarto-light #quarto-header .navbar .navbar-toggler { color: #212529 !important; }
body.quarto-dark #quarto-header .navbar, body.quarto-dark #quarto-header .navbar .nav-link, body.quarto-dark #quarto-header .navbar .menu-text,
body.quarto-dark #quarto-header .navbar .quarto-navigation-tool, body.quarto-dark #quarto-header .navbar .navbar-toggler { color: #e8e8e8 !important; }
#quarto-header .navbar .nav-link .menu-text { font-size: 1.2rem; font-weight: 500; }
#quarto-header .navbar-logo { max-height: 46px; height: 46px; width: auto; }
/* Logo at the far right of the top bar (after the GitHub, PDF, and dark-mode buttons) */
#quarto-header .navbar-container { display: flex; flex-wrap: nowrap; }
#quarto-header .navbar-brand-container { order: 999; margin-left: 0.75rem !important; margin-right: 0 !important; }
#quarto-header .navbar-collapse { order: 1; }
#quarto-header .navbar-toggler { order: 0; }
@media (max-width: 991.98px) {
  #quarto-header .navbar-brand-container { margin-left: auto !important; }
}

/* Interactive (Observable Plot) figures: axes and labels follow the text color, also in dark mode */
svg[class^="plot-"] { color: inherit; background: transparent !important; }
body.quarto-dark svg[class^="plot-"] { color: #e8e8e8 !important; }
body.quarto-dark svg[class^="plot-"] [aria-label$="grid"] { stroke-opacity: 0.25; }
.interactive-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.interactive-readout { font-size: 0.95em; margin: 0.25rem 0 0.75rem; }
.interactive-row { flex-wrap: nowrap; }
@media (max-width: 767.98px) { .interactive-row { flex-wrap: wrap; } }
.interactive-title { font-weight: 600; text-align: center; margin-bottom: 0.25rem; }
/* "Report a bug" icon in the top bar: same size and spacing as the GitHub/PDF/dark-mode icons */
#quarto-header .navbar-nav .nav-link[href*="/issues/new"] { padding-left: 0.25rem; padding-right: 0.25rem; }
#quarto-header .navbar-nav .nav-link[href*="/issues/new"] .bi { font-size: 1rem; }
/* Top bar order (no hamburger menu): title | bug | GitHub, PDF, dark mode | logo.
   On narrow windows the title is dropped and the icons stay at the right. */
#quarto-header .navbar-container { display: flex; flex-wrap: nowrap; justify-content: flex-start; }
#quarto-header .navbar-nav.me-auto { order: 1 !important; flex-grow: 1; }
#quarto-header .navbar-nav.ms-auto { order: 2 !important; margin-left: auto !important; flex-direction: row; }
#quarto-header .quarto-navbar-tools { order: 3 !important; }
#quarto-header .navbar-brand-container { order: 4 !important; margin-left: 0.75rem !important; margin-right: 0 !important; }
@media (max-width: 991.98px) {
  #quarto-header .navbar-nav.me-auto { display: none !important; }
}

/* Preface title block, sized like the PDF title page: series name (medium), volume title (largest), subtitle (smallest) */
/* only the preface has a subtitle: there, the book title ("...Chemistry 2") is shown as "..., Volume 2" like in the PDF */
#title-block-header .quarto-title:has(.subtitle) h1.title { font-size: 0; }
#title-block-header .quarto-title:has(.subtitle) h1.title::before { content: "The Live Textbook of Physical Chemistry, Volume 2"; font-size: 1.6rem; font-weight: 500; }
#title-block-header .quarto-title .subtitle { font-size: 2.6rem; font-weight: 600; line-height: 1.15; margin-top: 0.4rem; }
#title-block-header .description { font-size: 1.15rem; }

/* equation references as "Eq. (5.7)", like the equation numbers and the PDF (pdf-fixes.lua) */
a.quarto-xref[href*="#eq-"] > span::before { content: "("; }
a.quarto-xref[href*="#eq-"] > span::after { content: ")"; }