/* Student-facing Quarto lecture notes: restrained academic layout.
 *
 * Conventions used here:
 *   - No hard-coded palette. Colours are neutral mid-grey alphas that read
 *     correctly against both cosmo (light) and darkly (dark).
 *   - Rules are keyed to semantic classes, so new chapters inherit the
 *     styling without page-specific CSS.
 */

/* ------------------------------------------------------------------ *
 * Body face: XCharter
 *
 * Michael Sharpe's extension of Bitstream Charter, whose licence permits
 * redistribution. Self-hosted so the page makes no external font request.
 * Licence text is in fonts/XCharter-LICENSE.txt. On macOS the system
 * Charter is an equivalent fallback; Georgia is the last resort.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "XCharter";
  src: url("fonts/XCharter-Roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "XCharter";
  src: url("fonts/XCharter-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "XCharter";
  src: url("fonts/XCharter-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "XCharter";
  src: url("fonts/XCharter-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  --sitp-rule: rgba(127, 127, 127, 0.28);
  --sitp-rule-strong: rgba(127, 127, 127, 0.45);
  --sitp-tint: rgba(127, 127, 127, 0.06);
  /* 40rem holds the prose at roughly 75 characters a line, and is the
   * narrowest column at which no display equation needs to scroll. */
  --sitp-measure: 40rem;
  --sitp-serif: "XCharter", Charter, "Bitstream Charter", Georgia, serif;
  --sitp-sans: system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --sitp-link: #00008b;
  --sitp-link-hover: #1a3d91;
}

/* Darkly's accent is a teal that fights a blue scheme, and a dark navy is
 * unreadable on its background, so the dark side gets its own values. The
 * Bootstrap variables are retuned as well, otherwise the sidebar and the
 * table of contents stay teal while the prose turns blue. */
body.quarto-dark {
  --sitp-link: #8ab4ff;
  --sitp-link-hover: #b3ccff;
  --bs-link-color: #8ab4ff;
  --bs-link-color-rgb: 138, 180, 255;
  --bs-link-hover-color: #b3ccff;
  --bs-link-hover-color-rgb: 179, 204, 255;
}

body.quarto-dark .sidebar-navigation .sidebar-item-text.active,
body.quarto-dark .sidebar-navigation a.sidebar-link.active,
body.quarto-dark a.sidebar-item-text.active {
  color: var(--sitp-link);
}

/* The theme paints the active table-of-contents entry with a hard-coded teal
 * carrying !important, so matching specificity and weight is required. */
body.quarto-dark .sidebar nav[role="doc-toc"] ul > li > a.active,
body.quarto-dark .sidebar nav[role="doc-toc"] ul > li > ul > li > a.active {
  color: var(--sitp-link) !important;
  border-left-color: var(--sitp-link);
}

body.quarto-dark .sidebar nav[role="doc-toc"] ul > li > a:hover,
body.quarto-dark .sidebar nav[role="doc-toc"] ul > li > ul > li > a:hover {
  color: var(--sitp-link-hover) !important;
}

/* Scoped to the reading column: the sidebar and table of contents keep the
 * theme's quieter blue so the navigation does not compete with the text. */
main.content a,
main.content a:visited {
  color: var(--sitp-link);
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.14em;
}

main.content a:hover,
main.content a:focus {
  color: var(--sitp-link-hover);
}

/* Body copy is set in the serif; the surrounding chrome stays sans, so the
 * reading column is visually separated from the navigation. */

main.content {
  font-family: var(--sitp-serif);
  font-size: 1.06rem;
  /* Charter was cut for 300 dpi output and its sidebearings are generous;
   * a touch of negative tracking settles it on a high-resolution screen. */
  letter-spacing: -0.006em;
}

main.content h1,
main.content h2,
main.content h3,
main.content h4 {
  font-family: var(--sitp-serif);
  letter-spacing: -0.012em;
}

/* ------------------------------------------------------------------ *
 * Measure and vertical rhythm
 * ------------------------------------------------------------------ */

main.content {
  max-width: var(--sitp-measure);
}

main.content p {
  line-height: 1.58;
}

main.content li {
  line-height: 1.54;
}

/* ------------------------------------------------------------------ *
 * Heading hierarchy
 *
 * Chapters carry many numbered sections, so the level-2 rule is the main
 * navigational cue when scrolling. Levels 3 and 4 are separated by weight
 * and space rather than by another rule.
 * ------------------------------------------------------------------ */

main.content h1 {
  line-height: 1.22;
  margin-bottom: 1.6rem;
}

main.content h2 {
  margin-top: 2.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--sitp-rule);
  line-height: 1.28;
}

main.content h3 {
  margin-top: 2.1rem;
  font-weight: 600;
}

main.content h4 {
  margin-top: 1.7rem;
  font-weight: 600;
  font-size: 1.02rem;
}

/* The first section heading of a chapter needs no separating rule. */
main.content > section:first-of-type > h2:first-child {
  border-top: none;
  margin-top: 1.8rem;
}

/* ------------------------------------------------------------------ *
 * Mathematics
 *
 * Long displays scroll inside their own box rather than widening the page.
 * ------------------------------------------------------------------ */

.math.display {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 0.2rem;
}

.math.display mjx-container {
  max-width: 100%;
}

/* ------------------------------------------------------------------ *
 * Callouts
 *
 * Four types carry fixed meanings, listed in the Preface. The theme
 * colours them strongly by default; here they are toned down to a coloured
 * left rule plus a plain header, so a page with two callouts still reads as
 * prose rather than as a dashboard.
 * ------------------------------------------------------------------ */

.callout.callout-style-default {
  border-radius: 0.25rem;
  border-left-width: 3px;
  margin-block: 1.5rem;
}

.callout.callout-style-default > .callout-header {
  background-color: var(--sitp-tint);
  font-weight: 600;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.callout.callout-style-default > .callout-body-container {
  padding-top: 0.7rem;
}

.callout.callout-style-default > .callout-body-container > p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Figure placeholders
 *
 * Marks a spot where an illustration would help. The artwork is not drawn
 * yet. Every placeholder uses this one class, so they can be located with
 * `grep -rn 'figure-placeholder' *.qmd` and removed as figures are added.
 *
 * PDF note: Quarto emits no LaTeX environment for a custom div, so in the
 * PDF this degrades to a plain paragraph. The bold "Figure placeholder."
 * label carries the meaning in that case.
 * ------------------------------------------------------------------ */

.figure-placeholder {
  border: 1px dashed var(--sitp-rule-strong);
  border-radius: 0.25rem;
  background-color: var(--sitp-tint);
  padding: 0.9rem 1.1rem;
  margin-block: 1.6rem;
  font-size: 0.94rem;
  line-height: 1.55;
}

.figure-placeholder > :first-child {
  margin-top: 0;
}

.figure-placeholder > :last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------ *
 * Chapter summaries
 *
 * Applied through `## Summary {.chapter-summary}` so the rule follows the
 * heading rather than a hard-coded id.
 * ------------------------------------------------------------------ */

section.chapter-summary {
  margin-top: 3.2rem;
  padding-top: 0.9rem;
  border-top: 2px solid var(--sitp-rule-strong);
}

section.chapter-summary > h2 {
  border-top: none;
  margin-top: 0;
  padding-top: 0;
}

section.chapter-summary ul {
  margin-bottom: 1rem;
}

/* ------------------------------------------------------------------ *
 * Sidebar
 *
 * Part headings are the top-level `sidebar-item-section` entries. They are
 * set apart from chapter links so the two-part structure of the notes is
 * visible at a glance.
 * ------------------------------------------------------------------ */

.sidebar-title {
  line-height: 1.25;
}

.sidebar-menu-container > ul > .sidebar-item-section > .sidebar-item-container > .sidebar-item-text {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.75;
}

.sidebar-menu-container > ul > .sidebar-item-section {
  margin-top: 1.1rem;
}

.sidebar-menu-container > ul > .sidebar-item-section > .sidebar-item-container {
  border-top: 1px solid var(--sitp-rule);
  padding-top: 0.6rem;
}

/* ------------------------------------------------------------------ *
 * Tables and bibliography
 * ------------------------------------------------------------------ */

table {
  font-size: 0.94rem;
}

main.content table th {
  border-bottom: 1px solid var(--sitp-rule-strong);
}

#refs .csl-entry {
  margin-bottom: 0.55rem;
}

/* ------------------------------------------------------------------ *
 * Narrow screens
 * ------------------------------------------------------------------ */

@media (max-width: 767px) {
  main.content p {
    line-height: 1.55;
  }

  main.content h2 {
    margin-top: 2.2rem;
  }

  .figure-placeholder {
    padding: 0.75rem 0.85rem;
  }
}