/*
 * Course presentation for PyData Sphinx Theme.
 * Layout hooks come exclusively from YAML frontmatter via course_roles.py.
 */

:root {
  --brand-primary: #9d2235;
  --brand-white: #ffffff;
  --brand-light: #f2f2f4;
  --brand-silver: #c7c8c9;
  --brand-dark: #464648;
  --brand-tan: #ddba96;
  --brand-brown: #492d14;
  --brand-sky: #9dc9d5;
  --brand-blue: #3e94aa;
  --brand-navy: #0f3842;

  /* Reclaim space from the right-hand Contents sidebar. */
  --pst-sidebar-secondary: 13rem;
}

html[data-theme="light"] {
  --pst-color-primary: var(--brand-primary);
  --pst-color-link: var(--brand-primary);
  --pst-color-link-hover: var(--brand-brown);
  --pst-color-accent: var(--brand-brown);
}

html[data-theme="dark"] {
  --pst-color-primary: var(--brand-tan);
  --pst-color-link: var(--brand-tan);
  --pst-color-link-hover: var(--brand-sky);
  --pst-color-accent: var(--brand-sky);
}

/* Keep the PDF marker beside the current breadcrumb title, at roughly the
   title's cap height without changing the breadcrumb's line spacing. */
.bd-breadcrumbs .course-breadcrumb-pdf-link {
  display: inline-block;
  margin-left: 0.32em;
}

.bd-breadcrumbs .course-breadcrumb-pdf-icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.16em;
}

/* The home page has no breadcrumb trail, but its direct PDF remains available
   from the same article-header area as the page-level breadcrumb action. */
.course-home-page-tools {
  display: flex;
  align-items: center;
}

.course-home-pdf-link {
  display: inline-flex;
  padding: 0.2rem;
}

.course-home-pdf-icon {
  width: 1.15em;
  height: 1.15em;
}

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

/* Focus mode keeps the measured header node, but removes its visual and
   keyboard footprint. The bootstrap class prevents a cold-load banner flash. */
html.course-focus-requested #pst-header,
html.course-focused #pst-header {
  --course-active-header-height: 0px;
  height: 0;
  min-height: 0;
  overflow: visible;
  background: transparent;
}

/* Establish the final geometry during the head bootstrap, before the
   controller runs. This prevents sticky sidebars from first using the full
   header measurement and then jumping upward. */
html.course-focus-requested,
html.course-focused {
  --course-active-header-height: 0px;
  --pst-header-height: 0px;
}

html.course-focused #pst-header > *:not(.sidebar-toggle),
html.course-focus-requested #pst-header > *:not(.sidebar-toggle) {
  visibility: hidden;
  pointer-events: none;
}

html.course-focused .course-focused-section-utilities { display: flex; }
html.course-focus-requested .sidebar-header-items,
html.course-focused .sidebar-header-items { display: none; }
.course-focused-section-utilities {
  display: none;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem;
  min-height: 2.75rem;
  padding: 0.15rem 0.35rem;
}

.bd-links__title { display: flex; align-items: center; gap: 0.35rem; }
.course-focus-button {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.3rem;
  color: var(--pst-color-link);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
  font: inherit;
  font-size: 0.75rem;
  line-height: 1.15;
}
.course-focus-button:hover { background: var(--pst-color-surface); border-color: var(--pst-color-border); }
html.course-focused .course-focus-button {
  background: color-mix(in srgb, var(--pst-color-surface) 88%, var(--pst-color-primary));
  border-color: color-mix(in srgb, var(--pst-color-border) 70%, var(--pst-color-primary));
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.14), inset 0 0 0 1px rgb(255 255 255 / 0.08);
}
html[data-theme="dark"].course-focused .course-focus-button {
  background: color-mix(in srgb, var(--pst-color-surface) 82%, var(--pst-color-primary));
  box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.28), inset 0 0 0 1px rgb(255 255 255 / 0.06);
}
.course-focus-icon {
  width: 1.1rem;
  height: 1.1rem;
  display: inline-block;
  background: url("../assets/focus-mode-goal.svg") center / contain no-repeat;
  filter: brightness(0) saturate(100%) invert(19%) sepia(31%) saturate(2200%) hue-rotate(320deg);
}
html[data-theme="dark"] .course-focus-icon { filter: invert(79%) sepia(28%) saturate(500%); }

/* On a narrow screen, PyData copies the header's course-wide navigation into
   the opened primary sidebar.  The section sidebar immediately below it has
   the same active-section heading, producing two consecutive "Calendar"
   entries.  Keep the section's child links, but omit that redundant heading.
   Desktop keeps the heading because its copied header navigation is hidden. */
@media (max-width: 959.98px) {
  #pst-primary-sidebar .sidebar-header-items + .sidebar-primary-items__start .bd-links__title {
    display: none;
  }
}

html.course-focus-requested .bd-container__inner > .bd-sidebar-primary,
html.course-focus-requested .bd-container__inner > .bd-sidebar-secondary,
html.course-focus-requested .course-edge-sidebar-toggle,
html.course-focused .bd-container__inner > .bd-sidebar-primary,
html.course-focused .bd-container__inner > .bd-sidebar-secondary,
html.course-focused .course-edge-sidebar-toggle {
  top: calc(var(--course-active-header-height, 0px) + 1rem);
}

@media (max-width: 959.98px) {
  html.course-focused #pst-header > .bd-header__inner > .sidebar-toggle {
    visibility: visible;
    pointer-events: auto;
    position: fixed;
    top: calc(0.35rem + env(safe-area-inset-top));
    z-index: 20;
  }
  html.course-focused #pst-header > .bd-header__inner > .primary-toggle { left: 0.35rem; }
  html.course-focused #pst-header > .bd-header__inner > .secondary-toggle { right: 0.35rem; }
}

@media print {
  html.course-focused .course-focus-button,
  html.course-focused .course-focused-section-utilities { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  html.course-focused * { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

html[data-theme="dark"] :focus-visible {
  outline-color: var(--brand-tan);
}

/* PyData hides non-SVG children of the compact search button.  This course
   uses Font Awesome's ``i`` element for the magnifying glass, so retain it
   instead of leaving only the button's circular background on narrow screens. */
.search-button-field > .fa-magnifying-glass,
button.search-button-field > i.fa-solid.fa-magnifying-glass {
  display: inline-block !important;
  position: static;
  left: auto;
  color: inherit;
}

/* Edit-preview navigation calls out author-only material without making it
   resemble a warning or a public course section. */
.course-edit-only-entry {
  display: inline-flex;
  align-items: center;
  padding: 0.18rem 0.48rem !important;
  color: var(--brand-navy) !important;
  background: color-mix(in srgb, var(--brand-sky) 32%, var(--pst-color-on-background)) !important;
  border: 1px solid color-mix(in srgb, var(--brand-blue) 42%, var(--pst-color-border)) !important;
  border-radius: 0.3rem;
  font-weight: 600;
}

.course-edit-only-entry:hover,
.course-edit-only-entry:focus-visible {
  color: var(--brand-navy) !important;
  background: color-mix(in srgb, var(--brand-sky) 50%, var(--pst-color-on-background)) !important;
}

html[data-theme="dark"] .course-edit-only-entry {
  color: var(--brand-sky) !important;
  background: color-mix(in srgb, var(--brand-navy) 65%, var(--pst-color-surface)) !important;
  border-color: color-mix(in srgb, var(--brand-blue) 60%, var(--pst-color-border)) !important;
}

/* Keep the desktop header to one row.  JavaScript moves only the links that
   do not fit into this disclosure menu, preserving Search and other header
   controls in their intended row. */
@media (min-width: 960px) {
  html.course-navbar-overflow-ready .bd-header .navbar-header-items {
    min-width: 0;
    flex-wrap: nowrap;
  }

  html.course-navbar-overflow-ready .bd-header .navbar-header-items__center,
  html.course-navbar-overflow-ready .bd-header .navbar-header-items__center > .navbar-item,
  html.course-navbar-overflow-ready #pst-header .course-navbar-nav {
    min-width: 0;
  }

  /* Keep the header navigation's flex track as wide as the header permits.
     Otherwise it can retain the narrow width it had after links moved into
     the overflow menu, even after the viewport grows. */
  html.course-navbar-overflow-ready .bd-header .navbar-header-items__center,
  html.course-navbar-overflow-ready .bd-header .navbar-header-items__center > .navbar-item,
  html.course-navbar-overflow-ready #pst-header .course-navbar-nav {
    flex: 1 1 auto;
  }

  html.course-navbar-overflow-ready #pst-header .course-navbar-nav {
    display: flex;
    align-items: center;
  }

  html.course-navbar-overflow-ready #pst-header .course-navbar-nav > .navbar-nav {
    /* Size to the displayed links.  It may shrink to make room for the
       disclosure button, but must not grow and push that button to the far
       edge of the header. */
    flex: 0 1 auto;
    flex-wrap: nowrap;
    min-width: 0;
    overflow: hidden;
  }

  html.course-navbar-overflow-ready #pst-header .course-navbar-nav .nav-link { white-space: nowrap; }

  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow {
    position: relative;
    flex: 0 0 auto;
    margin-left: 0.25rem;
  }

  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow__toggle {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--pst-color-text-muted);
    background: transparent;
    border: 0;
    border-radius: 0.25rem;
    font: inherit;
    font-size: 1.15rem;
    line-height: 1;
  }

  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow__toggle:hover,
  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow__toggle:focus-visible {
    color: var(--pst-color-link);
    background: var(--pst-color-surface);
  }

  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow__menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.35rem);
    right: 0;
    min-width: 14rem;
    max-width: min(24rem, calc(100vw - 2rem));
    padding: 0.35rem 0;
    margin: 0;
    overflow-wrap: anywhere;
    list-style: none;
    background: var(--pst-color-on-background);
    border: 1px solid var(--pst-color-border);
    border-radius: 0.3rem;
    box-shadow: 0 0.2rem 0.5rem var(--pst-color-shadow);
  }

  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow__menu > .nav-item { margin: 0; }

  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow__menu > .nav-item > .nav-link {
    display: block;
    padding: 0.45rem 1rem;
  }

  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow__menu > .nav-item > .nav-link:hover,
  html.course-navbar-overflow-ready #pst-header .course-navbar-overflow__menu > .nav-item > .nav-link:focus-visible {
    background: var(--pst-color-surface);
  }
}

/* Let wide notes use the viewport instead of the theme's global page cap. */
@media (min-width: 1200px) {
  .bd-page-width {
    max-width: none;
  }
}

/* The ordinary informational measure is approximately 85 characters. */
.bd-article-container,
body.layout-info .bd-article-container {
  width: 100%;
  max-width: 85ch;
  padding: 0.75rem 0.4rem;
}

/* Mathematical notes get substantially more horizontal equation space. */
body.layout-notes .bd-article-container {
  max-width: 1200px;
}

/* The ordinary and portable builds share the shell emitted by layout.html.
   Keeping the footer and Contents sidebar in this grid makes both sidebars
   sticky for the full page and gives the centre column identical bounds. */
.course-edge-sidebar-toggle {
  display: none;
}

@media (max-width: 959.98px) {
  .bd-container .bd-container__inner {
    display: block !important;
  }

  .bd-container__inner > .bd-footer {
    width: 100%;
  }
}

@media (min-width: 960px) {
  .bd-container .bd-container__inner {
    display: grid;
    grid-template-columns: min(20vw, 17.6rem) minmax(0, 1fr) var(--pst-sidebar-secondary);
    grid-template-rows: auto auto;
    position: relative;
    transition: grid-template-columns 160ms ease-out;
  }

  .bd-container__inner > .bd-sidebar-primary {
    grid-column: 1;
    grid-row: 1;
    max-height: calc(100vh - var(--course-active-header-height, var(--pst-header-height)) - 1rem);
    position: sticky;
    top: calc(var(--course-active-header-height, var(--pst-header-height)) + 1rem);
    width: auto;
    transition: opacity 120ms ease-out;
  }

  .bd-container__inner > .bd-main {
    grid-column: 2;
    grid-row: 1;
  }

  .bd-container__inner > .bd-sidebar-secondary {
    grid-column: 3;
    grid-row: 1;
    max-height: calc(100vh - var(--course-active-header-height, var(--pst-header-height)) - 1rem);
    position: sticky;
    top: calc(var(--course-active-header-height, var(--pst-header-height)) + 1rem);
    transition: opacity 120ms ease-out;
  }

  .bd-container__inner > .bd-footer {
    grid-column: 2;
    grid-row: 2;
    width: auto;
  }

  .course-edge-sidebar-toggle {
    align-self: start;
    background: transparent;
    border: 0;
    border-radius: 0;
    color: var(--pst-color-text-muted);
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    grid-column: 2;
    grid-row: 1;
    height: 1em;
    line-height: 1;
    margin-right: 0;
    padding: 0;
    position: sticky;
    top: calc(var(--course-active-header-height, var(--pst-header-height)) + 1rem);
    width: 1em;
    z-index: 2;
  }

  #course-primary-sidebar-toggle { justify-self: start; }
  #course-secondary-sidebar-toggle { justify-self: end; }

  .course-edge-sidebar-toggle:hover {
    color: var(--pst-color-link-hover);
  }

  .bd-container__inner.course-secondary-collapsed {
    grid-template-columns: min(20vw, 17.6rem) minmax(0, 1fr) 0;
  }

  .bd-container__inner.course-primary-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) var(--pst-sidebar-secondary);
  }

  .bd-container__inner.course-primary-collapsed.course-secondary-collapsed {
    grid-template-columns: 0 minmax(0, 1fr) 0;
  }

  .bd-container__inner.course-secondary-collapsed > .bd-sidebar-secondary,
  .bd-container__inner.course-primary-collapsed > .bd-sidebar-primary {
    border: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    pointer-events: none;
    width: 0;
  }

  .bd-container__inner.course-primary-collapsed::before { left: 0; }
  .bd-container__inner.course-secondary-collapsed::after { right: 0; }

  .bd-container__inner::before,
  .bd-container__inner::after {
    bottom: 0;
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    transition: left 160ms ease-out, right 160ms ease-out;
  }

  .bd-container__inner::before {
    border-left: 1px solid var(--pst-color-border);
    left: min(20vw, 17.6rem);
  }

  .bd-container__inner::after {
    border-right: 1px solid var(--pst-color-border);
    right: var(--pst-sidebar-secondary);
  }

  @media (prefers-reduced-motion: reduce) {
    .bd-container .bd-container__inner,
    .bd-container__inner > .bd-sidebar-primary,
    .bd-container__inner > .bd-sidebar-secondary,
    .bd-container__inner::before,
    .bd-container__inner::after {
      transition: none;
    }
  }
}

/* ``course-secondary-in-menu`` is set from the theme's rendered menu toggle,
   not a duplicate course breakpoint.  Therefore the grid changes exactly
   when PyData moves ``On this page`` into its header menu. */
@media (min-width: 960px) {
  .bd-container .bd-container__inner.course-secondary-in-menu,
  .bd-container__inner.course-secondary-in-menu.course-secondary-collapsed {
    grid-template-columns: min(20vw, 17.6rem) minmax(0, 1fr);
  }

  .bd-container__inner.course-secondary-in-menu.course-primary-collapsed,
  .bd-container__inner.course-secondary-in-menu.course-primary-collapsed.course-secondary-collapsed {
    grid-template-columns: 0 minmax(0, 1fr);
  }

  .bd-container__inner.course-secondary-in-menu::after {
    right: 0;
  }

  .bd-container__inner.course-secondary-in-menu #course-secondary-sidebar-toggle {
    display: none;
  }
}

/* Use the width released by the menu-owned secondary navigation. */
html.course-secondary-in-menu body.layout-info .bd-main .bd-content .bd-article-container {
  max-width: none;
}

/* The menu trigger moves these children into the theme dialog when opened.
   Until then, the desktop host must not remain a grid item: its explicit
   third-column placement would otherwise create an implicit empty track. */
.bd-container__inner.course-secondary-in-menu > #pst-secondary-sidebar {
  display: none;
}

/* Notes and callouts use block paragraphs rather than first-line indents.
   A modest gap makes separate paragraphs easy to scan. */
.bd-article p:not(.admonition-title) {
  text-indent: 0 !important;
}

.bd-article p:not(.admonition-title) + p:not(.admonition-title) {
  margin-top: 0.85rem;
}

/* Descriptive checkpoints make long proofs easier to scan. */
.bd-article .semantic-proof-step {
  font-weight: 650;
  margin-bottom: 0.35rem;
  margin-top: 1rem;
}

/* Homework problem names are secondary to their numbered markers. */
.homework-problem-name {
  font-size: 0.9em;
  font-weight: 400;
}

/* Callout anchors follow the section-heading convention: reveal on hover. */
.admonition > .admonition-title:hover > .headerlink,
.admonition > .admonition-title > .headerlink:focus-visible {
  visibility: visible;
}

/* Display math can interrupt prose without introducing a new paragraph.
   MyST can also put an otherwise standalone display in a paragraph when it
   lacks blank source lines.  Keep the display box itself marginless in every
   rendering stage; paragraph/block layout owns any intended separation. */
.math.display-math-interrupt,
.math-fallback[data-math-display="block"],
.math-enhanced[data-math-display="block"] {
  display: block;
  margin: 0;
  padding: 0;
}

/* MathJax 4 injects a .7em vertical display margin after this stylesheet has
   loaded.  Use one modest, deliberate gap at the actual output node instead,
   so prerendered SVG and browser MathJax agree without paragraph-derived
   whitespace above a formula. */
.math[data-math-display="block"] > .math-svg,
.math.display-math-interrupt > .math-svg,
.math[data-math-display="block"] > mjx-container[display],
.math.display-math-interrupt > mjx-container[display] {
  display: block;
  margin: 0.35rem 0 !important;
  padding: 0;
}

/* Semantic-LaTeX inline emphasis. Colors match xcolor's named palette. */
.semantic-underline { text-decoration: underline; }
.semantic-strikethrough { text-decoration: line-through; }
.semantic-boxed { border: 1px solid currentColor; border-radius: 0.15rem; padding: 0 0.2em; }
.semantic-center { text-align: center; }
.semantic-alignblocks-hleft,
.semantic-alignblocks-hcenter,
.semantic-alignblocks-hright { text-align: left; }
.semantic-alignblocks-hcenter .semantic-alignblocks-centered {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
}
.semantic-alignblocks-hleft .semantic-alignblocks-left {
  width: fit-content;
  max-width: 100%;
  margin-right: auto;
}
.semantic-alignblocks-hright .semantic-alignblocks-right {
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
}

/* ``verbatim`` is a literal source excerpt; ``code`` is an authored,
   language-aware example.  Keep their visual roles distinct even when both
   ultimately use a literal-block node in the Sphinx writer. */
.semantic-verbatim {
  background: transparent;
  border: 0;
  font-size: .7em;
  margin: 1rem 0;
  padding: 0;
}
.semantic-code {
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: .3rem;
  box-sizing: border-box;
  max-width: 100%;
  overflow: auto;
  padding: .8rem 1rem;
  text-align: left;
}
.semantic-code { font-size: .7em; margin: 1rem 0; }
.semantic-code pre {
  background: transparent;
  border: 0;
  margin: 0;
  padding: 0;
}
.semantic-code > .highlight,
.semantic-verbatim > .highlight {
  background: transparent;
  margin: 0;
  padding: 0;
}
.semantic-center > .semantic-code,
.semantic-center > .highlight {
  margin-left: auto;
  margin-right: auto;
  width: fit-content;
}
.semantic-code .k,
.semantic-code .kc,
.semantic-code .kd,
.semantic-code .kn,
.semantic-code .kp,
.semantic-code .kr,
.semantic-code .kt { color: #1d4ed8; font-weight: 600; }
.semantic-code .c,
.semantic-code .ch,
.semantic-code .cm,
.semantic-code .cp,
.semantic-code .cs { color: #64748b; font-style: italic; }
.semantic-code .s,
.semantic-code .sa,
.semantic-code .sb,
.semantic-code .sc,
.semantic-code .dl,
.semantic-code .sd,
.semantic-code .s2,
.semantic-code .se,
.semantic-code .sh,
.semantic-code .si,
.semantic-code .sx,
.semantic-code .sr,
.semantic-code .s1 { color: #047857; }
.semantic-text-style-tiny { font-size: .65em; }
.semantic-text-style-small { font-size: .8em; }
.semantic-text-style-normal { font-size: 1em; }
.semantic-text-style-large { font-size: 1.25em; }
.semantic-text-style-huge { font-size: 1.6em; }
.semantic-colored.semantic-color-black { color: black; }
.semantic-colored.semantic-color-blue { color: blue; }
.semantic-colored.semantic-color-brown { color: brown; }
.semantic-colored.semantic-color-cyan { color: cyan; }
.semantic-colored.semantic-color-darkgray { color: darkgray; }
.semantic-colored.semantic-color-gray { color: gray; }
.semantic-colored.semantic-color-green { color: green; }
.semantic-colored.semantic-color-lightgray { color: lightgray; }
.semantic-colored.semantic-color-lime { color: lime; }
.semantic-colored.semantic-color-magenta { color: magenta; }
.semantic-colored.semantic-color-olive { color: olive; }
.semantic-colored.semantic-color-orange { color: orange; }
.semantic-colored.semantic-color-pink { color: pink; }
.semantic-colored.semantic-color-purple { color: purple; }
.semantic-colored.semantic-color-red { color: red; }
.semantic-colored.semantic-color-teal { color: teal; }
.semantic-colored.semantic-color-violet { color: violet; }
.semantic-colored.semantic-color-white { color: white; }
.semantic-colored.semantic-color-yellow { color: yellow; }
.semantic-colorboxed { border-radius: 0.15rem; padding: 0 0.2em; }
.semantic-colorboxed.semantic-color-black { background-color: black; color: white; }
.semantic-colorboxed.semantic-color-blue { background-color: blue; color: white; }
.semantic-colorboxed.semantic-color-brown { background-color: brown; color: white; }
.semantic-colorboxed.semantic-color-cyan { background-color: cyan; }
.semantic-colorboxed.semantic-color-darkgray { background-color: darkgray; color: white; }
.semantic-colorboxed.semantic-color-gray { background-color: gray; color: white; }
.semantic-colorboxed.semantic-color-green { background-color: green; color: white; }
.semantic-colorboxed.semantic-color-lightgray { background-color: lightgray; }
.semantic-colorboxed.semantic-color-lime { background-color: lime; }
.semantic-colorboxed.semantic-color-magenta { background-color: magenta; color: white; }
.semantic-colorboxed.semantic-color-olive { background-color: olive; color: white; }
.semantic-colorboxed.semantic-color-orange { background-color: orange; }
.semantic-colorboxed.semantic-color-pink { background-color: pink; }
.semantic-colorboxed.semantic-color-purple { background-color: purple; color: white; }
.semantic-colorboxed.semantic-color-red { background-color: red; color: white; }
.semantic-colorboxed.semantic-color-teal { background-color: teal; color: white; }
.semantic-colorboxed.semantic-color-violet { background-color: violet; color: white; }
.semantic-colorboxed.semantic-color-white { background-color: white; }
.semantic-colorboxed.semantic-color-yellow { background-color: yellow; }

/* Remarks distinguish explanatory context from numbered results. */
.admonition.admonition-lecture-log,
div.admonition.admonition-lecture-log { background-color: #f9fafb; border-color: #9ca3af; }
.admonition.admonition-lecture-log > .admonition-title,
div.admonition.admonition-lecture-log > .admonition-title { background-color: #f3f4f6; color: #374151; }
/* A reusable variant for titled panels which intentionally have no icon.
   PyData reserves 2rem at the left of every admonition title for its default
   bell, so reset that padding as well as both icon pseudo-elements. */
.admonition.admonition-no-icon > .admonition-title,
div.admonition.admonition-no-icon > .admonition-title {
  padding-left: 0.6rem;
}

/* The base theme also indents prose following every admonition title.  For
   no-icon panels, keep the content aligned with the title and box gutter. */
.admonition.admonition-no-icon > .admonition-title ~ p,
div.admonition.admonition-no-icon > .admonition-title ~ p {
  margin-left: 0;
  margin-right: 0;
}

.admonition.admonition-no-icon > .admonition-title::before,
div.admonition.admonition-no-icon > .admonition-title::before,
.admonition.admonition-no-icon > .admonition-title::after,
div.admonition.admonition-no-icon > .admonition-title::after {
  background: none !important;
  content: none !important;
  display: none !important;
}

.admonition.admonition-remark,
div.admonition.admonition-remark { background-color: #f8fafc; border-color: #64748b; }
.admonition.admonition-remark > .admonition-title,
div.admonition.admonition-remark > .admonition-title { background-color: #e2e8f0; color: #334155; }

/* Warnings use a strong red treatment to signal attention. */
.admonition-warning,
.admonition.warning {
  background-color: #fef2f2;
  border-color: #dc2626;
}

.admonition-warning > .admonition-title,
.admonition.warning > .admonition-title {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Worked examples use a distinct blue admonition treatment. */
.admonition-example {
  border-color: #2563eb;
  background-color: #eff6ff;
}

.admonition-example > .admonition-title {
  background-color: #dbeafe;
  color: #1e3a8a;
}

.admonition.admonition-example > .admonition-title::after,
div.admonition.admonition-example > .admonition-title::after {
  box-sizing: border-box;
  content: "";
  display: block;
  background-image: url("../assets/example-explanation.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 1.5rem 1.5rem;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

/* Propositions use a warm brown treatment. */
.admonition.admonition-proposition,
div.admonition.admonition-proposition {
  background-color: #fff7ed;
  border-color: #92400e;
}

.admonition.admonition-proposition > .admonition-title,
div.admonition.admonition-proposition > .admonition-title {
  background-color: #fed7aa;
  color: #78350f;
}

.admonition.admonition-proposition > .admonition-title::after,
div.admonition.admonition-proposition > .admonition-title::after {
  background: url("../assets/proposition-math-board.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

/* Lemmas use a warm yellow treatment. */
.admonition.admonition-lemma,
div.admonition.admonition-lemma {
  background-color: #fffbeb;
  border-color: #d97706;
}

.admonition.admonition-lemma > .admonition-title,
div.admonition.admonition-lemma > .admonition-title {
  background-color: #fef3c7;
  color: #92400e;
}

.admonition.admonition-lemma > .admonition-title::after,
div.admonition.admonition-lemma > .admonition-title::after {
  background: url("../assets/lemma-pencil-ruler.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

/* Corollaries use a blue-violet treatment, close to examples but more purple. */
.admonition.admonition-corollary,
div.admonition.admonition-corollary {
  background-color: #eef2ff;
  border-color: #6366f1;
}

.admonition.admonition-corollary > .admonition-title,
div.admonition.admonition-corollary > .admonition-title {
  background-color: #e0e7ff;
  color: #3730a3;
}

.admonition.admonition-corollary > .admonition-title::after,
div.admonition.admonition-corollary > .admonition-title::after {
  background: url("../assets/corollary-cogs.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

/* Problems use a subdued slate treatment, distinct from propositions. */
.admonition.admonition-problem,
div.admonition.admonition-problem {
  border-color: #64748b;
  background-color: #f1f5f9;
}

.admonition.admonition-problem > .admonition-title,
div.admonition.admonition-problem > .admonition-title {
  background-color: #e2e8f0;
  color: #334155;
}

.admonition.admonition-problem > .admonition-title::after,
div.admonition.admonition-problem > .admonition-title::after {
  box-sizing: border-box;
  background: url("../assets/problem-question.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

/* Homework hints are intentionally visible, but quieter than warnings. */
.admonition.admonition-homework-hint,
div.admonition.admonition-homework-hint {
  border-color: #a16207;
  background-color: #fefce8;
}

.admonition.admonition-homework-hint > .admonition-title,
div.admonition.admonition-homework-hint > .admonition-title {
  background-color: #fef3c7;
  color: #713f12;
}

html[data-theme="dark"] .admonition.admonition-homework-hint,
html[data-theme="dark"] div.admonition.admonition-homework-hint {
  border-color: #facc15;
  background-color: #422006;
}

html[data-theme="dark"] .admonition.admonition-homework-hint > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-homework-hint > .admonition-title {
  background-color: #713f12;
  color: #fef3c7;
}

/* Challenge problems retain the problem icon and add an urgency marker. */
.admonition.admonition-challenge-problem,
div.admonition.admonition-challenge-problem {
  background-color: #fff1f2;
  border-color: #b91c1c;
}

.admonition.admonition-challenge-problem > .admonition-title,
div.admonition.admonition-challenge-problem > .admonition-title {
  background-color: #fecdd3;
  color: #881337;
  padding-left: 3.7rem;
}

.admonition.admonition-challenge-problem > .admonition-title::after,
div.admonition.admonition-challenge-problem > .admonition-title::after {
  box-sizing: border-box;
  background: url("../assets/problem-question.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

.admonition.admonition-challenge-problem > .admonition-title::before,
div.admonition.admonition-challenge-problem > .admonition-title::before {
  background: url("../assets/challenge-warning.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.25rem;
  left: 2rem;
  pointer-events: none;
  position: absolute;
  top: 0.38rem;
  width: 1.25rem;
  z-index: 1;
}

/* Mathematical results and rules use shared laboratory iconography. */
.admonition.admonition-theorem,
div.admonition.admonition-theorem,
.admonition.admonition-rule,
div.admonition.admonition-rule {
  background-color: #f5f3ff;
  border-color: #6d28d9;
}

.admonition.admonition-theorem > .admonition-title,
div.admonition.admonition-theorem > .admonition-title,
.admonition.admonition-rule > .admonition-title,
div.admonition.admonition-rule > .admonition-title {
  background-color: #ddd6fe;
  color: #4c1d95;
}

.admonition.admonition-theorem > .admonition-title::after,
div.admonition.admonition-theorem > .admonition-title::after,
.admonition.admonition-rule > .admonition-title::after,
div.admonition.admonition-rule > .admonition-title::after {
  background: url("../assets/theorem-flask.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

/* Definitions use a green palette and the course's mind icon. */
.admonition.admonition-definition,
div.admonition.admonition-definition {
  background-color: #ecfdf5;
  border-color: #059669;
}

.admonition.admonition-definition > .admonition-title,
div.admonition.admonition-definition > .admonition-title {
  background-color: #a7f3d0;
  color: #065f46;
}

.admonition.admonition-definition > .admonition-title::after,
div.admonition.admonition-definition > .admonition-title::after {
  background: url("../assets/definition-mind.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

.admonition.admonition-proof,
div.admonition.admonition-proof {
  background-color: #f9fafb;
  border-color: #9ca3af;
}

.admonition.admonition-proof > .admonition-title,
div.admonition.admonition-proof > .admonition-title {
  background-color: #f3f4f6;
  color: #374151;
}

.admonition.admonition-proof > .admonition-title::after,
div.admonition.admonition-proof > .admonition-title::after {
  background: url("../assets/proof-experiment.svg") center / contain no-repeat;
  content: "";
  display: block;
  height: 1.5rem;
  left: 0.2rem;
  margin: 0;
  top: 0.25rem;
  width: 1.5rem;
}

/* Preserve the visual distinction without carrying light-mode pastels into
   dark mode. Each title foreground/background pair exceeds WCAG AA contrast. */
html[data-theme="dark"] .admonition.admonition-warning,
html[data-theme="dark"] div.admonition.admonition-warning,
html[data-theme="dark"] .admonition.warning,
html[data-theme="dark"] div.admonition.warning {
  background-color: #2c1015;
  border-color: #f87171;
}

html[data-theme="dark"] .admonition.admonition-warning > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-warning > .admonition-title,
html[data-theme="dark"] .admonition.warning > .admonition-title,
html[data-theme="dark"] div.admonition.warning > .admonition-title {
  background-color: #7f1d1d;
  color: #fef2f2;
}

html[data-theme="dark"] .admonition.admonition-example,
html[data-theme="dark"] div.admonition.admonition-example {
  background-color: #172554;
  border-color: #93c5fd;
}

html[data-theme="dark"] .admonition.admonition-example > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-example > .admonition-title {
  background-color: #1e3a8a;
  color: #eff6ff;
}

html[data-theme="dark"] .admonition.admonition-proposition,
html[data-theme="dark"] div.admonition.admonition-proposition {
  background-color: #2b1a0e;
  border-color: #fdba74;
}

html[data-theme="dark"] .admonition.admonition-proposition > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-proposition > .admonition-title {
  background-color: #6b3b17;
  color: #ffedd5;
}

html[data-theme="dark"] .admonition.admonition-lemma,
html[data-theme="dark"] div.admonition.admonition-lemma {
  background-color: #2b2110;
  border-color: #fbbf24;
}

html[data-theme="dark"] .admonition.admonition-lemma > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-lemma > .admonition-title {
  background-color: #78350f;
  color: #fffbeb;
}

html[data-theme="dark"] .admonition.admonition-corollary,
html[data-theme="dark"] div.admonition.admonition-corollary {
  background-color: #1e1b4b;
  border-color: #a5b4fc;
}

html[data-theme="dark"] .admonition.admonition-corollary > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-corollary > .admonition-title {
  background-color: #4338ca;
  color: #eef2ff;
}

html[data-theme="dark"] .admonition.admonition-problem,
html[data-theme="dark"] div.admonition.admonition-problem {
  background-color: #1e293b;
  border-color: #93a4b8;
}

html[data-theme="dark"] .admonition.admonition-problem > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-problem > .admonition-title {
  background-color: #334155;
  color: #e2e8f0;
}

html[data-theme="dark"] .admonition.admonition-challenge-problem,
html[data-theme="dark"] div.admonition.admonition-challenge-problem {
  background-color: #2c1015;
  border-color: #fda4af;
}

html[data-theme="dark"] .admonition.admonition-challenge-problem > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-challenge-problem > .admonition-title {
  background-color: #7f1d1d;
  color: #fff1f2;
}

html[data-theme="dark"] .admonition.admonition-theorem,
html[data-theme="dark"] div.admonition.admonition-theorem,
html[data-theme="dark"] .admonition.admonition-rule,
html[data-theme="dark"] div.admonition.admonition-rule {
  background-color: #221436;
  border-color: #c4b5fd;
}

html[data-theme="dark"] .admonition.admonition-theorem > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-theorem > .admonition-title,
html[data-theme="dark"] .admonition.admonition-rule > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-rule > .admonition-title {
  background-color: #4c1d95;
  color: #f5f3ff;
}

html[data-theme="dark"] .admonition.admonition-definition,
html[data-theme="dark"] div.admonition.admonition-definition {
  background-color: #102a20;
  border-color: #6ee7b7;
}

html[data-theme="dark"] .admonition.admonition-definition > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-definition > .admonition-title {
  background-color: #065f46;
  color: #ecfdf5;
}

html[data-theme="dark"] .admonition.admonition-proof,
html[data-theme="dark"] div.admonition.admonition-proof {
  background-color: #252a33;
  border-color: #9ca3af;
}

html[data-theme="dark"] .admonition.admonition-proof > .admonition-title,
html[data-theme="dark"] div.admonition.admonition-proof > .admonition-title {
  background-color: #3f4651;
  color: #f9fafb;
}

/* Custom title icons are black SVGs; make them legible on dark headers. */
html[data-theme="dark"] .admonition.admonition-example > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-example > .admonition-title::after,
html[data-theme="dark"] .admonition.admonition-proposition > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-proposition > .admonition-title::after,
html[data-theme="dark"] .admonition.admonition-lemma > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-lemma > .admonition-title::after,
html[data-theme="dark"] .admonition.admonition-corollary > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-corollary > .admonition-title::after,
html[data-theme="dark"] .admonition.admonition-problem > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-problem > .admonition-title::after {
  filter: invert(1);
}

html[data-theme="dark"] .admonition.admonition-challenge-problem > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-challenge-problem > .admonition-title::after,
html[data-theme="dark"] .admonition.admonition-challenge-problem > .admonition-title::before,
html[data-theme="dark"] div.admonition.admonition-challenge-problem > .admonition-title::before {
  filter: invert(1);
}

html[data-theme="dark"] .admonition.admonition-theorem > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-theorem > .admonition-title::after,
html[data-theme="dark"] .admonition.admonition-rule > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-rule > .admonition-title::after,
html[data-theme="dark"] .admonition.admonition-definition > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-definition > .admonition-title::after,
html[data-theme="dark"] .admonition.admonition-proof > .admonition-title::after,
html[data-theme="dark"] div.admonition.admonition-proof > .admonition-title::after {
  filter: invert(1);
}

@media (min-width: 960px) {
  /* PyData's default primary sidebar is 25% of the page; use 20% instead. */
  .bd-sidebar-primary {
    width: 20%;
  }

  .bd-article,
  body.layout-info .bd-article,
  body.layout-notes .bd-article {
    padding-top: 1.25rem;
    padding-left: 0.4rem;
    padding-right: 0.5rem;
  }

  .bd-sidebar-secondary {
    width: var(--pst-sidebar-secondary);
    padding: 1rem 0.35rem 0.75rem;
  }

.sidebar-secondary-item {
    padding: 0.25rem 0 0.25rem 0.5rem;
  }

}

/* The sidebar toggle is intentionally an unobtrusive icon, not a label. */
.course-sidebar-toggle {
  display: inline-grid;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0.3rem;
  color: var(--pst-color-text-muted);
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
}

.course-sidebar-toggle:hover {
  color: var(--pst-color-link);
  background: var(--pst-color-surface);
}

.course-sidebar-toggle svg {
  width: 100%;
  height: 100%;
}

.course-sidebar-toggle .pst-collapse-sidebar-label,
.course-sidebar-toggle .pst-expand-sidebar-label {
  display: none;
}

/* On-this-page navigation is fully expanded by default.  The display menu
   offers concise alternatives without interfering with the theme's scroll spy,
   which continues to mark the current heading as active. */
.course-page-toc-heading {
  align-items: center;
  display: flex;
  gap: 0.3rem;
  justify-content: flex-start;
}

.course-page-toc-heading .onthispage {
  margin: 0;
}

.course-page-toc-display-menu .dropdown-toggle {
  border: 0;
  color: var(--pst-color-text-muted);
  font-size: var(--pst-sidebar-font-size);
  line-height: 1;
  padding: 0.2rem 0.35rem;
}

.course-page-toc-display-menu .dropdown-toggle:hover,
.course-page-toc-display-menu .dropdown-toggle:focus-visible {
  background: var(--pst-color-surface);
  color: var(--pst-color-link);
}

.course-page-toc-display-menu .dropdown-item.active,
.course-page-toc-display-menu .dropdown-item:active {
  background: var(--pst-color-primary);
  color: var(--pst-color-primary-text);
}

/* After a reader scrolls this navigation manually, offer a compact way back
   to the scroll-spy-selected section without obscuring the list itself. */
.course-page-toc-follow-current {
  position: fixed;
  right: 0.8rem;
  bottom: 0.9rem;
  z-index: 4;
  display: inline-grid;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0.45rem;
  border: 1px solid var(--pst-color-border);
  border-radius: 999px;
  color: var(--pst-color-text-base);
  background: var(--pst-color-background);
  box-shadow: 0 0.2rem 0.6rem rgb(0 0 0 / 0.16);
  font-size: var(--pst-sidebar-font-size);
  opacity: 0.72;
}

.course-page-toc-follow-current-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

html[data-theme="dark"] .course-page-toc-follow-current-icon {
  filter: invert(1);
}

.course-page-toc-follow-current:hover,
.course-page-toc-follow-current:focus-visible {
  color: var(--pst-color-link);
  opacity: 1;
}

.bd-container__inner.course-secondary-collapsed .course-page-toc-follow-current {
  display: none;
}

#pst-page-toc-nav[data-course-page-toc-mode="expanded"] ul ul {
  display: block;
}

#pst-page-toc-nav[data-course-page-toc-mode="top-level"] ul ul {
  display: none;
}

#pst-page-toc-nav[data-course-page-toc-mode="top-level"] > ul > .toc-entry:has(.active, [aria-current="true"]) > .nav-link {
  background-color: transparent;
  box-shadow: inset max(3px, 0.1875rem, 0.12em) 0 0 var(--pst-color-primary);
  color: var(--pst-color-primary);
  font-weight: 600;
}

#pst-page-toc-nav[data-course-page-toc-mode="current"] ul ul {
  display: none;
}

#pst-page-toc-nav[data-course-page-toc-mode="current"] .toc-entry:has(.active) > ul {
  display: block;
}

/* Keep wide mathematics scrollable without widening the whole document. */
.math-display,
div.math {
  overflow-x: auto;
  overflow-y: hidden;
}

/* Build-time SVG is the no-JavaScript/offline baseline; accessible MathJax
   SVG replaces it when the browser bundle is available. */
.math-fallback {
  cursor: text;
}

/* Punctuation belongs to the preceding inline formula.  The wrapper prevents
   a browser line break between the formula and its comma, period, or similar
   mark without making the surrounding sentence unbreakable. */
.semantic-inline-math-with-punctuation {
  white-space: nowrap;
}

.math-fallback:focus {
  outline: 2px solid var(--pst-color-accent);
  outline-offset: 0.2rem;
}

.math-fallback > .math-svg,
.math-enhanced > mjx-container {
  max-width: 100%;
}

/* The server-rendered mjx-container is an otherwise unknown inline element.
   Give display SVGs the same full-width centered box browser MathJax supplies. */
.math-fallback[data-math-display="block"] > .math-svg {
  display: block;
  text-align: center;
}

/* The portable single-page build searches its embedded page templates rather
   than relying on Sphinx's multi-file search index. */
.single-page-search-dialog {
  width: min(46rem, calc(100vw - 2rem));
  max-width: none;
  height: min(40rem, calc(100dvh - 3rem));
  max-height: none;
  padding: 0;
  overflow: hidden;
  color: var(--pst-color-text-base);
  background: var(--pst-color-background) !important;
  border: 1px solid var(--pst-color-border);
  border-radius: 0.65rem;
  box-shadow: 0 1.25rem 4rem rgb(0 0 0 / 0.3);
}

.single-page-search-dialog[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.single-page-search-dialog .bd-search {
  position: relative;
  z-index: 1;
  width: 100%;
  margin: 0;
  padding: 0.85rem 1rem;
  background: var(--pst-color-background);
  border-bottom: 1px solid var(--pst-color-border);
  border-radius: 0;
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 0.06);
}

.single-page-search-dialog .bd-search input { font-size: 1.05rem; }

.single-page-search-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  background: var(--pst-color-background);
}

.single-page-search-summary {
  display: flex;
  gap: 0.5rem 1rem;
  justify-content: space-between;
  padding: 0.65rem 1rem;
  color: var(--pst-color-text-muted);
  background: var(--pst-color-surface);
  border-bottom: 1px solid var(--pst-color-border);
  font-size: 0.82rem;
  line-height: 1.35;
}

.single-page-search-summary p { margin: 0; }

.single-page-search-results {
  min-height: 0;
  padding: 0.35rem 0.65rem 0.75rem;
  margin: 0;
  overflow-y: auto;
  background: var(--pst-color-background);
  list-style: none;
  scrollbar-gutter: stable;
}

.single-page-search-results > li {
  margin: 0;
  border-bottom: 1px solid var(--pst-color-border);
}

.single-page-search-results > li:last-child {
  border-bottom: 0;
}

.single-page-search-result {
  display: grid;
  gap: 0.22rem;
  padding: 0.85rem 0.75rem;
  color: var(--pst-color-text-base);
  background: var(--pst-color-background);
  border-radius: 0.4rem;
  text-decoration: none;
}

.single-page-search-result:hover,
.single-page-search-result:focus-visible {
  color: var(--pst-color-text-base);
  background: var(--pst-color-surface);
  outline: 2px solid var(--pst-color-accent);
  outline-offset: -3px;
}

.single-page-search-result__page {
  color: var(--pst-color-text-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  text-transform: uppercase;
}

.single-page-search-result__heading {
  color: var(--pst-color-link);
  font-size: 1rem;
  font-weight: 700;
}

.single-page-search-result__excerpt {
  display: block;
  color: var(--pst-color-text-muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.single-page-search-result mark {
  padding: 0 0.08em;
  color: inherit;
  background: color-mix(in srgb, var(--pst-color-warning) 40%, transparent);
  border-radius: 0.12rem;
}

@media (max-width: 36rem) {
  .single-page-search-dialog {
    width: calc(100vw - 1rem);
    height: calc(100dvh - 1rem);
    border-radius: 0.45rem;
  }

  .single-page-search-summary { display: block; }
  .single-page-search-summary #single-page-search-help { display: none; }

  .single-page-search-results { padding-inline: 0.35rem; }

  .single-page-search-result {
    padding: 0.75rem 0.6rem;
  }
}

/* General utility classes remain available to semantic MyST containers. */
.site-bg-primary { background: var(--brand-primary); color: var(--brand-white); }
.site-bg-light { background: var(--brand-light); color: var(--brand-dark); }
.site-bg-dark { background: var(--brand-dark); color: var(--brand-white); }
.site-bg-tan { background: var(--brand-tan); color: var(--brand-brown); }
.site-bg-navy { background: var(--brand-navy); color: var(--brand-white); }
.site-text-primary { color: var(--brand-primary); }
.site-text-brown { color: var(--brand-brown); }
.site-text-navy { color: var(--brand-navy); }
.site-border-primary { border-color: var(--brand-primary); }
.site-border-silver { border-color: var(--brand-silver); }

.site-surface {
  padding: 1rem 1.25rem;
  color: var(--brand-dark);
  background: var(--brand-light);
  border: 1px solid var(--brand-silver);
  border-radius: 0.25rem;
}

.site-surface > :first-child { margin-top: 0; }
.site-surface > :last-child { margin-bottom: 0; }

html[data-theme="dark"] .site-surface {
  color: var(--brand-light);
  background: var(--brand-navy);
  border-color: var(--brand-sky);
}

/* Public lecture entries that are not yet settled remain visible but distinct. */
.semantic-line-break {
  display: block;
}

.homework-part-weight {
  font-size: 0.7em;
}

/* Keep a homework part's label and opening text together. */
section[id^="homework-problem-"][id*="-part-"] > h3,
section[id^="homework-problem-"][id*="-part-"] > h3 + p {
  display: inline;
}

.semantic-hwinstructions {
  background: #f1f1f1;
  border-radius: 0.25rem;
  margin: 1rem 0;
  padding: 1rem 1.25rem;
}

.semantic-hwinstructions > :first-child {
  margin-top: 0;
}

.semantic-hwinstructions > :last-child {
  margin-bottom: 0;
}

.hwinstructions-title {
  font-weight: 700;
}

/* Model write-ups should resemble the scale and informality of handwritten
   student work while remaining selectable, searchable, and accessible text. */
.semantic-studentwork {
  font-family: "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive;
  font-size: 1.08rem;
  line-height: 1.65;
  margin: 0.75rem 0 1.25rem;
  padding: 1rem 1.1rem;
  background: color-mix(in srgb, var(--pst-color-surface) 94%, var(--brand-sky));
  border: 1px solid color-mix(in srgb, var(--pst-color-border) 65%, var(--brand-blue));
  border-radius: 0.25rem;
}

.semantic-studentwork > :first-child {
  margin-top: 0;
}

.semantic-studentwork > :last-child {
  margin-bottom: 0;
}

.online-question-title {
  font-weight: 700;
}

/* Collapsed instructor-facing exports from MyOpenMath. */
.my-open-math {
  margin: 1rem 0;
}

.my-open-math__controls {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.my-open-math__details {
  min-width: 0;
  flex: 1;
  border: 1px solid var(--pst-color-border, var(--brand-silver));
  border-radius: 0.25rem;
  background: var(--pst-color-surface, var(--brand-light));
}

.my-open-math__details > summary {
  padding: 0.55rem 0.75rem;
  cursor: pointer;
  font-weight: 600;
}

.my-open-math__contents {
  padding: 0.75rem;
}

.my-open-math__section + .my-open-math__section {
  margin-top: 1rem;
}

.my-open-math__section > h3 {
  margin: 0 0 0.35rem;
  font-size: 1rem;
}

.my-open-math__section pre {
  flex: 1;
  min-width: 0;
  max-height: 32rem;
  margin: 0;
  overflow: auto;
}

.my-open-math__copy {
  flex: 0 0 auto;
  margin-top: 0.1rem;
}

.lecture-log-tentative {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  color: var(--brand-brown);
  background: var(--brand-tan);
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.lecture-status {
  display: inline-block;
  margin: 0.35rem 0 0.65rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-transform: uppercase;
}

.lecture-status-published { color: #166534; background: #dcfce7; }
.lecture-status-tentative { color: var(--brand-brown); background: var(--brand-tan); }
.lecture-status-draft { color: #374151; background: #e5e7eb; }

html[data-theme="dark"] .lecture-status-published { color: #bbf7d0; background: #166534; }
html[data-theme="dark"] .lecture-status-tentative { color: var(--brand-navy); background: var(--brand-sky); }
html[data-theme="dark"] .lecture-status-draft { color: #f3f4f6; background: #4b5563; }

html[data-theme="dark"] .lecture-log-tentative {
  color: var(--brand-navy);
  background: var(--brand-sky);
}

.lecture-log-inclass {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.05rem 0.35rem;
  color: #174e63;
  background: #cdebf2;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

html[data-theme="dark"] .lecture-log-inclass {
  color: #d9f5fb;
  background: #24596a;
}

/* LaTeX's \item[(A)] syntax requests parenthesized alphabetic list markers. */
ol.parenthesized-upperalpha > li::marker {
  content: "(" counter(list-item, upper-alpha) ") ";
}

/* LaTeX's \item[label] syntax is represented inside the list item so the
   label remains available to screen readers and can contain inline math. */
.latex-item-label { font-weight: 700; }

/* Figure captions are supporting text, so keep them quieter than the image. */
.bd-article figure > figcaption,
.bd-article figure > p.caption {
  margin-top: 0.35rem;
  color: var(--pst-color-text-muted);
  font-family: var(--pst-font-family-base, sans-serif);
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1.4;
}

.grade-weights-chart { display: grid; grid-template-columns: minmax(11rem, 16rem) minmax(15rem, 1fr); gap: 1.25rem; align-items: center; max-width: 46rem; margin: 1.25rem auto; }
.grade-weights-chart svg { width: 100%; max-width: 16rem; margin: auto; }
.grade-weights-chart__slice { stroke: var(--pst-color-background); stroke-width: 1.25px; transform-box: view-box; transform-origin: center; transition: transform 160ms ease, filter 160ms ease; }
.grade-weights-chart__legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.35rem 1rem; padding: 0; margin: 0; list-style: none; font-size: 0.9rem; }
.grade-weights-chart__legend-item { display: grid; grid-template-columns: 0.75rem 1fr auto; gap: 0.35rem; align-items: baseline; padding: 0.18rem 0.3rem; border-radius: 0.2rem; outline-offset: 0.15rem; transition: background-color 160ms ease, box-shadow 160ms ease; }
.grade-weights-chart__swatch { width: 0.75rem; height: 0.75rem; border-radius: 0.1rem; }

.grade-weights-chart:has(.grade-weights-chart__slice--1:is(:hover, :focus), .grade-weights-chart__legend-item--1:is(:hover, :focus)) .grade-weights-chart__slice--1,
.grade-weights-chart:has(.grade-weights-chart__slice--2:is(:hover, :focus), .grade-weights-chart__legend-item--2:is(:hover, :focus)) .grade-weights-chart__slice--2,
.grade-weights-chart:has(.grade-weights-chart__slice--3:is(:hover, :focus), .grade-weights-chart__legend-item--3:is(:hover, :focus)) .grade-weights-chart__slice--3,
.grade-weights-chart:has(.grade-weights-chart__slice--4:is(:hover, :focus), .grade-weights-chart__legend-item--4:is(:hover, :focus)) .grade-weights-chart__slice--4,
.grade-weights-chart:has(.grade-weights-chart__slice--5:is(:hover, :focus), .grade-weights-chart__legend-item--5:is(:hover, :focus)) .grade-weights-chart__slice--5,
.grade-weights-chart:has(.grade-weights-chart__slice--6:is(:hover, :focus), .grade-weights-chart__legend-item--6:is(:hover, :focus)) .grade-weights-chart__slice--6,
.grade-weights-chart:has(.grade-weights-chart__slice--7:is(:hover, :focus), .grade-weights-chart__legend-item--7:is(:hover, :focus)) .grade-weights-chart__slice--7 { filter: brightness(1.14) drop-shadow(0 0 4px rgb(0 0 0 / 0.35)); transform: scale(1.15); }

.grade-weights-chart:has(.grade-weights-chart__slice--1:is(:hover, :focus), .grade-weights-chart__legend-item--1:is(:hover, :focus)) .grade-weights-chart__legend-item--1,
.grade-weights-chart:has(.grade-weights-chart__slice--2:is(:hover, :focus), .grade-weights-chart__legend-item--2:is(:hover, :focus)) .grade-weights-chart__legend-item--2,
.grade-weights-chart:has(.grade-weights-chart__slice--3:is(:hover, :focus), .grade-weights-chart__legend-item--3:is(:hover, :focus)) .grade-weights-chart__legend-item--3,
.grade-weights-chart:has(.grade-weights-chart__slice--4:is(:hover, :focus), .grade-weights-chart__legend-item--4:is(:hover, :focus)) .grade-weights-chart__legend-item--4,
.grade-weights-chart:has(.grade-weights-chart__slice--5:is(:hover, :focus), .grade-weights-chart__legend-item--5:is(:hover, :focus)) .grade-weights-chart__legend-item--5,
.grade-weights-chart:has(.grade-weights-chart__slice--6:is(:hover, :focus), .grade-weights-chart__legend-item--6:is(:hover, :focus)) .grade-weights-chart__legend-item--6,
.grade-weights-chart:has(.grade-weights-chart__slice--7:is(:hover, :focus), .grade-weights-chart__legend-item--7:is(:hover, :focus)) .grade-weights-chart__legend-item--7 { background: color-mix(in srgb, currentColor 10%, transparent); box-shadow: inset 0 0 0 1px currentColor; }

@media (max-width: 42rem) {
  .grade-weights-chart { grid-template-columns: 1fr; }
  .grade-weights-chart__legend { grid-template-columns: 1fr; }
}