.lean-code {
  display: block;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans Symbols 2",
    "Segoe UI Symbol", monospace;
  font-size: 0.85em;
  line-height: 1.45;
  padding: 0.75em 1em;
  border-radius: 6px;
  background: #f6f8fa;
  border: 1px solid #d8dee4;
  color: #24292e;
}
.lean-kw    { color: #005cc5; font-weight: 600; }
.lean-sort  { color: #0b6fab; font-weight: 600; }
.lean-qual  { color: #005cc5; }
.lean-ident { color: inherit; }
.lean-num   { color: #986801; }
.lean-op    { color: #6a737d; }
.lean-brace { color: #6a737d; }
.lean-punct { color: #6a737d; }

body.quarto-dark .lean-code { background: #16241d; border-color: #2c4436; color: #dcefe3; }

/* Bootstrap's cosmo theme colors every inline `code` a bright purple by default, with no usage
convention behind it (it doesn't mark a distinct kind of content the way the callout accent colors
or the visited-link purple below do), so it reads as arbitrary noise next to plain text. Matching
it to the surrounding text color removes that without needing a light/dark split of its own, since
`--bs-body-color` already tracks the theme. */
:root { --bs-code-color: var(--bs-body-color); }

/* Inline `code` (cross-reference links, mostly) needs no light/dark split of its own: a black
overlay darkens whatever it sits on relative to that background, whether that's the page itself or
a callout's own already-tinted one, in both themes, without hardcoding either — dark mode needs a
higher alpha than light mode for the same visible effect, since its background starts out so much
closer to black already. `!important`: Quarto's own `p code:not(.sourceCode)` (and `li`/`td`
equivalents) is more specific than a bare `code` selector and wins inside a paragraph, i.e. almost
everywhere our own code actually appears — its own fixed, theme-independent gray is exactly the
"too bright" this overrides, not a selector fight worth chasing contextually one tag at a time. */
code:not(.lean-code) {
  background-color: rgba(0, 0, 0, 0.1) !important;
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

body.quarto-dark code:not(.lean-code) {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

.k-icon { vertical-align: -2px; margin-right: 0.35em; }

.rel {
  font-size: 0.82em;
  opacity: 0.85;
  margin: 0.4em 0;
}

.legend-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9em;
  border: 1px solid #d8dee4;
  border-radius: 6px;
  padding: 0.5em 0.9em;
  margin: 0.6em 0 1.4em;
}
.legend-items { display: flex; flex-wrap: wrap; gap: 0.9em; font-size: 0.8em; opacity: 0.85; }
.legend-items span { display: inline-flex; align-items: center; gap: 0.3em; }
.legend-swatch {
  display: inline-block;
  width: 0.85em;
  height: 0.85em;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.legend-line { display: inline-block; width: 1.4em; border-top: 2px solid #9aa2ab; }
.legend-line-dashed { border-top-style: dashed; }
.legend-label {
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.55;
  white-space: nowrap;
}

body.quarto-dark .legend-box { border-color: #30363d; }

.diagram-section { margin-top: 2.5em; }

/* A link to a maintainer-facing tool page (e.g. concept coverage), not course content itself —
deliberately smaller/quieter than a normal paragraph link so it doesn't read as part of the
course material. */
.tool-link { display: inline-block; font-size: 0.82em; opacity: 0.75; margin: 0.2em 0 0.6em; }

.tiny-image { height: 1.4em; width: auto; vertical-align: middle; margin-left: 0.15em; }

/* `respect-user-color-scheme` (see render_quarto_yml) already follows the OS/browser setting on
its own — the toggle button exists only to override that, which isn't offered here on purpose. */
.quarto-color-scheme-toggle { display: none !important; }

/* The dr. heap logo is a solid black mark on a transparent background — invisible against a dark
sidebar without this, since there's no separate light-colored version to swap in instead. */
body.quarto-dark .sidebar-logo { filter: invert(1); }

/* Quarto's docked sidebar defaults to a plain white/near-white panel regardless of theme — this
keeps it the same tinted color as the rest of the page in both themes, via the same CSS variable
`theme-light.scss`/`theme-dark.scss` already set `$body-bg` into. */
#quarto-sidebar, .sidebar { background-color: var(--bs-body-bg); }

/* The sidebar's own nav-link color comes from a Bootstrap variable this theme doesn't touch
(unlike $body-color/$link-color), so it stays a fixed dark gray even against the dark sidebar
background above — too dark to read there once that background actually is dark. */
body.quarto-dark #quarto-sidebar a,
body.quarto-dark .sidebar-item-container .sidebar-link { color: var(--bs-body-color); }

/* Standard browser convention: a visited link turns purple, distinct from the unvisited brand
green above. Bootstrap's own `a { color: var(--bs-link-color); }` has no `:visited` counterpart,
so without this every link stays green forever regardless of visit history. */
a:visited { color: #7a2f8a; }
body.quarto-dark a:visited { color: #c58af9; }

/* A diagram's own container — genuinely pannable/zoomable (see `render_cytoscape`), unlike a
fixed Mermaid layout — needs a real, fixed size to fit itself into and draw its own on-diagram
+/-/reset controls over. */
.graph-viewport {
  height: 65vh;
  min-height: 320px;
  overflow: hidden;
  position: relative;
  border: 1px solid #d8dee4;
  border-radius: 6px;
  margin: 0.75em 0;
}

body.quarto-dark .graph-viewport { border-color: #30363d; }

.tags { margin: 0.6em 0; }
.tag {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-size: 0.75em;
  padding: 0.35em 0.6em;
  margin: 0 0.35em 0.35em 0;
  border-radius: 6px;
  background: #eef1f4;
  color: #3a3a3f;
  border: 1px solid #d8dee4;
}
body.quarto-dark .tag { background: #232f28; color: #dcefe3; border-color: #3a4a3d; }

/* Always a plain white box, in both themes: TikZJax renders black strokes/text with no way to
recolor them from here, so a dark box would make the diagram itself unreadable. */
.tikz-box {
  display: inline-block;
  background: #fff;
  padding: 0.75em;
  border-radius: 6px;
  border: 1px solid #d8dee4;
  margin: 0.75em 0;
}

/* @[ignore]-tagged declarations (technical plumbing, "Technical — you can skip this") always
fade towards the page background, regardless of their kind's usual accent color (border, header,
title, and the code snippet itself), so they read as clearly optional at a glance rather than
competing with the declarations a student actually needs to read. Plain opacity, rather than
picking gray shades by hand, works the same in light and dark mode without a separate override. */
.callout.ignored { opacity: 0.4; }

/* @[example]-tagged declarations (a worked example illustrating a concept already introduced,
not a new one of its own) always render in a highlighted, post-it-yellow box, regardless of their
kind's usual accent color — the opposite instinct from `.ignored`: this is exactly the kind of
thing a student should stop and read, not fade past. Dark-mode colors are keyed off
`body.quarto-dark`/`body.quarto-light` (added by Quarto's own light/dark toggle — see
`render_quarto_yml`'s dual `theme:`), not an OS-level `prefers-color-scheme` media query: the two
can disagree the moment someone actually uses the toggle, since it deliberately overrides the OS
default once touched. */
/* `div.callout-<kind>.callout { border-left-color: ... }` (Bootstrap's own rule, one element
selector plus two classes) otherwise outranks a plain two-class `.callout.example` here — same
specificity family, but Bootstrap's `div` prefix edges it out — so this needs the same `div`
prefix to actually win the tie by source order (this file loads after Bootstrap's). */
div.callout.example,
.callout.example .callout-body-container { background-color: #fffbe6; color: #6b5900; }
div.callout.example { border-left-color: #ffd02f; }
.callout.example.callout-style-default > .callout-header { background-color: #fff3c4; }
.callout.example .callout-title-container { color: #6b5900; }

body.quarto-dark div.callout.example,
body.quarto-dark .callout.example .callout-body-container {
  background-color: #4a3f13; color: #f5e9a8;
}
body.quarto-dark div.callout.example { border-left-color: #ffd02f; }
body.quarto-dark .callout.example.callout-style-default > .callout-header {
  background-color: #5c4f18;
}
body.quarto-dark .callout.example .callout-title-container { color: #f5e9a8; }